# Frontend Standards Into an Installable AI Skill — for React, Next.js, Vue, Angular, Svelte, Nuxt, Astro, and Plain HTML/CSS > Source: > Published: 2026-07-17 19:32:12+00:00 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. ** 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: `rem` /`em` text scaling, `prefers-reduced-motion` , VoiceOver/NVDA-aware patternsIt 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. 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 `assets/RULES.md` — a condensed, self-contained rule file, ready to drop straight into a project ## InstallFour 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 ``` This writes `.claude/skills//` (a real Claude Skill), `.cursor/rules/-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 ``` **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 ``` 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. 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.