[Teardown] Chemical-X-Protocol/starter-kit : MHI 65/100 [Grade: D]

[xopherdeep]

Architecture Audit Report: Chemical-X-Protocol/starter-kit

• Audited by: @xopherdeep
• Repository: https://github.com/Chemical-X-Protocol/starter-kit
• Molecular Health Index: 65 / 100 (Grade: D - High Context Hazard)
• Source Files Analyzed: 13 files (3663 total LOC)
• Token Reduction Potential: 30% (Estimated 35,357 tokens)

---

1. 7-Pillar Architectural Matrix

Pillar	Status	Hazards
Line Budgets & Monolith Decomposition	WARN	3
Control Flow & Boolean Logic	FAILED	1
Reactivity & Composable Contracts	PASSED	0
Type Architecture & Data Integrity	PASSED	0
Design System & Styling Hygiene	WARN	12
Timers & Macro-Task Discipline	PASSED	0
Global Hygiene & Typography	PASSED	0

---

2. Refactoring Hotspots

Priority	File Path	LOC	Violations	Monolith Tier
#1	blueprints/molecule-capsule/m-sample-card.tsx	42	9	Compliant
#2	blueprints/view-template.tsx	21	4	Compliant
#3	cli/index.js	1070	1	SEVERE (>= 1,000 LOC)
#4	cli/audit/reporter.js	831	1	WARNING (> 500 LOC)
#5	cli/audit/rules.js	554	1	WARNING (> 500 LOC)

---

Seeking Refactoring Feedback

Looking for recommendations on breaking down the flagged hotspots into crystalline molecule capsules (< 100 LOC). Any advice is welcome!

---

🤖 Copy-Paste AI Agent Refactoring Prompt (Click to expand & copy into Cursor / Windsurf / Claude)

Act as a Principal Systems Architect. Execute a phased architectural refactoring of our codebase according to Chemical X Molecular Architecture Standards.

Act as a Principal Systems Architect. Surgically refactor the following Grade F Critical Context Hazards in our codebase according to Chemical X Molecular Architecture Standards:

### CRITICAL AST VIOLATIONS
1. `blueprints/molecule-capsule/m-sample-card.tsx:12:21` [CONTROL_FLOW_NESTED_TERNARY]
   Hazard: Nested ternary operator detected
   Directive: Extract display states into computed descriptor objects or early returns

### STRICT EXECUTION RULES:
1. Every new molecule component must stay under 100 lines.
2. Top-level page views must be 10-20 line declarative Table-of-Contents templates assembling components via named slots.
3. Zero synthetic or mock data: return live data or explicit empty states.
4. Zero render-hack setTimeout: replace with await nextTick() or flush: post.
5. Output surgical diffs or modular replacements. Preserve existing external exports.

---

Act as a Principal Systems Architect. Refactor the following Grade D High-Severity Architectural Debts according to Chemical X Molecular Architecture Standards:

### SEVERE MONOLITHS (1,000 - 1,999 LOC)
1. File: `cli/index.js` (1070 lines)
   Action: Extract sub-features into isolated molecule capsules (< 100 LOC) and domain composables.

### HIGH SEVERITY VIOLATIONS
1. `cli/index.js:1:1` [LINE_BUDGET_FILE]
   Hazard: Severe monolith hazard (1070 >= 1,000 lines)
   Directive: Decompose file into domain capsules and molecules to prevent context degradation

### STRICT EXECUTION RULES:
1. Hook Saturation: Extract component hooks into dedicated domain composables adhering to the 3-5 property return limit (State + Status + Actions).
2. Complex Control Flow: Break multi-clause conditionals into 2-stage atomic boolean variables with early-return guard clauses.
3. Zero breaking changes to caller APIs or existing props.

---

Act as a Senior Frontend Engineer. Refactor the following Grade C Medium-Severity Technical Debts according to Chemical X Molecular Architecture Standards:

### WARNING MONOLITHS (500 - 999 LOC)
1. File: `cli/audit/reporter.js` (831 lines)
   Action: Bring file under 500 line budget by extracting helper functions, types, and child molecules.
2. File: `cli/audit/rules.js` (554 lines)
   Action: Bring file under 500 line budget by extracting helper functions, types, and child molecules.

### MEDIUM SEVERITY VIOLATIONS
1. `blueprints/molecule-capsule/m-sample-card.tsx:15:9` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
2. `blueprints/molecule-capsule/m-sample-card.tsx:16:11` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
3. `blueprints/molecule-capsule/m-sample-card.tsx:18:14` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
4. `blueprints/molecule-capsule/m-sample-card.tsx:19:26` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
5. `blueprints/molecule-capsule/m-sample-card.tsx:21:14` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
6. `blueprints/molecule-capsule/m-sample-card.tsx:25:11` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
7. `blueprints/molecule-capsule/m-sample-card.tsx:26:13` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
8. `blueprints/molecule-capsule/m-sample-card.tsx:32:12` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
9. `blueprints/view-template.tsx:10:10` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
10. `blueprints/view-template.tsx:11:14` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
11. `blueprints/view-template.tsx:12:12` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
12. `blueprints/view-template.tsx:14:11` [RAW_INLINE_STYLE]
   Hazard: Raw inline style attribute detected in JSX
   Directive: Use atom props, SCSS mixins, or CSS custom properties instead of inline styles
13. `cli/audit/reporter.js:1:1` [LINE_BUDGET_FILE]
   Hazard: Monolith line budget warning (831 > 500 lines)
   Directive: Plan decomposition into focused modules before file grows further
14. `cli/audit/rules.js:1:1` [LINE_BUDGET_FILE]
   Hazard: Monolith line budget warning (554 > 500 lines)
   Directive: Plan decomposition into focused modules before file grows further

### STRICT EXECUTION RULES:
1. Zero raw inline styles: Replace style={{...}} with atom props, SCSS mixins (@include glass), or scoped BEM classes.
2. Extract anonymous inline callbacks into named functions before passing as props.
3. Co-locate granular types (*.d.ts) inside feature capsules (< 100 LOC). Avoid type monoliths.

Audited using Chemical X Protocol Starter Kit.

[xopherdeep]

So meta. Using my audit tool that i built with AI W/O Chemical X to demonstrate where the problems are.

Now to showcase the prompt it generated to show the before and after of the audit tool in action!