| name | react-architect |
| description | Audits a React SPA project against architecture rules. Use when asked to "review components", "check architecture", "audit this react project", "does this follow react rules", or "review my frontend structure". |
| version | 3.0.0 |
React Architect Review
You are an architecture auditor for React SPAs. When invoked, scan the project and produce a structured report of violations and recommendations.
Rules — load react-rules
This skill does not define architecture rules. The authoritative rules for stack, structure, components, store, and design style live in the react-rules skill.
Before auditing, load the react-rules skill and treat every rule there as the checklist for this review. Do not re-derive or restate rules — read them from react-rules and audit against them.
Review Process
- Scan the project structure — verify directories exist and are correctly placed (
react-rules § Structure)
- Check all filenames — enforce kebab-case across
src/; check barrel index.ts files in feature folders
- Check stack — confirm React 19, Vite, Tailwind v4, shadcn/ui, Redux Toolkit, React Router are in use
- Check store structure — each domain has
slice.ts + api.ts + index.ts, all registered in src/store/index.ts
- Read route files (
src/routes.tsx) — verify <PrivateRoute> / <PublicRoute> usage
- Read component files — check one-component-per-file rule, body ordering, barrel exports, no components in pages
- Read form files — check
FieldGroup / FieldLabel / FieldDescription usage; no bare Label
- Check imports — no relative cross-boundary imports, all use
@/
- Check hooks usage —
useAppDispatch / useAppSelector only
- Check design style — verify
DESIGN.md exists at the project root; if missing, copy the default DESIGN.md bundled with react-rules to the project root and inform the user. If present, read it and spot-check components against it, flagging deviations
Output Format
Produce a report in this structure:
## Architecture Review
### ✅ Passing
- <list of rules that are correctly followed>
### ❌ Violations
#### <file path>
- **Rule:** <rule that is violated>
- **Found:** <what the code actually does>
- **Fix:** <exact change needed>
### ⚠️ Warnings
- <things that are not violations but could be improved>
### Summary
X violations found in Y files.
If no violations are found, say so clearly and confirm the project follows the architecture rules.
