Frontend Standard Skills

Installable AI skills and enforceable rule files that make Claude Code, Cursor, and other AI coding tools produce accessible, fast, and consistent frontend code — by default, on every task, without you having to ask.

Point this at a project and it generates a strict, opinionated, enforceable rule set covering:

• Accessibility — WCAG 2.1 AA, keyboard operability, semantic HTML, ARIA, focus management, screen-reader support
• Support for visually impaired users — descriptive alt text, color-independent state, rem/em text scaling, prefers-reduced-motion, VoiceOver/NVDA-aware patterns
• Core Web Vitals — LCP < 2.5s, CLS < 0.1, INP < 200ms, measured against pagespeed.web.dev
• Component design — reusability, composability, proper typing, no prop drilling
• UX consistency — predictable UI, design tokens, loading/empty/error states, mobile-first responsive design
• Code quality — camelCase naming, DRY, sane folder structure, comments that explain why, a README that stays current

One skill per stack. Install the one you need, or install all of them.

Supported stacks

| Stack | | Docs | Install | |---|---|---|---| | HTML & CSS | | MDN | npx frontend-standard-skills add html-css | | React | | react.dev | npx frontend-standard-skills add react | | Next.js | | nextjs.org/docs | npx frontend-standard-skills add nextjs | | Nuxt | | nuxt.com/docs | npx frontend-standard-skills add nuxt | | Astro | | docs.astro.build | npx frontend-standard-skills add astro | | Angular | | angular.dev | npx frontend-standard-skills add angular | | Vue.js | | vuejs.org | npx frontend-standard-skills add vuejs | | Svelte | | svelte.dev/docs | npx frontend-standard-skills add svelte | | Core Standards | (framework-agnostic baseline) | — | npx frontend-standard-skills add core-standards |

Each stack folder under skills/ is a complete, self-contained Claude Skill — SKILL.md, detailed references/, and a ready-to-install assets/RULES.md. Every stack skill stands on its own (install just nextjs and you get a complete rule set) and also extends skills/core-standards/, the shared accessibility/performance/UX/code-quality baseline every stack is built on.

Install

Four ways to use this, pick whichever fits your tool:

1. CLI — npx / pnpm / yarn (works with Cursor, Claude Code, or any AI tool)

# one stack
npx frontend-standard-skills add nextjs

# several
npx frontend-standard-skills add react vuejs svelte

# everything
npx frontend-standard-skills add all

# pnpm / yarn
pnpm dlx frontend-standard-skills add nextjs
yarn dlx frontend-standard-skills add nextjs

This writes, into your project:

| Output | For | |---|---| | .claude/skills/<stack>/ | Claude Code / claude.ai — auto-discovered as a skill (and, since it ships a .claude-plugin/plugin.json, auto-loads as a zero-install plugin too) | | .cursor/rules/<stack>-frontend-standards.mdc | Cursor | | CLAUDE.md (a marked section) | Claude Code, and any tool that reads CLAUDE.md | | AGENTS.md (a marked section) | Any AI tool following the emerging AGENTS.md convention (Cursor, Aider, Codex, etc.) |

Re-running add for the same stack updates its section in place (look for the <!-- frontend-standard-skills:<stack> START/END --> markers) instead of duplicating it. Scope to just one output with --target claude|cursor|claude-md|agents, and point at a different folder with --dir ./apps/web.

npx frontend-standard-skills list                 # see every available stack
npx frontend-standard-skills add nextjs --target cursor
npx frontend-standard-skills add all --dir ./apps/web

2. Claude Code plugin marketplace

/plugin marketplace add abayomijohn273/frontend_standard_skills
/plugin install nextjs
/plugin install react vuejs   # install as many as you need

Browse everything with /plugin inside Claude Code.

3. Claude Skills — manual copy

Skills are just folders. Copy the one(s) you want straight into your project or personal skills directory — no install step required:

git clone https://github.com/abayomijohn273/frontend_standard_skills
cp -r frontend_standard_skills/skills/nextjs your-project/.claude/skills/nextjs
# or personally, for every project:
cp -r frontend_standard_skills/skills/nextjs ~/.claude/skills/nextjs

4. Global npm install

npm install -g frontend-standard-skills
frontend-standard-skills add nextjs
# or the short alias:
fss add nextjs

What actually gets enforced

Every stack's assets/RULES.md is built around the same enforceable core (see skills/core-standards for the full detail), then adds the framework-specific implementation on top:

• Accessibility: semantic HTML over div-soup, full keyboard operability with visible focus states, correct ARIA usage, WCAG 2.1 AA color contrast, accessible forms/modals/buttons/nav baked into shared components.
• Core Web Vitals, measured against pagespeed.web.dev: LCP < 2.5s, CLS < 0.1, INP < 200ms, Lighthouse Performance ≥ 90 (mobile) — enforced in CI via Lighthouse CI, not just checked manually.
• DRY & componentization: shared logic/markup/tokens extracted once, feature code never leaking into shared components, files split before they become unmaintainable.
• Consistency: one spacing/type scale, one component per UI pattern, camelCase naming (with each stack's documented ecosystem exception — e.g. PascalCase.tsx React components, Angular's kebab-case CLI convention), a README that's required to stay current.

Each stack's references/ folder goes deeper — accessibility patterns, performance techniques, component/code standards, and testing & CI setup, all with concrete "bad vs. good" code examples.

Repository structure

frontend_standard_skills/
├── .claude-plugin/
│   └── marketplace.json        # Claude Code plugin marketplace catalog
├── bin/
│   └── cli.js                  # the npx/npm/pnpm/yarn installer
├── skills/
│   ├── core-standards/         # framework-agnostic baseline every stack extends
│   ├── html-css/
│   ├── react/
│   ├── nextjs/
│   ├── nuxt/
│   ├── astro/
│   ├── angular/
│   ├── vuejs/
│   └── svelte/
│       ├── .claude-plugin/plugin.json   # makes this folder installable as a Claude Code plugin
│       ├── SKILL.md                     # entry point Claude/Cursor reads
│       ├── references/                  # accessibility, performance, component/code standards, testing
│       └── assets/RULES.md              # the enforceable rule file installed into your project
├── package.json
└── LICENSE

Using a skill once installed

Once installed, just ask your AI tool to do frontend work — it reads the rules automatically. A few examples:

"Review ProductCard.tsx against our frontend standards — flag accessibility and Core Web Vitals issues."

"Build a new checkout form following our component and accessibility standards."

"Why is our PageSpeed score low on the homepage? Use our performance standards to diagnose it."

"Set up Lighthouse CI in our pipeline per our testing standards."

Contributing

Adding a new stack (Solid, Qwik, Remix, etc.) or improving an existing one? Follow the structure of an existing skills/<stack>/ folder — SKILL.md frontmatter (name, a specific, "pushy" description naming concrete trigger phrases), references/*.md with concrete bad-vs-good examples, and a self-contained assets/RULES.md. Keep the enforced Core Web Vitals thresholds (LCP < 2.5s, CLS < 0.1, INP < 200ms) identical across every stack — they're measured against the same tool (pagespeed.web.dev), not stack-specific opinions. Open a PR; add the new plugin entry to .claude-plugin/marketplace.json and a row to the table above.

License

MIT © Abayomi John Olatunji