@eltonssouza/development-utility-kit 0.16.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/.claude/CONTEXT.template.md +44 -0
  2. package/.claude/agents/analyst.md +19 -7
  3. package/.claude/agents/code-reviewer.md +5 -0
  4. package/.claude/agents/stack-resolver.md +8 -3
  5. package/.claude/hooks/flow-state.js +30 -0
  6. package/.claude/skills/stack-discovery/SKILL.md +7 -0
  7. package/.claude/skills/to-issues/SKILL.md +10 -6
  8. package/CLAUDE.md +13 -0
  9. package/README.repo.md +1 -1
  10. package/bin/lib/lint.js +1 -16
  11. package/package.json +1 -1
  12. package/.claude/skills/_vendor/NOTICE.md +0 -11
  13. package/.claude/skills/_vendor/mattpocock-LICENSE +0 -21
  14. package/.claude/skills/_vendor/vendored.json +0 -15
  15. package/.claude/skills/diagnose/SKILL.md +0 -117
  16. package/.claude/skills/diagnose/scripts/hitl-loop.template.sh +0 -41
  17. package/.claude/skills/grill-with-docs/ADR-FORMAT.md +0 -47
  18. package/.claude/skills/grill-with-docs/CONTEXT-FORMAT.md +0 -60
  19. package/.claude/skills/grill-with-docs/SKILL.md +0 -88
  20. package/.claude/skills/improve-codebase-architecture/DEEPENING.md +0 -37
  21. package/.claude/skills/improve-codebase-architecture/HTML-REPORT.md +0 -123
  22. package/.claude/skills/improve-codebase-architecture/INTERFACE-DESIGN.md +0 -44
  23. package/.claude/skills/improve-codebase-architecture/LANGUAGE.md +0 -53
  24. package/.claude/skills/improve-codebase-architecture/SKILL.md +0 -81
  25. package/.claude/skills/prototype/LOGIC.md +0 -79
  26. package/.claude/skills/prototype/SKILL.md +0 -30
  27. package/.claude/skills/prototype/UI.md +0 -112
  28. package/.claude/skills/setup-matt-pocock-skills/SKILL.md +0 -121
  29. package/.claude/skills/setup-matt-pocock-skills/domain.md +0 -51
  30. package/.claude/skills/setup-matt-pocock-skills/issue-tracker-github.md +0 -22
  31. package/.claude/skills/setup-matt-pocock-skills/issue-tracker-gitlab.md +0 -23
  32. package/.claude/skills/setup-matt-pocock-skills/issue-tracker-local.md +0 -19
  33. package/.claude/skills/setup-matt-pocock-skills/triage-labels.md +0 -15
  34. package/.claude/skills/tdd/SKILL.md +0 -109
  35. package/.claude/skills/tdd/deep-modules.md +0 -33
  36. package/.claude/skills/tdd/interface-design.md +0 -31
  37. package/.claude/skills/tdd/mocking.md +0 -59
  38. package/.claude/skills/tdd/refactoring.md +0 -10
  39. package/.claude/skills/tdd/tests.md +0 -61
  40. package/.claude/skills/triage/AGENT-BRIEF.md +0 -168
  41. package/.claude/skills/triage/OUT-OF-SCOPE.md +0 -101
  42. package/.claude/skills/triage/SKILL.md +0 -103
  43. package/.claude/skills/zoom-out/SKILL.md +0 -7
