{"slug": "frontend-standards-into-an-installable-ai-skill-for-react-next-js-vue-angular", "title": "Frontend Standards Into an Installable AI Skill — for React, Next.js, Vue, Angular, Svelte, Nuxt, Astro, and Plain HTML/CSS", "summary": "A developer released frontend-standard-skills, an open-source collection of installable AI skills for Claude Code, Cursor, and Copilot that enforce accessibility, performance, and consistency rules across React, Next.js, Vue, Angular, Svelte, Nuxt, Astro, and plain HTML/CSS. The tool installs per-stack rule sets that the AI consults automatically, eliminating the need to re-prompt for standards. It is MIT licensed and available via CLI, Claude Code plugin, or manual folder copy.", "body_md": "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`\n\n, 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.\n\nYou 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.\n\n** 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.\n\nPoint it at a project and it installs a strict, opinionated, enforceable rule set covering:\n\n`rem`\n\n/`em`\n\ntext scaling, `prefers-reduced-motion`\n\n, 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`\n\nskill that every stack skill builds on. Install just the one you need, or install all of them.\n\nA 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:\n\n`SKILL.md`\n\n— the entry point, with a description written to actually trigger (not just sit there unused)`references/`\n\n— deep-dive docs on accessibility, performance, component/code standards, and testing & CI, every one with concrete `assets/RULES.md`\n\n— a condensed, self-contained rule file, ready to drop straight into a project\n## InstallFour ways to use it, pick whichever fits your setup:\n\n**CLI (npx / npm / pnpm / yarn)** — works with Cursor, Claude Code, or anything that reads `AGENTS.md`\n\n:\n\n```\nnpx frontend-standard-skills add nextjs\nnpx frontend-standard-skills add react vuejs svelte   # several at once\nnpx frontend-standard-skills add all                  # everything\n```\n\nThis writes `.claude/skills/<stack>/`\n\n(a real Claude Skill), `.cursor/rules/<stack>-frontend-standards.mdc`\n\n, and marked sections in `CLAUDE.md`\n\nand `AGENTS.md`\n\n— re-running it updates those sections in place instead of duplicating them.\n\n**Claude Code plugin marketplace:**\n\n```\n/plugin marketplace add abayomijohn273/frontend_standard_skills\n/plugin install nextjs\n```\n\n**Claude Skills, manually** — they're just folders, so you can `cp -r`\n\nthe one you want straight into `.claude/skills/`\n\nor `~/.claude/skills/`\n\n, no install step at all.\n\n**Global npm install:**\n\n```\nnpm install -g frontend-standard-skills\nfss add nextjs\n```\n\nOnce installed, you just work normally and the AI reads the rules as part of its context:\n\n\"Review\n\n`ProductCard.tsx`\n\nagainst 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.\"\n\n\"Set up Lighthouse CI in our pipeline per our testing standards.\"\n\nNo re-explaining what \"accessible\" or \"fast\" means to you every single time.\n\nIt'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.", "url": "https://wpnews.pro/news/frontend-standards-into-an-installable-ai-skill-for-react-next-js-vue-angular", "canonical_source": "https://dev.to/abayomijohn273/frontend-standards-into-an-installable-ai-skill-for-react-nextjs-vue-angular-svelte-nuxt-17md", "published_at": "2026-07-17 19:32:12+00:00", "updated_at": "2026-07-17 20:00:24.868605+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "ai-tools"], "entities": ["Claude Code", "Cursor", "Copilot", "React", "Next.js", "Vue", "Angular", "Svelte"], "alternates": {"html": "https://wpnews.pro/news/frontend-standards-into-an-installable-ai-skill-for-react-next-js-vue-angular", "markdown": "https://wpnews.pro/news/frontend-standards-into-an-installable-ai-skill-for-react-next-js-vue-angular.md", "text": "https://wpnews.pro/news/frontend-standards-into-an-installable-ai-skill-for-react-next-js-vue-angular.txt", "jsonld": "https://wpnews.pro/news/frontend-standards-into-an-installable-ai-skill-for-react-next-js-vue-angular.jsonld"}}