@eltonssouza/development-utility-kit 0.15.0 → 0.16.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.
- package/.claude/agents/ux-designer.md +1 -1
- package/.claude/skills/_vendor/NOTICE.md +11 -0
- package/.claude/skills/_vendor/mattpocock-LICENSE +21 -0
- package/.claude/skills/_vendor/vendored.json +15 -0
- package/.claude/skills/diagnose/SKILL.md +117 -0
- package/.claude/skills/diagnose/scripts/hitl-loop.template.sh +41 -0
- package/.claude/skills/grill-with-docs/ADR-FORMAT.md +47 -0
- package/.claude/skills/grill-with-docs/CONTEXT-FORMAT.md +60 -0
- package/.claude/skills/grill-with-docs/SKILL.md +88 -0
- package/.claude/skills/improve-codebase-architecture/DEEPENING.md +37 -0
- package/.claude/skills/improve-codebase-architecture/HTML-REPORT.md +123 -0
- package/.claude/skills/improve-codebase-architecture/INTERFACE-DESIGN.md +44 -0
- package/.claude/skills/improve-codebase-architecture/LANGUAGE.md +53 -0
- package/.claude/skills/improve-codebase-architecture/SKILL.md +81 -0
- package/.claude/skills/project-manager/SKILL.md +6 -5
- package/.claude/skills/prototype/LOGIC.md +79 -0
- package/.claude/skills/prototype/SKILL.md +30 -0
- package/.claude/skills/prototype/UI.md +112 -0
- package/.claude/skills/setup-matt-pocock-skills/SKILL.md +121 -0
- package/.claude/skills/setup-matt-pocock-skills/domain.md +51 -0
- package/.claude/skills/setup-matt-pocock-skills/issue-tracker-github.md +22 -0
- package/.claude/skills/setup-matt-pocock-skills/issue-tracker-gitlab.md +23 -0
- package/.claude/skills/setup-matt-pocock-skills/issue-tracker-local.md +19 -0
- package/.claude/skills/setup-matt-pocock-skills/triage-labels.md +15 -0
- package/.claude/skills/tdd/SKILL.md +109 -0
- package/.claude/skills/tdd/deep-modules.md +33 -0
- package/.claude/skills/tdd/interface-design.md +31 -0
- package/.claude/skills/tdd/mocking.md +59 -0
- package/.claude/skills/tdd/refactoring.md +10 -0
- package/.claude/skills/tdd/tests.md +61 -0
- package/.claude/skills/triage/AGENT-BRIEF.md +168 -0
- package/.claude/skills/triage/OUT-OF-SCOPE.md +101 -0
- package/.claude/skills/triage/SKILL.md +103 -0
- package/.claude/skills/zoom-out/SKILL.md +7 -0
- package/README.md +3 -3
- package/README.npm.md +3 -3
- package/README.repo.md +4 -4
- package/bin/cli.js +3 -3
- package/bin/lib/lint.js +16 -1
- package/dashboard/public/content/docs/skills-reference.en.md +1 -1
- package/dashboard/public/content/manual/frontend.en.md +9 -7
- package/dashboard/public/content/manual/fullstack.en.md +9 -6
- package/package.json +1 -1
|
@@ -52,7 +52,7 @@ Never invent a custom component when the declared library has a matching primiti
|
|
|
52
52
|
|
|
53
53
|
`impeccable` is the harness's frontend design-quality gate — an external plugin by Paul Bakaus (credited in `README.md §Acknowledgements`), not bundled. It is **gated through `project-manager` §6.6 (ADR-048)**: whenever frontend/ux work is in scope, `project-manager` **offers** impeccable to the user (mandatory offer, the user chooses). On "Sim" the flow is, in order:
|
|
54
54
|
|
|
55
|
-
1. **Install (if absent)** —
|
|
55
|
+
1. **Install (if absent)** — prefer the Claude Code plugin (git-based, cross-platform): `/plugin marketplace add pbakaus/impeccable` then `/plugin install impeccable`. The `npx skills add pbakaus/impeccable` route needs `unzip` (breaks on Windows).
|
|
56
56
|
2. **Teach** — Claude Code: `/impeccable teach` (analyzes the project's stack, tokens, patterns).
|
|
57
57
|
3. **Act** — Claude Code: the fitting verb — `/impeccable shape` (from scratch), `polish`, `audit`, `critique`, `harden`, `clarify`, `colorize`, `animate`, …
|
|
58
58
|
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# Vendored skills — attribution
|
|
2
|
+
|
|
3
|
+
The following skills are vendored from **[mattpocock/skills](https://github.com/mattpocock/skills)**
|
|
4
|
+
by **Matt Pocock**, under the **MIT License** (see `mattpocock-LICENSE`):
|
|
5
|
+
|
|
6
|
+
- `diagnose`, `grill-with-docs`, `improve-codebase-architecture`, `prototype`,
|
|
7
|
+
`setup-matt-pocock-skills`, `tdd`, `triage`, `zoom-out`
|
|
8
|
+
- (Sprint 4: `to-prd`, `to-issues`)
|
|
9
|
+
|
|
10
|
+
They are bundled — not re-authored. Upstream is the source of truth; we re-sync
|
|
11
|
+
on update. See `docs/plans/PLAN_mattpocock-workflow-adoption.md` (ADR-049).
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Matt Pocock
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"_comment": "Skills vendored from third parties (MIT). Exempt from the harness tools/model frontmatter convention — they are valid Claude Code skills as-authored upstream. See _vendor/NOTICE.md.",
|
|
3
|
+
"source": "mattpocock/skills",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"skills": [
|
|
6
|
+
"diagnose",
|
|
7
|
+
"grill-with-docs",
|
|
8
|
+
"improve-codebase-architecture",
|
|
9
|
+
"prototype",
|
|
10
|
+
"setup-matt-pocock-skills",
|
|
11
|
+
"tdd",
|
|
12
|
+
"triage",
|
|
13
|
+
"zoom-out"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: diagnose
|
|
3
|
+
description: Disciplined diagnosis loop for hard bugs and performance regressions. Reproduce → minimise → hypothesise → instrument → fix → regression-test. Use when user says "diagnose this" / "debug this", reports a bug, says something is broken/throwing/failing, or describes a performance regression.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Diagnose
|
|
7
|
+
|
|
8
|
+
A discipline for hard bugs. Skip phases only when explicitly justified.
|
|
9
|
+
|
|
10
|
+
When exploring the codebase, use the project's domain glossary to get a clear mental model of the relevant modules, and check ADRs in the area you're touching.
|
|
11
|
+
|
|
12
|
+
## Phase 1 — Build a feedback loop
|
|
13
|
+
|
|
14
|
+
**This is the skill.** Everything else is mechanical. If you have a fast, deterministic, agent-runnable pass/fail signal for the bug, you will find the cause — bisection, hypothesis-testing, and instrumentation all just consume that signal. If you don't have one, no amount of staring at code will save you.
|
|
15
|
+
|
|
16
|
+
Spend disproportionate effort here. **Be aggressive. Be creative. Refuse to give up.**
|
|
17
|
+
|
|
18
|
+
### Ways to construct one — try them in roughly this order
|
|
19
|
+
|
|
20
|
+
1. **Failing test** at whatever seam reaches the bug — unit, integration, e2e.
|
|
21
|
+
2. **Curl / HTTP script** against a running dev server.
|
|
22
|
+
3. **CLI invocation** with a fixture input, diffing stdout against a known-good snapshot.
|
|
23
|
+
4. **Headless browser script** (Playwright / Puppeteer) — drives the UI, asserts on DOM/console/network.
|
|
24
|
+
5. **Replay a captured trace.** Save a real network request / payload / event log to disk; replay it through the code path in isolation.
|
|
25
|
+
6. **Throwaway harness.** Spin up a minimal subset of the system (one service, mocked deps) that exercises the bug code path with a single function call.
|
|
26
|
+
7. **Property / fuzz loop.** If the bug is "sometimes wrong output", run 1000 random inputs and look for the failure mode.
|
|
27
|
+
8. **Bisection harness.** If the bug appeared between two known states (commit, dataset, version), automate "boot at state X, check, repeat" so you can `git bisect run` it.
|
|
28
|
+
9. **Differential loop.** Run the same input through old-version vs new-version (or two configs) and diff outputs.
|
|
29
|
+
10. **HITL bash script.** Last resort. If a human must click, drive _them_ with `scripts/hitl-loop.template.sh` so the loop is still structured. Captured output feeds back to you.
|
|
30
|
+
|
|
31
|
+
Build the right feedback loop, and the bug is 90% fixed.
|
|
32
|
+
|
|
33
|
+
### Iterate on the loop itself
|
|
34
|
+
|
|
35
|
+
Treat the loop as a product. Once you have _a_ loop, ask:
|
|
36
|
+
|
|
37
|
+
- Can I make it faster? (Cache setup, skip unrelated init, narrow the test scope.)
|
|
38
|
+
- Can I make the signal sharper? (Assert on the specific symptom, not "didn't crash".)
|
|
39
|
+
- Can I make it more deterministic? (Pin time, seed RNG, isolate filesystem, freeze network.)
|
|
40
|
+
|
|
41
|
+
A 30-second flaky loop is barely better than no loop. A 2-second deterministic loop is a debugging superpower.
|
|
42
|
+
|
|
43
|
+
### Non-deterministic bugs
|
|
44
|
+
|
|
45
|
+
The goal is not a clean repro but a **higher reproduction rate**. Loop the trigger 100×, parallelise, add stress, narrow timing windows, inject sleeps. A 50%-flake bug is debuggable; 1% is not — keep raising the rate until it's debuggable.
|
|
46
|
+
|
|
47
|
+
### When you genuinely cannot build a loop
|
|
48
|
+
|
|
49
|
+
Stop and say so explicitly. List what you tried. Ask the user for: (a) access to whatever environment reproduces it, (b) a captured artifact (HAR file, log dump, core dump, screen recording with timestamps), or (c) permission to add temporary production instrumentation. Do **not** proceed to hypothesise without a loop.
|
|
50
|
+
|
|
51
|
+
Do not proceed to Phase 2 until you have a loop you believe in.
|
|
52
|
+
|
|
53
|
+
## Phase 2 — Reproduce
|
|
54
|
+
|
|
55
|
+
Run the loop. Watch the bug appear.
|
|
56
|
+
|
|
57
|
+
Confirm:
|
|
58
|
+
|
|
59
|
+
- [ ] The loop produces the failure mode the **user** described — not a different failure that happens to be nearby. Wrong bug = wrong fix.
|
|
60
|
+
- [ ] The failure is reproducible across multiple runs (or, for non-deterministic bugs, reproducible at a high enough rate to debug against).
|
|
61
|
+
- [ ] You have captured the exact symptom (error message, wrong output, slow timing) so later phases can verify the fix actually addresses it.
|
|
62
|
+
|
|
63
|
+
Do not proceed until you reproduce the bug.
|
|
64
|
+
|
|
65
|
+
## Phase 3 — Hypothesise
|
|
66
|
+
|
|
67
|
+
Generate **3–5 ranked hypotheses** before testing any of them. Single-hypothesis generation anchors on the first plausible idea.
|
|
68
|
+
|
|
69
|
+
Each hypothesis must be **falsifiable**: state the prediction it makes.
|
|
70
|
+
|
|
71
|
+
> Format: "If <X> is the cause, then <changing Y> will make the bug disappear / <changing Z> will make it worse."
|
|
72
|
+
|
|
73
|
+
If you cannot state the prediction, the hypothesis is a vibe — discard or sharpen it.
|
|
74
|
+
|
|
75
|
+
**Show the ranked list to the user before testing.** They often have domain knowledge that re-ranks instantly ("we just deployed a change to #3"), or know hypotheses they've already ruled out. Cheap checkpoint, big time saver. Don't block on it — proceed with your ranking if the user is AFK.
|
|
76
|
+
|
|
77
|
+
## Phase 4 — Instrument
|
|
78
|
+
|
|
79
|
+
Each probe must map to a specific prediction from Phase 3. **Change one variable at a time.**
|
|
80
|
+
|
|
81
|
+
Tool preference:
|
|
82
|
+
|
|
83
|
+
1. **Debugger / REPL inspection** if the env supports it. One breakpoint beats ten logs.
|
|
84
|
+
2. **Targeted logs** at the boundaries that distinguish hypotheses.
|
|
85
|
+
3. Never "log everything and grep".
|
|
86
|
+
|
|
87
|
+
**Tag every debug log** with a unique prefix, e.g. `[DEBUG-a4f2]`. Cleanup at the end becomes a single grep. Untagged logs survive; tagged logs die.
|
|
88
|
+
|
|
89
|
+
**Perf branch.** For performance regressions, logs are usually wrong. Instead: establish a baseline measurement (timing harness, `performance.now()`, profiler, query plan), then bisect. Measure first, fix second.
|
|
90
|
+
|
|
91
|
+
## Phase 5 — Fix + regression test
|
|
92
|
+
|
|
93
|
+
Write the regression test **before the fix** — but only if there is a **correct seam** for it.
|
|
94
|
+
|
|
95
|
+
A correct seam is one where the test exercises the **real bug pattern** as it occurs at the call site. If the only available seam is too shallow (single-caller test when the bug needs multiple callers, unit test that can't replicate the chain that triggered the bug), a regression test there gives false confidence.
|
|
96
|
+
|
|
97
|
+
**If no correct seam exists, that itself is the finding.** Note it. The codebase architecture is preventing the bug from being locked down. Flag this for the next phase.
|
|
98
|
+
|
|
99
|
+
If a correct seam exists:
|
|
100
|
+
|
|
101
|
+
1. Turn the minimised repro into a failing test at that seam.
|
|
102
|
+
2. Watch it fail.
|
|
103
|
+
3. Apply the fix.
|
|
104
|
+
4. Watch it pass.
|
|
105
|
+
5. Re-run the Phase 1 feedback loop against the original (un-minimised) scenario.
|
|
106
|
+
|
|
107
|
+
## Phase 6 — Cleanup + post-mortem
|
|
108
|
+
|
|
109
|
+
Required before declaring done:
|
|
110
|
+
|
|
111
|
+
- [ ] Original repro no longer reproduces (re-run the Phase 1 loop)
|
|
112
|
+
- [ ] Regression test passes (or absence of seam is documented)
|
|
113
|
+
- [ ] All `[DEBUG-...]` instrumentation removed (`grep` the prefix)
|
|
114
|
+
- [ ] Throwaway prototypes deleted (or moved to a clearly-marked debug location)
|
|
115
|
+
- [ ] The hypothesis that turned out correct is stated in the commit / PR message — so the next debugger learns
|
|
116
|
+
|
|
117
|
+
**Then ask: what would have prevented this bug?** If the answer involves architectural change (no good test seam, tangled callers, hidden coupling) hand off to the `/improve-codebase-architecture` skill with the specifics. Make the recommendation **after** the fix is in, not before — you have more information now than when you started.
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
#!/usr/bin/env bash
|
|
2
|
+
# Human-in-the-loop reproduction loop.
|
|
3
|
+
# Copy this file, edit the steps below, and run it.
|
|
4
|
+
# The agent runs the script; the user follows prompts in their terminal.
|
|
5
|
+
#
|
|
6
|
+
# Usage:
|
|
7
|
+
# bash hitl-loop.template.sh
|
|
8
|
+
#
|
|
9
|
+
# Two helpers:
|
|
10
|
+
# step "<instruction>" → show instruction, wait for Enter
|
|
11
|
+
# capture VAR "<question>" → show question, read response into VAR
|
|
12
|
+
#
|
|
13
|
+
# At the end, captured values are printed as KEY=VALUE for the agent to parse.
|
|
14
|
+
|
|
15
|
+
set -euo pipefail
|
|
16
|
+
|
|
17
|
+
step() {
|
|
18
|
+
printf '\n>>> %s\n' "$1"
|
|
19
|
+
read -r -p " [Enter when done] " _
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
capture() {
|
|
23
|
+
local var="$1" question="$2" answer
|
|
24
|
+
printf '\n>>> %s\n' "$question"
|
|
25
|
+
read -r -p " > " answer
|
|
26
|
+
printf -v "$var" '%s' "$answer"
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
# --- edit below ---------------------------------------------------------
|
|
30
|
+
|
|
31
|
+
step "Open the app at http://localhost:3000 and sign in."
|
|
32
|
+
|
|
33
|
+
capture ERRORED "Click the 'Export' button. Did it throw an error? (y/n)"
|
|
34
|
+
|
|
35
|
+
capture ERROR_MSG "Paste the error message (or 'none'):"
|
|
36
|
+
|
|
37
|
+
# --- edit above ---------------------------------------------------------
|
|
38
|
+
|
|
39
|
+
printf '\n--- Captured ---\n'
|
|
40
|
+
printf 'ERRORED=%s\n' "$ERRORED"
|
|
41
|
+
printf 'ERROR_MSG=%s\n' "$ERROR_MSG"
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# ADR Format
|
|
2
|
+
|
|
3
|
+
ADRs live in `docs/adr/` and use sequential numbering: `0001-slug.md`, `0002-slug.md`, etc.
|
|
4
|
+
|
|
5
|
+
Create the `docs/adr/` directory lazily — only when the first ADR is needed.
|
|
6
|
+
|
|
7
|
+
## Template
|
|
8
|
+
|
|
9
|
+
```md
|
|
10
|
+
# {Short title of the decision}
|
|
11
|
+
|
|
12
|
+
{1-3 sentences: what's the context, what did we decide, and why.}
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
That's it. An ADR can be a single paragraph. The value is in recording *that* a decision was made and *why* — not in filling out sections.
|
|
16
|
+
|
|
17
|
+
## Optional sections
|
|
18
|
+
|
|
19
|
+
Only include these when they add genuine value. Most ADRs won't need them.
|
|
20
|
+
|
|
21
|
+
- **Status** frontmatter (`proposed | accepted | deprecated | superseded by ADR-NNNN`) — useful when decisions are revisited
|
|
22
|
+
- **Considered Options** — only when the rejected alternatives are worth remembering
|
|
23
|
+
- **Consequences** — only when non-obvious downstream effects need to be called out
|
|
24
|
+
|
|
25
|
+
## Numbering
|
|
26
|
+
|
|
27
|
+
Scan `docs/adr/` for the highest existing number and increment by one.
|
|
28
|
+
|
|
29
|
+
## When to offer an ADR
|
|
30
|
+
|
|
31
|
+
All three of these must be true:
|
|
32
|
+
|
|
33
|
+
1. **Hard to reverse** — the cost of changing your mind later is meaningful
|
|
34
|
+
2. **Surprising without context** — a future reader will look at the code and wonder "why on earth did they do it this way?"
|
|
35
|
+
3. **The result of a real trade-off** — there were genuine alternatives and you picked one for specific reasons
|
|
36
|
+
|
|
37
|
+
If a decision is easy to reverse, skip it — you'll just reverse it. If it's not surprising, nobody will wonder why. If there was no real alternative, there's nothing to record beyond "we did the obvious thing."
|
|
38
|
+
|
|
39
|
+
### What qualifies
|
|
40
|
+
|
|
41
|
+
- **Architectural shape.** "We're using a monorepo." "The write model is event-sourced, the read model is projected into Postgres."
|
|
42
|
+
- **Integration patterns between contexts.** "Ordering and Billing communicate via domain events, not synchronous HTTP."
|
|
43
|
+
- **Technology choices that carry lock-in.** Database, message bus, auth provider, deployment target. Not every library — just the ones that would take a quarter to swap out.
|
|
44
|
+
- **Boundary and scope decisions.** "Customer data is owned by the Customer context; other contexts reference it by ID only." The explicit no-s are as valuable as the yes-s.
|
|
45
|
+
- **Deliberate deviations from the obvious path.** "We're using manual SQL instead of an ORM because X." Anything where a reasonable reader would assume the opposite. These stop the next engineer from "fixing" something that was deliberate.
|
|
46
|
+
- **Constraints not visible in the code.** "We can't use AWS because of compliance requirements." "Response times must be under 200ms because of the partner API contract."
|
|
47
|
+
- **Rejected alternatives when the rejection is non-obvious.** If you considered GraphQL and picked REST for subtle reasons, record it — otherwise someone will suggest GraphQL again in six months.
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# CONTEXT.md Format
|
|
2
|
+
|
|
3
|
+
## Structure
|
|
4
|
+
|
|
5
|
+
```md
|
|
6
|
+
# {Context Name}
|
|
7
|
+
|
|
8
|
+
{One or two sentence description of what this context is and why it exists.}
|
|
9
|
+
|
|
10
|
+
## Language
|
|
11
|
+
|
|
12
|
+
**Order**:
|
|
13
|
+
{A one or two sentence description of the term}
|
|
14
|
+
_Avoid_: Purchase, transaction
|
|
15
|
+
|
|
16
|
+
**Invoice**:
|
|
17
|
+
A request for payment sent to a customer after delivery.
|
|
18
|
+
_Avoid_: Bill, payment request
|
|
19
|
+
|
|
20
|
+
**Customer**:
|
|
21
|
+
A person or organization that places orders.
|
|
22
|
+
_Avoid_: Client, buyer, account
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Rules
|
|
26
|
+
|
|
27
|
+
- **Be opinionated.** When multiple words exist for the same concept, pick the best one and list the others under `_Avoid_`.
|
|
28
|
+
- **Keep definitions tight.** One or two sentences max. Define what it IS, not what it does.
|
|
29
|
+
- **Only include terms specific to this project's context.** General programming concepts (timeouts, error types, utility patterns) don't belong even if the project uses them extensively. Before adding a term, ask: is this a concept unique to this context, or a general programming concept? Only the former belongs.
|
|
30
|
+
- **Group terms under subheadings** when natural clusters emerge. If all terms belong to a single cohesive area, a flat list is fine.
|
|
31
|
+
|
|
32
|
+
## Single vs multi-context repos
|
|
33
|
+
|
|
34
|
+
**Single context (most repos):** One `CONTEXT.md` at the repo root.
|
|
35
|
+
|
|
36
|
+
**Multiple contexts:** A `CONTEXT-MAP.md` at the repo root lists the contexts, where they live, and how they relate to each other:
|
|
37
|
+
|
|
38
|
+
```md
|
|
39
|
+
# Context Map
|
|
40
|
+
|
|
41
|
+
## Contexts
|
|
42
|
+
|
|
43
|
+
- [Ordering](./src/ordering/CONTEXT.md) — receives and tracks customer orders
|
|
44
|
+
- [Billing](./src/billing/CONTEXT.md) — generates invoices and processes payments
|
|
45
|
+
- [Fulfillment](./src/fulfillment/CONTEXT.md) — manages warehouse picking and shipping
|
|
46
|
+
|
|
47
|
+
## Relationships
|
|
48
|
+
|
|
49
|
+
- **Ordering → Fulfillment**: Ordering emits `OrderPlaced` events; Fulfillment consumes them to start picking
|
|
50
|
+
- **Fulfillment → Billing**: Fulfillment emits `ShipmentDispatched` events; Billing consumes them to generate invoices
|
|
51
|
+
- **Ordering ↔ Billing**: Shared types for `CustomerId` and `Money`
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
The skill infers which structure applies:
|
|
55
|
+
|
|
56
|
+
- If `CONTEXT-MAP.md` exists, read it to find contexts
|
|
57
|
+
- If only a root `CONTEXT.md` exists, single context
|
|
58
|
+
- If neither exists, create a root `CONTEXT.md` lazily when the first term is resolved
|
|
59
|
+
|
|
60
|
+
When multiple contexts exist, infer which one the current topic relates to. If unclear, ask.
|
|
@@ -0,0 +1,88 @@
|
|
|
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>
|
|
@@ -0,0 +1,37 @@
|
|
|
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.
|
|
@@ -0,0 +1,123 @@
|
|
|
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.
|
|
@@ -0,0 +1,44 @@
|
|
|
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.
|