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)
1---2name: react-architecture-enforcer3description: 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"4---5
6# React Architecture Enforcer
7
8## Triggers
9
10**Phrases:** "broken", "not working", "fix", "quick", "simple", "just add", "follow pattern", "match current"
11
12**Context:** Modifying React components, adding features/fixes, file >200 lines, adding hooks
13
14## The Five Laws
15
16| Law | Rule | On Violation |
17|-----|------|--------------|
18| **A. No Logic in UI** | Components contain NO: prerequisites, credits, progression, scheduling, eligibility | Extract to `/domain`, `/services`, `/config` |
19| **B. No Mutating Singletons** | Engines = pure functions or stateless services | Refactor to pure functions |
20| **C. No File >300 Lines** | Check `wc -l` before ANY edit | Extract before implementing |
21| **D. No Duplicated Logic** | Credits, prerequisites, eligibility = ONE canonical source | Find existing first |
22| **E. No Unexamined Effects** | New useEffect requires: justification, dependency audit, store alternative check | Document or reject |
23
24## Pre-Flight (MANDATORY)
25
261. **Check size:** `wc -l <file>` — >300 lines = HALT
272. **Check pressure words:** `quick`, `simple`, `temporary`, `minimal`, `follow existing` → require extraction plan FIRST
283. **Check logic type:** credits | pathways | prerequisites | GPA | eligibility | scheduling → search existing first
29
30## Rationalization Overrides
31
32| Pattern | Response |
33|---------|----------|
34| "Pattern exists / follow existing" | Existing violations don't justify new ones. Extract. |
35| "It's small / quick / simple" | Size doesn't exempt from laws. Extract. |
36| "We'll refactor later" | Requires ticket + sprint + owner. Vague = rejected. |
37| "Emergency / production down" | Still output extraction plan (30 sec). Then proceed. |
38| "File is already large" | Size IS the problem. No additions without extraction. |
39
40## Extraction Reference
41
42| Logic Type | Extract To |
43|------------|-----------|
44| Validation | `domain/validators/<name>.js` |
45| Calculations | `domain/<name>Calculator.js` |
46| Config/Requirements | `config/<name>.config.js` |
47| Multiple useState (>3) | `hooks/use<Name>.js` or useReducer |
48| Data fetching | `services/<name>Service.js` |
49| Scheduling/eligibility | `domain/<Name>Engine.js` |
50
51## Escalation
52
531. "This violates Law [X]. Extraction required."
542. If user insists → offer minimal extraction path
553. If user overrides → tag code: `// TECH-DEBT: Law X violation [date]`
56
57## Exempt
58
59Comments, formatting, temporary debug logs (removed before commit)
majiayu000