Agent skill
react-architecture-enforcer
Use when fixing bugs, something broken, not working, or doesn't work in React - also when adding features, request says "quick fix", "keep it simple", or "follow existing pattern"
Stars
0
Forks
0
Install this agent skill to your Project
npx add-skill https://github.com/DrSatsuma1/catherine-claude-skills/tree/main/react-architecture-enforcer
SKILL.md
React Architecture Enforcer
Triggers
Phrases: "broken", "not working", "fix", "quick", "simple", "just add", "follow pattern", "match current"
Context: Modifying React components, adding features/fixes, file >200 lines, adding hooks
The Five Laws
| Law | Rule | On Violation |
|---|---|---|
| A. No Logic in UI | Components contain NO: prerequisites, credits, progression, scheduling, eligibility | Extract to /domain, /services, /config |
| B. No Mutating Singletons | Engines = pure functions or stateless services | Refactor to pure functions |
| C. No File >300 Lines | Check wc -l before ANY edit |
Extract before implementing |
| D. No Duplicated Logic | Credits, prerequisites, eligibility = ONE canonical source | Find existing first |
| E. No Unexamined Effects | New useEffect requires: justification, dependency audit, store alternative check | Document or reject |
Pre-Flight (MANDATORY)
- Check size:
wc -l <file>— >300 lines = HALT - Check pressure words:
quick,simple,temporary,minimal,follow existing→ require extraction plan FIRST - Check logic type: credits | pathways | prerequisites | GPA | eligibility | scheduling → search existing first
Rationalization Overrides
| Pattern | Response |
|---|---|
| "Pattern exists / follow existing" | Existing violations don't justify new ones. Extract. |
| "It's small / quick / simple" | Size doesn't exempt from laws. Extract. |
| "We'll refactor later" | Requires ticket + sprint + owner. Vague = rejected. |
| "Emergency / production down" | Still output extraction plan (30 sec). Then proceed. |
| "File is already large" | Size IS the problem. No additions without extraction. |
Extraction Reference
| Logic Type | Extract To |
|---|---|
| Validation | domain/validators/<name>.js |
| Calculations | domain/<name>Calculator.js |
| Config/Requirements | config/<name>.config.js |
| Multiple useState (>3) | hooks/use<Name>.js or useReducer |
| Data fetching | services/<name>Service.js |
| Scheduling/eligibility | domain/<Name>Engine.js |
Escalation
- "This violates Law [X]. Extraction required."
- If user insists → offer minimal extraction path
- If user overrides → tag code:
// TECH-DEBT: Law X violation [date]
Exempt
Comments, formatting, temporary debug logs (removed before commit)
Didn't find tool you were looking for?