frontend-patterns

frontend-patterns is a skill in affaan-m/ECC, last changed 11 Aug 2026. It can reach the network. Our pattern check flagged nothing at commit 25278e7 on 26 Oct 2026.

Pattern check: nothing flagged · commit 25278e7 · 26 Oct 2026

Install

From the author

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.

Licence: MIT
Repo stars: 290.0k
Folder last changed: 11 Aug 2026 (opens in a new tab)
Publisher: affaan-m
Files: 1 file
Checked: 25278e7 (opens in a new tab) · 26 Oct 2026

Install

Each tab says whether it installs commit 25278e7, the one we checked, or the latest version.

No tab for your agent? Use Any agent for OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie, Amp and Antigravity, and Claude Code for Cline. Kiro needs the folder copied by hand.

Pinned to commit 25278e7, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/affaan-m/ECC.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  git -C "$tmp" sparse-checkout set -- skills/frontend-patterns &&
  git -C "$tmp" checkout -q 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  mkdir -p .claude/skills &&
  mkdir .claude/skills/frontend-patterns &&
  cp -R "$tmp"/skills/frontend-patterns/. .claude/skills/frontend-patterns/ &&
  rm -rf "$tmp"

If Claude Code was already running and this created the skills folder, run /reload-skills.

Claude Code docs

Pinned to commit 25278e7, the one we checked.

Skills in the Claude apps belong to your account rather than to a project.

Make frontend-patterns.zip, with the skill folder at the top level:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/affaan-m/ECC.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  git -C "$tmp" sparse-checkout set -- skills/frontend-patterns &&
  git -C "$tmp" checkout -q 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  out="$(mktemp -d)" &&
  cp -R "$tmp"/skills/frontend-patterns "$out"/frontend-patterns &&
  (cd "$out" && zip -qr - frontend-patterns) > frontend-patterns.zip &&
  rm -rf "$tmp" "$out"

In Claude, open Customize > Skills, select +, then + Create skill > Upload a skill, and choose frontend-patterns.zip.

On Free, Pro and Max plans, turn on Code execution and file creation (Create and edit files in newer settings) under Settings > Capabilities.

Claude apps docs

Pinned to commit 25278e7, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/affaan-m/ECC.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  git -C "$tmp" sparse-checkout set -- skills/frontend-patterns &&
  git -C "$tmp" checkout -q 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  mkdir -p .agents/skills &&
  mkdir .agents/skills/frontend-patterns &&
  cp -R "$tmp"/skills/frontend-patterns/. .agents/skills/frontend-patterns/ &&
  rm -rf "$tmp"

Codex picks up new skills on its own; restart it if this one does not appear.

Codex docs

Pinned to commit 25278e7, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/affaan-m/ECC.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  git -C "$tmp" sparse-checkout set -- skills/frontend-patterns &&
  git -C "$tmp" checkout -q 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  mkdir -p .cursor/skills &&
  mkdir .cursor/skills/frontend-patterns &&
  cp -R "$tmp"/skills/frontend-patterns/. .cursor/skills/frontend-patterns/ &&
  rm -rf "$tmp"

Cursor docs

Pinned to commit 25278e7, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/affaan-m/ECC.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  git -C "$tmp" sparse-checkout set -- skills/frontend-patterns &&
  git -C "$tmp" checkout -q 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  mkdir -p .github/skills &&
  mkdir .github/skills/frontend-patterns &&
  cp -R "$tmp"/skills/frontend-patterns/. .github/skills/frontend-patterns/ &&
  rm -rf "$tmp"

In a running Copilot CLI session, run /skills reload.

Or install it with gh skill, which also installs the commit we checked. Needs GitHub CLI 2.90 or later.

gh skill install affaan-m/ECC skills/frontend-patterns/SKILL.md@25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b --agent github-copilot --scope project

Copilot & VS Code docs

Pinned to commit 25278e7, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/affaan-m/ECC.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  git -C "$tmp" sparse-checkout set -- skills/frontend-patterns &&
  git -C "$tmp" checkout -q 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  mkdir -p .gemini/skills &&
  mkdir .gemini/skills/frontend-patterns &&
  cp -R "$tmp"/skills/frontend-patterns/. .gemini/skills/frontend-patterns/ &&
  rm -rf "$tmp"

In a running session, run /skills reload.

Or use Gemini CLI’s own installer. Installs the latest version, not the one we checked.

gemini skills install https://github.com/affaan-m/ECC.git --path skills/frontend-patterns --scope workspace

Gemini CLI docs

Pinned to commit 25278e7, the one we checked.

Codex, Cursor, Copilot, VS Code, Gemini CLI, OpenCode, Goose, Amp and Zed all read .agents/skills; Claude Code and Kiro list only their own folders.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/affaan-m/ECC.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  git -C "$tmp" sparse-checkout set -- skills/frontend-patterns &&
  git -C "$tmp" checkout -q 25278e7d7b6cf6e6a4e7a6c8e10f14ff22f0eb5b &&
  mkdir -p .agents/skills &&
  mkdir .agents/skills/frontend-patterns &&
  cp -R "$tmp"/skills/frontend-patterns/. .agents/skills/frontend-patterns/ &&
  rm -rf "$tmp"

