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"
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)
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
multi-ai-orchestration
Use when stuck on complex problems, need architecture validation, want code review from multiple perspectives, or debugging hits a wall - guides leveraging multiple AI models in parallel for better results
anchor-based-context-recovery
Use when starting work after context compaction, switching features, or gathering context without re-reading entire files - searches anchor tags to find relevant architecture/pattern documentation
us-tax-code
Complete US Internal Revenue Code (Title 26) with 2,160 sections covering individual income tax, business deductions, corporate tax, partnerships, international tax, capital gains, and all federal tax provisions. Search by section number or topic.
obsidian-vault
Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.
edit-article
Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.
handoff
Compact the current conversation into a handoff document for another agent to pick up.
Didn't find tool you were looking for?