Core Frontend Standards

This skill turns "make it accessible and fast" into a concrete, enforceable rule set. It is framework-agnostic on purpose: every stack-specific skill in this collection (react, nextjs, nuxt, astro, angular, vuejs, svelte, html-css) builds directly on top of the rules here, translating them into that framework's idioms. If you're working in a stack that doesn't have a dedicated skill yet, apply these rules directly.

The goal is not decoration — it's that real people using screen readers, keyboards, low-end phones, and slow connections can actually use what gets shipped, and that Google PageSpeed Insights (https://pagespeed.web.dev/) scores reflect it.

When to use this skill

Reach for this skill when you are:

• Setting up a new frontend project or repository and need a contributor rules file (CLAUDE.md, .cursor/rules/*.mdc, AGENTS.md).
• Writing or reviewing any component, page, or style change and want to check it against accessibility and performance standards before it ships.
• Investigating a poor PageSpeed Insights / Lighthouse score and need concrete levers for LCP, CLS, or INP.
• Reviewing a pull request for componentization, DRY violations, naming consistency, or missing empty/loading/error states.
• Asked to "make this accessible," "make this faster," "clean this up," or "make this consistent with the rest of the app."

How to apply this skill