DEV Community

Cover image for Frontend Standards Into an Installable AI Skill — for React, Next.js, Vue, Angular, Svelte, Nuxt, Astro, and Plain HTML/CSS
Abayomi Olatunji
Abayomi Olatunji

Posted on

Frontend Standards Into an Installable AI Skill — for React, Next.js, Vue, Angular, Svelte, Nuxt, Astro, and Plain HTML/CSS

#webdev #ai #programming #a11y

If you've used Claude Code, Cursor, or Copilot for any real amount of frontend work, you've probably noticed the same thing I did: the code is fast to produce, but it's inconsistent. One component has a proper aria-label, the next one doesn't. One image has explicit dimensions, the next one causes a layout shift. One PR follows your folder convention, the next one invents a new one.

You can fix this one prompt at a time: "make this accessible," "optimize this for Core Web Vitals", "follow our conventions", but that only works if you remember to ask, every time, for every file. So I turned it into a rule set the AI reads automatically instead.

What it is

frontend-standard-skills is an open-source collection of installable AI skills — one per frontend stack — that make Claude Code, Cursor, and any other AI coding tool produce accessible, performant, and consistent frontend code without you having to re-prompt for it every time.

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

  • Accessibility — WCAG 2.1 AA, full keyboard operability, semantic HTML over div-soup, correct ARIA usage, focus management
  • 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, with a Lighthouse CI setup to enforce it in your pipeline instead of just checking it manually
  • 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, a README that's required to stay current

It ships one skill per stack HTML & CSS, React, Next.js, Nuxt, Astro, Angular, Vue.js, and Svelte plus a framework-agnostic core-standards skill that every stack skill builds on. Install just the one you need, or install all of them.

Why a skill instead of a prompt

A prompt is something you have to remember to type. A skill is something the AI consults on its own once it's relevant: reviewing a component, building a form, or diagnosing a slow PageSpeed score. Each stack's skill folder includes:

  • SKILL.md — the entry point, with a description written to actually trigger (not just sit there unused)
  • references/ — deep-dive docs on accessibility, performance, component/code standards, and testing & CI, every one with concrete bad vs. good code examples
  • assets/RULES.md — a condensed, self-contained rule file, ready to drop straight into a project ## Install

Four ways to use it, pick whichever fits your setup:

CLI (npx / npm / pnpm / yarn) — works with Cursor, Claude Code, or anything that reads AGENTS.md:

npx frontend-standard-skills add nextjs
npx frontend-standard-skills add react vuejs svelte   # several at once
npx frontend-standard-skills add all                  # everything
Enter fullscreen mode Exit fullscreen mode

This writes .claude/skills/<stack>/ (a real Claude Skill), .cursor/rules/<stack>-frontend-standards.mdc, and marked sections in CLAUDE.md and AGENTS.md — re-running it updates those sections in place instead of duplicating them.

Claude Code plugin marketplace:

/plugin marketplace add abayomijohn273/frontend_standard_skills
/plugin install nextjs
Enter fullscreen mode Exit fullscreen mode

Claude Skills, manually — they're just folders, so you can cp -r the one you want straight into .claude/skills/ or ~/.claude/skills/, no install step at all.

Global npm install:

npm install -g frontend-standard-skills
fss add nextjs
Enter fullscreen mode Exit fullscreen mode

What it looks like in practice

Once installed, you just work normally and the AI reads the rules as part of its context:

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

"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."

No re-explaining what "accessible" or "fast" means to you every single time.

Links

It's MIT licensed and open to contributions. Adding a new stack (Solid, Qwik, Remix, whatever you're using) is just a matter of following the structure of an existing one. I will be updating it with more stacks. If you try it, I'd genuinely like to know if something went wrong in the output on your codebase because that's exactly the kind of feedback that makes the rule files better. Also, don't forget to leave a Star on GitHub.

Top comments (0)