Or use the skills CLI from skills.sh. Installs the latest version, not the one we checked. The skills CLI reports installs to skills.sh unless you set DISABLE_TELEMETRY=1.

npx skills@1.7.4 add affaan-m/ECC --skill frontend-patterns

Agent Skills docs

What it can touch

From the files and frontmatter at commit 25278e7. This is how much a skill can do, not whether it is risky.

What it can touch: Scripts or outside hosts

Reaches the network
It sends or fetches data over the internet, for example with curl, an HTTP library or a package install.

Pattern check

Pattern check: nothing flagged · commit 25278e7 · 26 Oct 2026

We checked every text file in this skill, at commit 25278e7 on 26 Oct 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.

How the check works Report an incorrect finding

Format check

Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.

Agent Skills specPasses with warnings
The open format from agentskills.io, held to what the strictest agents enforce, so one folder loads everywhere.
- Warning
  The body is 650 lines; the spec suggests under 500. B1
  Fix: Move detailed sections into reference files and link to them from SKILL.md.
- Note
  There is no license field, so readers can't tell whether they may reuse the skill. O2
  Fix: Add license: with an SPDX name such as MIT or Apache-2.0, or the name of a bundled licence file.
Claude CodePasses
Claude Code reads its own extra fields, ignores unknown ones, and still loads a skill whose frontmatter is broken, without its fields.
- Note
  The body is 650 lines; the spec suggests under 500. Claude Code's docs say the same. B1
  Fix: Move detailed sections into reference files and link to them from SKILL.md.
Claude apps & API uploadPasses
Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.
- Note
  The description is 206 characters. The claude.ai Help Center says 200 at most, though Anthropic's API docs and validator allow 1,024. D4
  Fix: If the claude.ai upload refuses it, trim the description to 200 characters.
- Note
  The body is 650 lines; the spec suggests under 500. Anthropic's guidance says the same. B1
  Fix: Move detailed sections into reference files and link to them from SKILL.md.
OpenAI (Codex & API)Passes
VS Code & CopilotPasses

SKILL.md

Files

1 file

Path	Size
SKILL.md (opens in a new tab)	15.1 KB

More from affaan-m/ECC

accessibility
affaan-m/ECC
Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support. Use when building or auditing UI for accessibility compliance, keyboard navigation, or screen-reader support.
Pattern check: Nothing flaggedWhat it can touch: Names web addresses
MIT · 290.0k repo stars · Updated 27 Sept 2026
agent-architecture-audit
affaan-m/ECC
Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution, tool discipline failures, hidden repair loops, and rendering corruption. Produces severity-ranked findings with code-first fixes. Essential for developers building agent applications, autonomous loops, or any LLM-powered feature. Use when an agent or LLM feature misbehaves and the failing layer is unknown, or before shipping an agent stack.
Pattern check: Nothing flaggedWhat it can touch: Runs shell commands
MIT · 290.0k repo stars · Updated 11 Aug 2026
agent-eval
affaan-m/ECC
Head-to-head comparison of coding agents (Claude Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and consistency metrics. Use when choosing between coding agents, or when a change to an agent setup needs measured pass rate, cost, and time rather than an impression.
Pattern check: Nothing flaggedWhat it can touch: Runs shell commands · Names web addresses
MIT · 290.0k repo stars · Updated 11 Aug 2026
agent-harness-construction
affaan-m/ECC
Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates. Use when defining or revising an agent's tool set, action space, or observation format.
Pattern check: Nothing flaggedWhat it can touch: Instructions only
MIT · 290.0k repo stars · Updated 11 Aug 2026
agent-introspection-debugging
affaan-m/ECC
Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports. Use when an agent run fails and you need a reproducible diagnosis instead of a retry.
Pattern check: Nothing flaggedWhat it can touch: Instructions only
MIT · 290.0k repo stars · Updated 11 Aug 2026
agent-payment-x402
affaan-m/ECC
Add x402 payment execution to AI agents with per-task budgets, spending controls, and non-custodial wallets. Supports Base through agentwallet-sdk, X Layer through OKX Payments / OKX Agent Payments Protocol, and Solana plus multi-network EVM through the upstream x402 packages with facilitator-based settlement. Use when an agent must pay for something itself and needs per-task budgets, spending controls, and a non-custodial wallet.
Pattern check: Nothing flaggedWhat it can touch: Runs shell commands · Reaches the network +1
MIT · 290.0k repo stars · Updated 9 Oct 2026

All skills in affaan-m/ECC

Install

What it can touch

Pattern check

Format check

SKILL.md

Files

More from affaan-m/ECC

accessibility

agent-architecture-audit

agent-eval

agent-harness-construction

agent-introspection-debugging

agent-payment-x402