React Architecture Rules

This skill is the definitive source for React architecture rules. Any agent (architect, dev, or otherwise) should load this skill for authoritative rules on components, store, structure, and design style.

1. Stack

Expected stack: React 19 + Vite + TypeScript + Tailwind CSS v4 + shadcn/ui + Redux Toolkit + React Router

• pnpm (package management)
• No legacy class components — function components only
• Tailwind v4 syntax used (no tailwind.config.js color overrides — use CSS variables)
• shadcn/ui primitives used for UI — not custom-rolled replacements

Key conventions:

• Path alias @ → src/ — all imports use @/ paths
• All filenames use kebab-case — no exceptions: my-component.tsx, login-form.tsx
• Missing shadcn primitive → pnpm dlx shadcn@latest add <component> (installs into src/components/ui/)