React Frontend Standards

For plain React projects — Vite, Create React App, or any setup without a meta-framework (see the nextjs skill instead if the project uses Next.js). Extends the framework-agnostic rules in the core-standards skill with React-specific APIs, hook conventions, and tooling. Because there's no framework layer doing image optimization, routing, or SSR for you, several concerns that Next.js handles automatically (image loading, code-splitting, font loading) are the app's own responsibility here — this skill is explicit about how to do them by hand.

When to use this skill

• Setting up or reviewing contributor rules for a new or existing React (Vite/CRA) project.
• Writing or reviewing components, custom hooks, or state-management code.
• Deciding whether a useMemo/useCallback/React.memo is earning its keep, or is just noise.
• Investigating unnecessary re-renders or a slow interaction with React DevTools Profiler.
• Investigating a React app's Lighthouse/PageSpeed score.
• Choosing between local state, lifted state, Context, or an external store (Zustand/Redux).
• Generating a CLAUDE.md/.cursor/rules/AGENTS.md for a React codebase.

Quick reference