@@ -1,88 +0,0 @@
1
- ---
2
- name: grill-with-docs
3
- description: Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan against their project's language and documented decisions.
4
- ---
5
-
6
- <what-to-do>
7
-
8
- Interview me relentlessly about every aspect of this plan until we reach a shared understanding. Walk down each branch of the design tree, resolving dependencies between decisions one-by-one. For each question, provide your recommended answer.
9
-
10
- Ask the questions one at a time, waiting for feedback on each question before continuing.
11
-
12
- If a question can be answered by exploring the codebase, explore the codebase instead.
13
-
14
- </what-to-do>
15
-
16
- <supporting-info>
17
-
18
- ## Domain awareness
19
-
20
- During codebase exploration, also look for existing documentation:
21
-
22
- ### File structure
23
-
24
- Most repos have a single context:
25
-
26
- ```
27
- /
28
- ├── CONTEXT.md
29
- ├── docs/
30
- │ └── adr/
31
- │ ├── 0001-event-sourced-orders.md
32
- │ └── 0002-postgres-for-write-model.md
33
- └── src/
34
- ```
35
-
36
- If a `CONTEXT-MAP.md` exists at the root, the repo has multiple contexts. The map points to where each one lives:
37
-
38
- ```
39
- /
40
- ├── CONTEXT-MAP.md
41
- ├── docs/
42
- │ └── adr/ ← system-wide decisions
43
- ├── src/
44
- │ ├── ordering/
45
- │ │ ├── CONTEXT.md
46
- │ │ └── docs/adr/ ← context-specific decisions
47
- │ └── billing/
48
- │ ├── CONTEXT.md
49
- │ └── docs/adr/
50
- ```
51
-
52
- Create files lazily — only when you have something to write. If no `CONTEXT.md` exists, create one when the first term is resolved. If no `docs/adr/` exists, create it when the first ADR is needed.
53
-
54
- ## During the session
55
-
56
- ### Challenge against the glossary
57
-
58
- When the user uses a term that conflicts with the existing language in `CONTEXT.md`, call it out immediately. "Your glossary defines 'cancellation' as X, but you seem to mean Y — which is it?"
59
-
60
- ### Sharpen fuzzy language
61
-
62
- When the user uses vague or overloaded terms, propose a precise canonical term. "You're saying 'account' — do you mean the Customer or the User? Those are different things."
63
-
64
- ### Discuss concrete scenarios
65
-
66
- When domain relationships are being discussed, stress-test them with specific scenarios. Invent scenarios that probe edge cases and force the user to be precise about the boundaries between concepts.
67
-
68
- ### Cross-reference with code
69
-
70
- When the user states how something works, check whether the code agrees. If you find a contradiction, surface it: "Your code cancels entire Orders, but you just said partial cancellation is possible — which is right?"
71
-
72
- ### Update CONTEXT.md inline
73
-
74
- When a term is resolved, update `CONTEXT.md` right there. Don't batch these up — capture them as they happen. Use the format in [CONTEXT-FORMAT.md](./CONTEXT-FORMAT.md).
75
-
76
- `CONTEXT.md` should be totally devoid of implementation details. Do not treat `CONTEXT.md` as a spec, a scratch pad, or a repository for implementation decisions. It is a glossary and nothing else.
77
-
78
- ### Offer ADRs sparingly
79
-
80
- Only offer to create an ADR when all three are true:
81
-
82
- 1. **Hard to reverse** — the cost of changing your mind later is meaningful
83
- 2. **Surprising without context** — a future reader will wonder "why did they do it this way?"
84
- 3. **The result of a real trade-off** — there were genuine alternatives and you picked one for specific reasons
85
-
86
- If any of the three is missing, skip the ADR. Use the format in [ADR-FORMAT.md](./ADR-FORMAT.md).
87
-
88
- </supporting-info>
@@ -1,37 +0,0 @@
1
- # Deepening
2
-
3
- How to deepen a cluster of shallow modules safely, given its dependencies. Assumes the vocabulary in [LANGUAGE.md](LANGUAGE.md) — **module**, **interface**, **seam**, **adapter**.
4
-
5
- ## Dependency categories
6
-
7
- When assessing a candidate for deepening, classify its dependencies. The category determines how the deepened module is tested across its seam.
8
-
9
- ### 1. In-process
10
-
11
- Pure computation, in-memory state, no I/O. Always deepenable — merge the modules and test through the new interface directly. No adapter needed.
12
-
13
- ### 2. Local-substitutable
14
-
15
- Dependencies that have local test stand-ins (PGLite for Postgres, in-memory filesystem). Deepenable if the stand-in exists. The deepened module is tested with the stand-in running in the test suite. The seam is internal; no port at the module's external interface.
16
-
17
- ### 3. Remote but owned (Ports & Adapters)
18
-
19
- Your own services across a network boundary (microservices, internal APIs). Define a **port** (interface) at the seam. The deep module owns the logic; the transport is injected as an **adapter**. Tests use an in-memory adapter. Production uses an HTTP/gRPC/queue adapter.
20
-
21
- Recommendation shape: *"Define a port at the seam, implement an HTTP adapter for production and an in-memory adapter for testing, so the logic sits in one deep module even though it's deployed across a network."*
22
-
23
- ### 4. True external (Mock)
24
-
25
- Third-party services (Stripe, Twilio, etc.) you don't control. The deepened module takes the external dependency as an injected port; tests provide a mock adapter.
26
-
27
- ## Seam discipline
28
-
29
- - **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a port unless at least two adapters are justified (typically production + test). A single-adapter seam is just indirection.
30
- - **Internal seams vs external seams.** A deep module can have internal seams (private to its implementation, used by its own tests) as well as the external seam at its interface. Don't expose internal seams through the interface just because tests use them.
31
-
32
- ## Testing strategy: replace, don't layer
33
-
34
- - Old unit tests on shallow modules become waste once tests at the deepened module's interface exist — delete them.
35
- - Write new tests at the deepened module's interface. The **interface is the test surface**.
36
- - Tests assert on observable outcomes through the interface, not internal state.
37
- - Tests should survive internal refactors — they describe behaviour, not implementation. If a test has to change when the implementation changes, it's testing past the interface.
@@ -1,123 +0,0 @@
1
- # HTML Report Format
2
-
3
- The architectural review is rendered as a single self-contained HTML file in the OS temp directory. Tailwind and Mermaid both come from CDNs. Mermaid handles graph-shaped diagrams reliably; hand-built divs and inline SVG handle the more editorial visuals (mass diagrams, cross-sections). Mix the two — don't lean on Mermaid for everything, it'll start to look generic.
4
-
5
- ## Scaffold
6
-
7
- ```html
8
- <!doctype html>
9
- <html lang="en">
10
- <head>
11
- <meta charset="utf-8" />
12
- <title>Architecture review — {{repo name}}</title>
13
- <script src="https://cdn.tailwindcss.com"></script>
14
- <script type="module">
15
- import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
16
- mermaid.initialize({ startOnLoad: true, theme: "neutral", securityLevel: "loose" });
17
- </script>
18
- <style>
19
- /* small custom layer for things Tailwind doesn't cover cleanly:
20
- dashed seam lines, hand-drawn-feeling arrow heads, etc. */
21
- .seam { stroke-dasharray: 4 4; }
22
- .leak { stroke: #dc2626; }
23
- .deep { background: linear-gradient(135deg, #0f172a, #1e293b); }
24
- </style>
25
- </head>
26
- <body class="bg-stone-50 text-slate-900 font-sans">
27
- <main class="max-w-5xl mx-auto px-6 py-12 space-y-12">
28
- <header>...</header>
29
- <section id="candidates" class="space-y-10">...</section>
30
- <section id="top-recommendation">...</section>
31
- </main>
32
- </body>
33
- </html>
34
- ```
35
-
36
- ## Header
37
-
38
- Repo name, date, and a compact legend: solid box = module, dashed line = seam, red arrow = leakage, thick dark box = deep module. No introduction paragraph — straight into the candidates.
39
-
40
- ## Candidate card
41
-
42
- The diagrams carry the weight. Prose is sparse, plain, and uses the glossary terms ([LANGUAGE.md](LANGUAGE.md)) without ceremony.
43
-
44
- Each candidate is one `<article>`:
45
-
46
- - **Title** — short, names the deepening (e.g. "Collapse the Order intake pipeline").
47
- - **Badge row** — recommendation strength (`Strong` = emerald, `Worth exploring` = amber, `Speculative` = slate), plus a tag for the dependency category (`in-process`, `local-substitutable`, `ports & adapters`, `mock`).
48
- - **Files** — monospaced list, `font-mono text-sm`.
49
- - **Before / After diagram** — the centrepiece. Two columns, side by side. See patterns below.
50
- - **Problem** — one sentence. What hurts.
51
- - **Solution** — one sentence. What changes.
52
- - **Wins** — bullets, ≤6 words each. e.g. "Tests hit one interface", "Pricing logic stops leaking", "Delete 4 shallow wrappers".
53
- - **ADR callout** (if applicable) — one line in an amber-tinted box.
54
-
55
- No paragraphs of explanation. If the diagram needs a paragraph to be understood, redraw the diagram.
56
-
57
- ## Diagram patterns
58
-
59
- Pick the pattern that fits the candidate. Mix them. Don't make every diagram look the same — variety is part of the point.
60
-
61
- ### Mermaid graph (the workhorse for dependencies / call flow)
62
-
63
- Use a Mermaid `flowchart` or `graph` when the point is "X calls Y calls Z, and look at the mess." Wrap it in a Tailwind-styled card so it doesn't feel parachuted in. Style with classDef to colour leakage edges red and the deep module dark. Sequence diagrams work well for "before: 6 round-trips; after: 1."
64
-
65
- ```html
66
- <div class="rounded-lg border border-slate-200 bg-white p-4">
67
- <pre class="mermaid">
68
- flowchart LR
69
- A[OrderHandler] --> B[OrderValidator]
70
- B --> C[OrderRepo]
71
- C -.leak.-> D[PricingClient]
72
- classDef leak stroke:#dc2626,stroke-width:2px;
73
- class C,D leak
74
- </pre>
75
- </div>
76
- ```
77
-
78
- ### Hand-built boxes-and-arrows (when Mermaid's layout fights you)
79
-
80
- Modules as `<div>`s with borders and labels. Arrows as inline SVG `<line>` or `<path>` elements positioned absolutely over a relative container. Reach for this when you want the "after" diagram to feel like one thick-bordered deep module with greyed-out internals — Mermaid won't render that with the right weight.
81
-
82
- ### Cross-section (good for layered shallowness)
83
-
84
- Stack horizontal bands (`h-12 border-l-4`) to show layers a call passes through. Before: 6 thin layers each doing nothing. After: 1 thick band labelled with the consolidated responsibility.
85
-
86
- ### Mass diagram (good for "interface as wide as implementation")
87
-
88
- Two rectangles per module — one for interface surface area, one for implementation. Before: interface rectangle is nearly as tall as the implementation rectangle (shallow). After: interface rectangle is short, implementation rectangle is tall (deep).
89
-
90
- ### Call-graph collapse
91
-
92
- Before: a tree of function calls rendered as nested boxes. After: the same tree collapsed into one box, with the now-internal calls shown faded inside it.
93
-
94
- ## Style guidance
95
-
96
- - Lean editorial, not corporate-dashboard. Generous whitespace. Serif optional for headings (`font-serif` works well with stone/slate).
97
- - Colour sparingly: one accent (emerald or indigo) plus red for leakage and amber for warnings.
98
- - Keep diagrams ~320px tall so before/after sits comfortably side by side without scrolling.
99
- - Use `text-xs uppercase tracking-wider` for module labels inside diagrams — they should read as schematic, not as UI.
100
- - The only scripts are the Tailwind CDN and the Mermaid ESM import. The report is otherwise static — no app code, no interactivity beyond Mermaid's own rendering.
101
-
102
- ## Top recommendation section
103
-
104
- One larger card. Candidate name, one sentence on why, anchor link to its card. That's it.
105
-
106
- ## Tone
107
-
108
- Plain English, concise — but the architectural nouns and verbs come straight from [LANGUAGE.md](LANGUAGE.md). Concision is not an excuse to drift.
109
-
110
- **Use exactly:** module, interface, implementation, depth, deep, shallow, seam, adapter, leverage, locality.
111
-
112
- **Never substitute:** component, service, unit (for module) · API, signature (for interface) · boundary (for seam) · layer, wrapper (for module, when you mean module).
113
-
114
- **Phrasings that fit the style:**
115
-
116
- - "Order intake module is shallow — interface nearly matches the implementation."
117
- - "Pricing leaks across the seam."
118
- - "Deepen: one interface, one place to test."
119
- - "Two adapters justify the seam: HTTP in prod, in-memory in tests."
120
-
121
- **Wins bullets** name the gain in glossary terms: *"locality: bugs concentrate in one module"*, *"leverage: one interface, N call sites"*, *"interface shrinks; implementation absorbs the wrappers"*. Don't write *"easier to maintain"* or *"cleaner code"* — those terms aren't in the glossary and don't earn their place.
122
-
123
- No hedging, no throat-clearing, no "it's worth noting that…". If a sentence could be a bullet, make it a bullet. If a bullet could be cut, cut it. If a term isn't in [LANGUAGE.md](LANGUAGE.md), reach for one that is before inventing a new one.
@@ -1,44 +0,0 @@
1
- # Interface Design
2
-
3
- When the user wants to explore alternative interfaces for a chosen deepening candidate, use this parallel sub-agent pattern. Based on "Design It Twice" (Ousterhout) — your first idea is unlikely to be the best.
4
-
5
- Uses the vocabulary in [LANGUAGE.md](LANGUAGE.md) — **module**, **interface**, **seam**, **adapter**, **leverage**.
6
-
7
- ## Process
8
-
9
- ### 1. Frame the problem space
10
-
11
- Before spawning sub-agents, write a user-facing explanation of the problem space for the chosen candidate:
12
-
13
- - The constraints any new interface would need to satisfy
14
- - The dependencies it would rely on, and which category they fall into (see [DEEPENING.md](DEEPENING.md))
15
- - A rough illustrative code sketch to ground the constraints — not a proposal, just a way to make the constraints concrete
16
-
17
- Show this to the user, then immediately proceed to Step 2. The user reads and thinks while the sub-agents work in parallel.
18
-
19
- ### 2. Spawn sub-agents
20
-
21
- Spawn 3+ sub-agents in parallel using the Agent tool. Each must produce a **radically different** interface for the deepened module.
22
-
23
- Prompt each sub-agent with a separate technical brief (file paths, coupling details, dependency category from [DEEPENING.md](DEEPENING.md), what sits behind the seam). The brief is independent of the user-facing problem-space explanation in Step 1. Give each agent a different design constraint:
24
-
25
- - Agent 1: "Minimize the interface — aim for 1–3 entry points max. Maximise leverage per entry point."
26
- - Agent 2: "Maximise flexibility — support many use cases and extension."
27
- - Agent 3: "Optimise for the most common caller — make the default case trivial."
28
- - Agent 4 (if applicable): "Design around ports & adapters for cross-seam dependencies."
29
-
30
- Include both [LANGUAGE.md](LANGUAGE.md) vocabulary and CONTEXT.md vocabulary in the brief so each sub-agent names things consistently with the architecture language and the project's domain language.
31
-
32
- Each sub-agent outputs:
33
-
34
- 1. Interface (types, methods, params — plus invariants, ordering, error modes)
35
- 2. Usage example showing how callers use it
36
- 3. What the implementation hides behind the seam
37
- 4. Dependency strategy and adapters (see [DEEPENING.md](DEEPENING.md))
38
- 5. Trade-offs — where leverage is high, where it's thin
39
-
40
- ### 3. Present and compare
41
-
42
- Present designs sequentially so the user can absorb each one, then compare them in prose. Contrast by **depth** (leverage at the interface), **locality** (where change concentrates), and **seam placement**.
43
-
44
- After comparing, give your own recommendation: which design you think is strongest and why. If elements from different designs would combine well, propose a hybrid. Be opinionated — the user wants a strong read, not a menu.
@@ -1,53 +0,0 @@
1
- # Language
2
-
3
- Shared vocabulary for every suggestion this skill makes. Use these terms exactly — don't substitute "component," "service," "API," or "boundary." Consistent language is the whole point.
4
-
5
- ## Terms
6
-
7
- **Module**
8
- Anything with an interface and an implementation. Deliberately scale-agnostic — applies equally to a function, class, package, or tier-spanning slice.
9
- _Avoid_: unit, component, service.
10
-
11
- **Interface**
12
- Everything a caller must know to use the module correctly. Includes the type signature, but also invariants, ordering constraints, error modes, required configuration, and performance characteristics.
13
- _Avoid_: API, signature (too narrow — those refer only to the type-level surface).
14
-
15
- **Implementation**
16
- What's inside a module — its body of code. Distinct from **Adapter**: a thing can be a small adapter with a large implementation (a Postgres repo) or a large adapter with a small implementation (an in-memory fake). Reach for "adapter" when the seam is the topic; "implementation" otherwise.
17
-
18
- **Depth**
19
- Leverage at the interface — the amount of behaviour a caller (or test) can exercise per unit of interface they have to learn. A module is **deep** when a large amount of behaviour sits behind a small interface. A module is **shallow** when the interface is nearly as complex as the implementation.
20
-
21
- **Seam** _(from Michael Feathers)_
22
- A place where you can alter behaviour without editing in that place. The *location* at which a module's interface lives. Choosing where to put the seam is its own design decision, distinct from what goes behind it.
23
- _Avoid_: boundary (overloaded with DDD's bounded context).
24
-
25
- **Adapter**
26
- A concrete thing that satisfies an interface at a seam. Describes *role* (what slot it fills), not substance (what's inside).
27
-
28
- **Leverage**
29
- What callers get from depth. More capability per unit of interface they have to learn. One implementation pays back across N call sites and M tests.
30
-
31
- **Locality**
32
- What maintainers get from depth. Change, bugs, knowledge, and verification concentrate at one place rather than spreading across callers. Fix once, fixed everywhere.
33
-
34
- ## Principles
35
-
36
- - **Depth is a property of the interface, not the implementation.** A deep module can be internally composed of small, mockable, swappable parts — they just aren't part of the interface. A module can have **internal seams** (private to its implementation, used by its own tests) as well as the **external seam** at its interface.
37
- - **The deletion test.** Imagine deleting the module. If complexity vanishes, the module wasn't hiding anything (it was a pass-through). If complexity reappears across N callers, the module was earning its keep.
38
- - **The interface is the test surface.** Callers and tests cross the same seam. If you want to test *past* the interface, the module is probably the wrong shape.
39
- - **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a seam unless something actually varies across it.
40
-
41
- ## Relationships
42
-
43
- - A **Module** has exactly one **Interface** (the surface it presents to callers and tests).
44
- - **Depth** is a property of a **Module**, measured against its **Interface**.
45
- - A **Seam** is where a **Module**'s **Interface** lives.
46
- - An **Adapter** sits at a **Seam** and satisfies the **Interface**.
47
- - **Depth** produces **Leverage** for callers and **Locality** for maintainers.
48
-
49
- ## Rejected framings
50
-
51
- - **Depth as ratio of implementation-lines to interface-lines** (Ousterhout): rewards padding the implementation. We use depth-as-leverage instead.
52
- - **"Interface" as the TypeScript `interface` keyword or a class's public methods**: too narrow — interface here includes every fact a caller must know.
53
- - **"Boundary"**: overloaded with DDD's bounded context. Say **seam** or **interface**.
@@ -1,81 +0,0 @@
1
- ---
2
- name: improve-codebase-architecture
3
- description: Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable.
4
- ---
5
-
6
- # Improve Codebase Architecture
7
-
8
- Surface architectural friction and propose **deepening opportunities** — refactors that turn shallow modules into deep ones. The aim is testability and AI-navigability.
9
-
10
- ## Glossary
11
-
12
- Use these terms exactly in every suggestion. Consistent language is the point — don't drift into "component," "service," "API," or "boundary." Full definitions in [LANGUAGE.md](LANGUAGE.md).
13
-
14
- - **Module** — anything with an interface and an implementation (function, class, package, slice).
15
- - **Interface** — everything a caller must know to use the module: types, invariants, error modes, ordering, config. Not just the type signature.
16
- - **Implementation** — the code inside.
17
- - **Depth** — leverage at the interface: a lot of behaviour behind a small interface. **Deep** = high leverage. **Shallow** = interface nearly as complex as the implementation.
18
- - **Seam** — where an interface lives; a place behaviour can be altered without editing in place. (Use this, not "boundary.")
19
- - **Adapter** — a concrete thing satisfying an interface at a seam.
20
- - **Leverage** — what callers get from depth.
21
- - **Locality** — what maintainers get from depth: change, bugs, knowledge concentrated in one place.
22
-
23
- Key principles (see [LANGUAGE.md](LANGUAGE.md) for the full list):
24
-
25
- - **Deletion test**: imagine deleting the module. If complexity vanishes, it was a pass-through. If complexity reappears across N callers, it was earning its keep.
26
- - **The interface is the test surface.**
27
- - **One adapter = hypothetical seam. Two adapters = real seam.**
28
-
29
- This skill is _informed_ by the project's domain model. The domain language gives names to good seams; ADRs record decisions the skill should not re-litigate.
30
-
31
- ## Process
32
-
33
- ### 1. Explore
34
-
35
- Read the project's domain glossary and any ADRs in the area you're touching first.
36
-
37
- Then use the Agent tool with `subagent_type=Explore` to walk the codebase. Don't follow rigid heuristics — explore organically and note where you experience friction:
38
-
39
- - Where does understanding one concept require bouncing between many small modules?
40
- - Where are modules **shallow** — interface nearly as complex as the implementation?
41
- - Where have pure functions been extracted just for testability, but the real bugs hide in how they're called (no **locality**)?
42
- - Where do tightly-coupled modules leak across their seams?
43
- - Which parts of the codebase are untested, or hard to test through their current interface?
44
-
45
- Apply the **deletion test** to anything you suspect is shallow: would deleting it concentrate complexity, or just move it? A "yes, concentrates" is the signal you want.
46
-
47
- ### 2. Present candidates as an HTML report
48
-
49
- Write a self-contained HTML file to the OS temp directory so nothing lands in the repo. Resolve the temp dir from `$TMPDIR`, falling back to `/tmp` (or `%TEMP%` on Windows), and write to `<tmpdir>/architecture-review-<timestamp>.html` so each run gets a fresh file. Open it for the user — `xdg-open <path>` on Linux, `open <path>` on macOS, `start <path>` on Windows — and tell them the absolute path.
50
-
51
- The report uses **Tailwind via CDN** for layout and styling, and **Mermaid via CDN** for diagrams where a graph/flow/sequence reliably communicates the structure. Mix Mermaid with hand-crafted CSS/SVG visuals — use Mermaid when relationships are graph-shaped (call graphs, dependencies, sequences), and hand-built divs/SVG when you want something more editorial (mass diagrams, cross-sections, collapse animations). Each candidate gets a **before/after visualisation**. Be visual.
52
-
53
- For each candidate, the same template as before, but rendered as a card:
54
-
55
- - **Files** — which files/modules are involved
56
- - **Problem** — why the current architecture is causing friction
57
- - **Solution** — plain English description of what would change
58
- - **Benefits** — explained in terms of locality and leverage, and how tests would improve
59
- - **Before / After diagram** — side-by-side, custom-drawn, illustrating the shallowness and the deepening
60
- - **Recommendation strength** — one of `Strong`, `Worth exploring`, `Speculative`, rendered as a badge
61
-
62
- End the report with a **Top recommendation** section: which candidate you'd tackle first and why.
63
-
64
- **Use CONTEXT.md vocabulary for the domain, and [LANGUAGE.md](LANGUAGE.md) vocabulary for the architecture.** If `CONTEXT.md` defines "Order," talk about "the Order intake module" — not "the FooBarHandler," and not "the Order service."
65
-
66
- **ADR conflicts**: if a candidate contradicts an existing ADR, only surface it when the friction is real enough to warrant revisiting the ADR. Mark it clearly in the card (e.g. a warning callout: _"contradicts ADR-0007 — but worth reopening because…"_). Don't list every theoretical refactor an ADR forbids.
67
-
68
- See [HTML-REPORT.md](HTML-REPORT.md) for the full HTML scaffold, diagram patterns, and styling guidance.
69
-
70
- Do NOT propose interfaces yet. After the file is written, ask the user: "Which of these would you like to explore?"
71
-
72
- ### 3. Grilling loop
73
-
74
- Once the user picks a candidate, drop into a grilling conversation. Walk the design tree with them — constraints, dependencies, the shape of the deepened module, what sits behind the seam, what tests survive.
75
-
76
- Side effects happen inline as decisions crystallize:
77
-
78
- - **Naming a deepened module after a concept not in `CONTEXT.md`?** Add the term to `CONTEXT.md` — same discipline as `/grill-with-docs` (see [CONTEXT-FORMAT.md](../grill-with-docs/CONTEXT-FORMAT.md)). Create the file lazily if it doesn't exist.
79
- - **Sharpening a fuzzy term during the conversation?** Update `CONTEXT.md` right there.
80
- - **User rejects the candidate with a load-bearing reason?** Offer an ADR, framed as: _"Want me to record this as an ADR so future architecture reviews don't re-suggest it?"_ Only offer when the reason would actually be needed by a future explorer to avoid re-suggesting the same thing — skip ephemeral reasons ("not worth it right now") and self-evident ones. See [ADR-FORMAT.md](../grill-with-docs/ADR-FORMAT.md).
81
- - **Want to explore alternative interfaces for the deepened module?** See [INTERFACE-DESIGN.md](INTERFACE-DESIGN.md).
@@ -1,79 +0,0 @@
1
- # Logic Prototype
2
-
3
- A tiny interactive terminal app that lets the user drive a state model by hand. Use this when the question is about **business logic, state transitions, or data shape** — the kind of thing that looks reasonable on paper but only feels wrong once you push it through real cases.
4
-
5
- ## When this is the right shape
6
-
7
- - "I'm not sure if this state machine handles the edge case where X then Y."
8
- - "Does this data model actually let me represent the case where..."
9
- - "I want to feel out what the API should look like before writing it."
10
- - Anything where the user wants to **press buttons and watch state change**.
11
-
12
- If the question is "what should this look like" — wrong branch. Use [UI.md](UI.md).
13
-
14
- ## Process
15
-
16
- ### 1. State the question
17
-
18
- Before writing code, write down what state model and what question you're prototyping. One paragraph, in the prototype's README or a comment at the top of the file. A logic prototype that answers the wrong question is pure waste — make the question explicit so it can be checked later, whether the user is watching now or returning to it AFK.
19
-
20
- ### 2. Pick the language
21
-
22
- Use whatever the host project uses. If the project has no obvious runtime (e.g. a docs repo), ask.
23
-
24
- Match the project's existing conventions for tooling — don't add a new package manager or runtime just for the prototype.
25
-
26
- ### 3. Isolate the logic in a portable module
27
-
28
- Put the actual logic — the bit that's answering the question — behind a small, pure interface that could be lifted out and dropped into the real codebase later. The TUI around it is throwaway; the logic module shouldn't be.
29
-
30
- The right shape depends on the question:
31
-
32
- - **A pure reducer** — `(state, action) => state`. Good when actions are discrete events and state is a single value.
33
- - **A state machine** — explicit states and transitions. Good when "which actions are even legal right now" is part of the question.
34
- - **A small set of pure functions** over a plain data type. Good when there's no implicit current state — just transformations.
35
- - **A class or module with a clear method surface** when the logic genuinely owns ongoing internal state.
36
-
37
- Pick whichever shape best fits the question being asked, *not* whichever is easiest to wire to a TUI. Keep it pure: no I/O, no terminal code, no `console.log` for control flow. The TUI imports it and calls into it; nothing flows the other direction.
38
-
39
- This is what makes the prototype useful past its own lifetime. When the question's been answered, the validated reducer / machine / function set can be lifted into the real module — the TUI shell gets deleted.
40
-
41
- ### 4. Build the smallest TUI that exposes the state
42
-
43
- Build it as a **lightweight TUI** — on every tick, clear the screen (`console.clear()` / `print("\033[2J\033[H")` / equivalent) and re-render the whole frame. The user should always see one stable view, not an ever-growing scrollback.
44
-
45
- Each frame has two parts, in this order:
46
-
47
- 1. **Current state**, pretty-printed and diff-friendly (one field per line, or formatted JSON). Use **bold** for field names or section headers and **dim** for less important context (timestamps, IDs, derived values). Native ANSI escape codes are fine — `\x1b[1m` bold, `\x1b[2m` dim, `\x1b[0m` reset. No need to pull in a styling library unless one is already in the project.
48
- 2. **Keyboard shortcuts**, listed at the bottom: `[a] add user [d] delete user [t] tick clock [q] quit`. Bold the key, dim the description, or vice-versa — whatever reads cleanly.
49
-
50
- Behaviour:
51
-
52
- 1. **Initialise state** — a single in-memory object/struct. Render the first frame on start.
53
- 2. **Read one keystroke (or one line)** at a time, dispatch to a handler that mutates state.
54
- 3. **Re-render** the full frame after every action — don't append, replace.
55
- 4. **Loop until quit.**
56
-
57
- The whole frame should fit on one screen.
58
-
59
- ### 5. Make it runnable in one command
60
-
61
- Add a script to the project's existing task runner (`package.json` scripts, `Makefile`, `justfile`, `pyproject.toml`). The user should run `pnpm run <prototype-name>` or equivalent — never need to remember a path.
62
-
63
- If the host project has no task runner, just put the command at the top of the prototype's README.
64
-
65
- ### 6. Hand it over
66
-
67
- Give the user the run command. They'll drive it themselves; the interesting moments are when they say "wait, that shouldn't be possible" or "huh, I assumed X would be different" — those are the bugs in the _idea_, which is the whole point. If they want new actions added, add them. Prototypes evolve.
68
-
69
- ### 7. Capture the answer
70
-
71
- When the prototype has done its job, the answer to the question is the only thing worth keeping. If the user is around, ask what it taught them. If not, leave a `NOTES.md` next to the prototype so the answer can be filled in (or filled in by you, if you've watched the session) before the prototype gets deleted.
72
-
73
- ## Anti-patterns
74
-
75
- - **Don't add tests.** A prototype that needs tests is no longer a prototype.
76
- - **Don't wire it to the real database.** Use an in-memory store unless the question is specifically about persistence.
77
- - **Don't generalise.** No "what if we wanted to support X later." The prototype answers one question.
78
- - **Don't blur the logic and the TUI together.** If the reducer / state machine references `console.log`, prompts, or terminal escape codes, it's no longer portable. Keep the TUI as a thin shell over a pure module.
79
- - **Don't ship the TUI shell into production.** The shell is optimised for being driven by hand from a terminal. The logic module behind it is the bit worth keeping.
@@ -1,30 +0,0 @@
1
- ---
2
- name: prototype
3
- description: Build a throwaway prototype to flesh out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up a UI, explore design options, or says "prototype this", "let me play with it", "try a few designs".
4
- ---
5
-
6
- # Prototype
7
-
8
- A prototype is **throwaway code that answers a question**. The question decides the shape.
9
-
10
- ## Pick a branch
11
-
12
- Identify which question is being answered — from the user's prompt, the surrounding code, or by asking if the user is around:
13
-
14
- - **"Does this logic / state model feel right?"** → [LOGIC.md](LOGIC.md). Build a tiny interactive terminal app that pushes the state machine through cases that are hard to reason about on paper.
15
- - **"What should this look like?"** → [UI.md](UI.md). Generate several radically different UI variations on a single route, switchable via a URL search param and a floating bottom bar.
16
-
17
- The two branches produce very different artifacts — getting this wrong wastes the whole prototype. If the question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the surrounding code (a backend module → logic; a page or component → UI) and state the assumption at the top of the prototype.
18
-
19
- ## Rules that apply to both
20
-
21
- 1. **Throwaway from day one, and clearly marked as such.** Locate the prototype code close to where it will actually be used (next to the module or page it's prototyping for) so context is obvious — but name it so a casual reader can see it's a prototype, not production. For throwaway UI routes, obey whatever routing convention the project already uses; don't invent a new top-level structure.
22
- 2. **One command to run.** Whatever the project's existing task runner supports — `pnpm <name>`, `python <path>`, `bun <path>`, etc. The user must be able to start it without thinking.
23
- 3. **No persistence by default.** State lives in memory. Persistence is the thing the prototype is _checking_, not something it should depend on. If the question explicitly involves a database, hit a scratch DB or a local file with a clear "PROTOTYPE — wipe me" name.
24
- 4. **Skip the polish.** No tests, no error handling beyond what makes the prototype _runnable_, no abstractions. The point is to learn something fast and then delete it.
25
- 5. **Surface the state.** After every action (logic) or on every variant switch (UI), print or render the full relevant state so the user can see what changed.
26
- 6. **Delete or absorb when done.** When the prototype has answered its question, either delete it or fold the validated decision into the real code — don't leave it rotting in the repo.
27
-
28
- ## When done
29
-
30
- The _answer_ is the only thing worth keeping from a prototype. Capture it somewhere durable (commit message, ADR, issue, or a `NOTES.md` next to the prototype) along with the question it was answering. If the user is around, that capture is a quick conversation; if not, leave the placeholder so they (or you, on the next pass) can fill in the verdict before deleting the prototype.