react-architect

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

1. Scan the project structure — verify directories exist and are correctly placed (react-rules § Structure)
2. Check all filenames — enforce kebab-case across src/; check barrel index.ts files in feature folders
3. Check stack — confirm React 19, Vite, Tailwind v4, shadcn/ui, Redux Toolkit, React Router are in use
4. Check store structure — each domain has slice.ts + api.ts + index.ts, all registered in src/store/index.ts
5. Read route files (src/routes.tsx) — verify <PrivateRoute> / <PublicRoute> usage
6. Read component files — check one-component-per-file rule, body ordering, barrel exports, no components in pages
7. Read form files — check FieldGroup / FieldLabel / FieldDescription usage; no bare Label
8. Check imports — no relative cross-boundary imports, all use @/
9. Check hooks usage — useAppDispatch / useAppSelector only
10. 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.