@agentshouse/kit 0.2.1-ce145e9aadbf6 → 0.2.1-ce47f621f90e1

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 (136) hide show
  1. package/README.md +47 -46
  2. package/dist/acp.js +102 -108
  3. package/dist/agents.js +189 -56
  4. package/dist/api.js +34 -2
  5. package/dist/app-git.js +48 -0
  6. package/dist/authority-main.js +2 -2
  7. package/dist/bridge.js +37 -58
  8. package/dist/building.js +50 -0
  9. package/dist/calls.js +71 -0
  10. package/dist/chatgpt.js +32 -0
  11. package/dist/clis.js +150 -99
  12. package/dist/codex-main.js +58 -0
  13. package/dist/connection.js +105 -0
  14. package/dist/conversations.js +731 -332
  15. package/dist/copies.js +188 -128
  16. package/dist/end.js +33 -0
  17. package/dist/enrol-main.js +7 -1
  18. package/dist/events.js +546 -0
  19. package/dist/files.js +139 -17
  20. package/dist/git.js +13 -11
  21. package/dist/home.js +89 -7
  22. package/dist/house-cli.js +299 -0
  23. package/dist/house-main.js +7 -159
  24. package/dist/instructions.js +8 -10
  25. package/dist/kit-cli.js +68 -0
  26. package/dist/kit-main.js +8 -19
  27. package/dist/login.js +119 -104
  28. package/dist/logout.js +14 -13
  29. package/dist/mcp.js +6 -2
  30. package/dist/parts.js +82 -0
  31. package/dist/placement.js +31 -0
  32. package/dist/refusals.js +12 -0
  33. package/dist/relay.js +33 -2
  34. package/dist/resident.js +117 -51
  35. package/dist/scope.js +214 -0
  36. package/dist/scripts.js +255 -0
  37. package/dist/secret-input.js +3 -2
  38. package/dist/service-main.js +9 -0
  39. package/dist/service.js +55 -0
  40. package/dist/shell.js +3 -0
  41. package/dist/sign-in.js +40 -33
  42. package/dist/silence.js +28 -0
  43. package/dist/skills.js +49 -35
  44. package/dist/transcription.js +129 -41
  45. package/dist/translate.js +2 -8
  46. package/dist/update.js +113 -103
  47. package/dist/wire.js +40 -0
  48. package/dist/work.js +346 -0
  49. package/package.json +20 -20
  50. package/dist/blocks.js +0 -51
  51. package/dist/bootstrap.json +0 -24
  52. package/dist/clis-main.js +0 -23
  53. package/dist/stream.js +0 -47
  54. package/how-we-work.md +0 -23
  55. package/skills/ask-matt/LICENSE +0 -21
  56. package/skills/ask-matt/PHASE-BOUNDARIES.md +0 -55
  57. package/skills/ask-matt/SKILL.md +0 -91
  58. package/skills/ask-matt/agents/openai.yaml +0 -4
  59. package/skills/code-review/LICENSE +0 -21
  60. package/skills/code-review/SKILL.md +0 -89
  61. package/skills/code-review/agents/openai.yaml +0 -3
  62. package/skills/codebase-design/DEEPENING.md +0 -37
  63. package/skills/codebase-design/DESIGN-IT-TWICE.md +0 -44
  64. package/skills/codebase-design/LICENSE +0 -21
  65. package/skills/codebase-design/SKILL.md +0 -116
  66. package/skills/codebase-design/agents/openai.yaml +0 -3
  67. package/skills/diagnosing-bugs/LICENSE +0 -21
  68. package/skills/diagnosing-bugs/SKILL.md +0 -140
  69. package/skills/diagnosing-bugs/agents/openai.yaml +0 -3
  70. package/skills/diagnosing-bugs/scripts/hitl-loop.template.sh +0 -44
  71. package/skills/domain-modeling/ADR-FORMAT.md +0 -47
  72. package/skills/domain-modeling/CONTEXT-FORMAT.md +0 -60
  73. package/skills/domain-modeling/LICENSE +0 -21
  74. package/skills/domain-modeling/SKILL.md +0 -76
  75. package/skills/domain-modeling/agents/openai.yaml +0 -3
  76. package/skills/grill-me/LICENSE +0 -21
  77. package/skills/grill-me/SKILL.md +0 -8
  78. package/skills/grill-me/agents/openai.yaml +0 -4
  79. package/skills/grill-with-docs/LICENSE +0 -21
  80. package/skills/grill-with-docs/SKILL.md +0 -8
  81. package/skills/grill-with-docs/agents/openai.yaml +0 -4
  82. package/skills/grilling/LICENSE +0 -21
  83. package/skills/grilling/SKILL.md +0 -30
  84. package/skills/grilling/agents/openai.yaml +0 -3
  85. package/skills/handoff/LICENSE +0 -21
  86. package/skills/handoff/SKILL.md +0 -17
  87. package/skills/handoff/agents/openai.yaml +0 -4
  88. package/skills/implement/LICENSE +0 -21
  89. package/skills/implement/SKILL.md +0 -16
  90. package/skills/implement/agents/openai.yaml +0 -4
  91. package/skills/improve-codebase-architecture/HTML-REPORT.md +0 -123
  92. package/skills/improve-codebase-architecture/LICENSE +0 -21
  93. package/skills/improve-codebase-architecture/SKILL.md +0 -72
  94. package/skills/improve-codebase-architecture/agents/openai.yaml +0 -4
  95. package/skills/prototype/LICENSE +0 -21
  96. package/skills/prototype/LOGIC.md +0 -67
  97. package/skills/prototype/SKILL.md +0 -28
  98. package/skills/prototype/UI.md +0 -112
  99. package/skills/prototype/agents/openai.yaml +0 -3
  100. package/skills/research/LICENSE +0 -21
  101. package/skills/research/SKILL.md +0 -14
  102. package/skills/research/agents/openai.yaml +0 -3
  103. package/skills/resolving-merge-conflicts/LICENSE +0 -21
  104. package/skills/resolving-merge-conflicts/SKILL.md +0 -16
  105. package/skills/resolving-merge-conflicts/agents/openai.yaml +0 -3
  106. package/skills/tdd/LICENSE +0 -21
  107. package/skills/tdd/SKILL.md +0 -40
  108. package/skills/tdd/agents/openai.yaml +0 -3
  109. package/skills/tdd/mocking.md +0 -59
  110. package/skills/tdd/tests.md +0 -77
  111. package/skills/teach/GLOSSARY-FORMAT.md +0 -35
  112. package/skills/teach/LEARNING-RECORD-FORMAT.md +0 -46
  113. package/skills/teach/LICENSE +0 -21
  114. package/skills/teach/MISSION-FORMAT.md +0 -31
  115. package/skills/teach/RESOURCES-FORMAT.md +0 -32
  116. package/skills/teach/SKILL.md +0 -141
  117. package/skills/teach/agents/openai.yaml +0 -4
  118. package/skills/to-questionnaire/LICENSE +0 -21
  119. package/skills/to-questionnaire/SKILL.md +0 -55
  120. package/skills/to-questionnaire/agents/openai.yaml +0 -4
  121. package/skills/to-spec/LICENSE +0 -21
  122. package/skills/to-spec/SKILL.md +0 -76
  123. package/skills/to-spec/agents/openai.yaml +0 -4
  124. package/skills/to-tickets/LICENSE +0 -21
  125. package/skills/to-tickets/SKILL.md +0 -106
  126. package/skills/to-tickets/agents/openai.yaml +0 -4
  127. package/skills/wait-what/LICENSE +0 -21
  128. package/skills/wait-what/SKILL.md +0 -8
  129. package/skills/wait-what/agents/openai.yaml +0 -4
  130. package/skills/wayfinder/LICENSE +0 -21
  131. package/skills/wayfinder/SKILL.md +0 -129
  132. package/skills/wayfinder/agents/openai.yaml +0 -4
  133. package/skills/writing-for-agents/LICENSE +0 -21
  134. package/skills/writing-for-agents/SKILL-MECHANICS.md +0 -22
  135. package/skills/writing-for-agents/SKILL.md +0 -83
  136. package/skills/writing-for-agents/agents/openai.yaml +0 -3
@@ -1,72 +0,0 @@
1
- ---
2
- name: improve-codebase-architecture
3
- description: Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
4
- ---
5
-
6
- <!-- Vendored from mattpocock/skills at commit c55ee46073ed923f86ce59a5eb3b6d895095d1b7 (skills/engineering/improve-codebase-architecture). MIT licensed — see LICENSE in this directory. -->
7
-
8
- # Improve Codebase Architecture
9
-
10
- Surface architectural friction and propose **deepening opportunities**: refactors that turn shallow modules into deep ones. The aim is testability and AI-navigability.
11
-
12
- This command is _informed_ by the project's domain model and built on a shared design vocabulary:
13
-
14
- - Call the Skill tool with "codebase-design" for the architecture vocabulary (**module**, **interface**, **depth**, **seam**, **adapter**, **leverage**, **locality**) and its principles (the deletion test, "the interface is the test surface", "one adapter = hypothetical seam, two = real"). Use these terms exactly in every suggestion, and don't drift into "component," "service," "API," or "boundary."
15
- - The domain language in `CONTEXT.md` gives names to good seams; ADRs in `docs/adr/` record decisions this command should not re-litigate.
16
-
17
- ## Process
18
-
19
- ### 1. Explore
20
-
21
- **Scope before you scan: YAGNI.** Deepening a module pays off by making future changes to it easier, so put extra weight on the parts of the codebase that have recently changed. Decide *where* to look before you look:
22
-
23
- - If the user named a direction (a module, a subsystem, a pain point), take it, and skip the inference below.
24
- - Otherwise, walk back a good stretch of the commit history (`git log --oneline`) to find the codebase's hot spots, the files and areas that keep coming up, and let those paths pull your attention first. If the changes are scattered with no clear hot spot, widen the net.
25
-
26
- Read the project's domain glossary (`CONTEXT.md`) and any ADRs in the area you're touching first.
27
-
28
- Then spawn a sub-agent to walk the codebase. Don't follow rigid heuristics; explore organically and note where you experience friction:
29
-
30
- - Where does understanding one concept require bouncing between many small modules?
31
- - Where are modules **shallow**, with an interface nearly as complex as the implementation?
32
- - Where have pure functions been extracted just for testability, but the real bugs hide in how they're called (no **locality**)?
33
- - Where do tightly-coupled modules leak across their seams?
34
- - Which parts of the codebase are untested, or hard to test through their current interface?
35
-
36
- 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.
37
-
38
- ### 2. Present candidates as an HTML report
39
-
40
- 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.
41
-
42
- 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.
43
-
44
- For each candidate, render a card with:
45
-
46
- - **Files**: which files/modules are involved
47
- - **Problem**: why the current architecture is causing friction
48
- - **Solution**: plain English description of what would change
49
- - **Benefits**: explained in terms of locality and leverage, and how tests would improve
50
- - **Before / After diagram**: side-by-side, custom-drawn, illustrating the shallowness and the deepening
51
- - **Recommendation strength**: one of `Strong`, `Worth exploring`, `Speculative`, rendered as a badge
52
-
53
- End the report with a **Top recommendation** section: which candidate you'd tackle first and why.
54
-
55
- **Use CONTEXT.md vocabulary for the domain, and the `/codebase-design` vocabulary for the architecture.** If `CONTEXT.md` defines "Order," talk about "the Order intake module," not "the FooBarHandler," and not "the Order service."
56
-
57
- **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.
58
-
59
- See [HTML-REPORT.md](HTML-REPORT.md) for the full HTML scaffold, diagram patterns, and styling guidance.
60
-
61
- Do NOT propose interfaces yet. After the file is written, ask the user: "Which of these would you like to explore?"
62
-
63
- ### 3. Grilling loop
64
-
65
- Once the user picks a candidate, call the Skill tool with "grilling" to walk the decision tree with them: constraints, dependencies, the shape of the deepened module, what sits behind the seam, what tests survive.
66
-
67
- Side effects happen inline as decisions crystallize; call the Skill tool with "domain-modeling" to keep the domain model current as you go:
68
-
69
- - **Naming a deepened module after a concept not in `CONTEXT.md`?** Add the term to `CONTEXT.md`. Create the file lazily if it doesn't exist.
70
- - **Sharpening a fuzzy term during the conversation?** Update `CONTEXT.md` right there.
71
- - **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.
72
- - **Want to explore alternative interfaces for the deepened module?** Call the Skill tool with "codebase-design" and use its design-it-twice parallel sub-agent pattern.
@@ -1,4 +0,0 @@
1
- interface:
2
- display_name: "Improve Codebase Architecture"
3
- short_description: "Find and grill architecture improvements"
4
- policy:
@@ -1,21 +0,0 @@
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.
@@ -1,67 +0,0 @@
1
- # Logic Prototype
2
-
3
- A single, self-contained HTML file (a **shareable demo**) that lets anyone drive a state model by clicking buttons. 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
- Because it's one file with nothing to install, you can hand it to a non-developer (a designer, a PM, a domain expert) and let them feel the model for themselves. So it speaks their language, not the code's.
6
-
7
- ## When this is the right shape
8
-
9
- - "I'm not sure if this state machine handles the edge case where X then Y."
10
- - "Does this data model actually let me represent the case where..."
11
- - "I want to feel out what the API should look like before writing it."
12
- - Anything where someone wants to **press buttons and watch state change**.
13
-
14
- If the question is "what should this look like," this is the wrong branch. Use [UI.md](UI.md).
15
-
16
- ## Process
17
-
18
- ### 1. State the question
19
-
20
- Before writing code, write down what state model and what question you're prototyping. One paragraph, at the top of the demo (in a visible intro, not just a comment). A logic prototype that answers the wrong question is pure waste, so make the question explicit so it can be checked later, whether the user is watching now or returning to it AFK.
21
-
22
- ### 2. Isolate the logic in a portable module
23
-
24
- Put the actual logic (the bit that's answering the question) in a single `<script>` block written as a small, pure module that could be lifted out and dropped into the real codebase later. The page around it is throwaway; this module isn't.
25
-
26
- The right shape depends on the question:
27
-
28
- - **A pure reducer**: `(state, action) => state`. Good when actions are discrete events and state is a single value.
29
- - **A state machine**: explicit states and transitions. Good when "which actions are even legal right now" is part of the question.
30
- - **A small set of pure functions** over a plain data type. Good when there's no implicit current state, just transformations.
31
- - **A class or module with a clear method surface** when the logic genuinely owns ongoing internal state.
32
-
33
- Pick whichever shape best fits the question being asked, *not* whichever is easiest to wire to a page. Keep it pure: no DOM, no `document`, no button handlers reaching inside it. The page calls into it; nothing flows the other direction. This is what makes the prototype useful past its own lifetime: once the question's answered, the validated reducer / machine / function set lifts into the real module on its own.
34
-
35
- ### 3. Build the shareable HTML file
36
-
37
- One file, plain HTML/CSS/JS: no framework, no bundler, no server, everything inline so it opens by double-click and survives being emailed around. Anyone should be able to run it by opening it.
38
-
39
- Write it for a non-developer. Every label is in **domain language**, not code: buttons and state read like the business, not the reducer. Explain in plain words what's happening.
40
-
41
- Lay it out with a clean hierarchy, top to bottom:
42
-
43
- 1. **Title and one-line explanation** of what this demo lets you explore (the question from step 1).
44
- 2. **Current state**: the full relevant state, rendered as a readable panel (labelled fields, not a raw JSON dump), re-rendered after every click so the change is visible. Where it helps a non-developer follow, call out what just changed.
45
- 3. **Free-play buttons**: one button per action, always available, so anyone can poke at the model in any order. Each click dispatches its action and re-renders the state.
46
- 4. **Guided walkthroughs**: a set of **scenarios**, one per tab. Each tab holds a short plain-language description of the scenario (the situation it sets up and what to watch for) and underneath it, the ordered **buttons to press** for that scenario. Each step is a real button: clicking it performs that action and moves to the next step. Starting a walkthrough resets to a known initial state so the scenario runs the same way every time.
47
-
48
- Choose scenarios that demonstrate the awkward cases, the ones hard to reason about on paper: the happy path, a tricky edge case, an attempt at something that should be illegal.
49
-
50
- Keep it beautiful but restrained: clean typography, generous spacing, one accent colour. No animations, no gimmicks: nothing that competes with the state and the buttons.
51
-
52
- ### 4. Hand it over
53
-
54
- Send them the file, or open it for them. They'll click through the walkthroughs and free-play whenever they get to it; 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 or a new scenario, add them. Prototypes evolve.
55
-
56
- ### 5. Capture the answer and the prototype
57
-
58
- Once the prototype has answered its question, capture the answer, then capture the prototype the way the [SKILL](SKILL.md) describes. The logic-specific mapping: the validated reducer / machine / function set lifts into the real module (the decision, absorbed); the HTML shell rides along to the throwaway branch that keeps the prototype as a primary source, and being one self-contained file, it stays trivially re-runnable there.
59
-
60
- ## Anti-patterns
61
-
62
- - **Don't add tests.** A prototype that needs tests is no longer a prototype.
63
- - **Don't wire it to the real database.** Use in-memory state unless the question is specifically about persistence.
64
- - **Don't generalise.** No "what if we wanted to support X later." The prototype answers one question.
65
- - **Don't blur the logic and the page together.** If the pure module references the DOM, `document`, or button handlers, it's no longer liftable. Keep the page as a thin shell over a pure module.
66
- - **Don't reach for a framework, bundler, or server.** One file the recipient double-clicks; a React app or a dev server defeats "shareable".
67
- - **Don't ship the HTML shell into production.** The page is optimised for being clicked through by hand. The logic module behind it is the bit worth keeping.
@@ -1,28 +0,0 @@
1
- ---
2
- name: prototype
3
- description: Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
4
- ---
5
-
6
- <!-- Vendored from mattpocock/skills at commit c55ee46073ed923f86ce59a5eb3b6d895095d1b7 (skills/engineering/prototype). MIT licensed — see LICENSE in this directory. -->
7
-
8
- # Prototype
9
-
10
- A prototype is **throwaway code that answers a question**. The question decides the shape.
11
-
12
- ## Pick a branch
13
-
14
- Identify which question is being answered, using the user's prompt, the surrounding code, or by asking if the user is around:
15
-
16
- - **"Does this logic / state model feel right?"** → [LOGIC.md](LOGIC.md). Build a single shareable HTML file (free-play buttons plus tabbed guided walkthroughs) that pushes the state machine through cases that are hard to reason about on paper, and that a non-developer can drive.
17
- - **"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.
18
-
19
- The two branches produce very different artifacts, so 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.
20
-
21
- ## Rules that apply to both
22
-
23
- 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.
24
- 2. **Trivial to run.** A UI prototype starts from one command in the project's task runner: `pnpm <name>`, `python <path>`, `bun <path>`, etc. A logic demo is a single HTML file the user double-clicks. Either way, no thinking required to start it.
25
- 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.
26
- 4. **Skip the polish.** No tests, no error handling beyond what makes the prototype _runnable_, no abstractions. The point is to learn something fast.
27
- 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.
28
- 6. **Capture it when done.** Fold any validated decision into the real code, then capture the prototype itself as a **primary source**: commit it to a throwaway branch, out of main, and leave a context pointer to that branch on the implementation issue. Capture the answer too (the verdict and the question it settled) in the issue or a commit. The main branch keeps only the validated decision.
@@ -1,112 +0,0 @@
1
- # UI Prototype
2
-
3
- Generate **several radically different UI variations** on a single route, switchable from a floating bottom bar. The user flips between variants in the browser, picks one (or steals bits from each), then throws the rest away.
4
-
5
- If the question is about logic/state rather than what something looks like, this is the wrong branch. Use [LOGIC.md](LOGIC.md).
6
-
7
- ## When this is the right shape
8
-
9
- - "What should this page look like?"
10
- - "I want to see a few options for this dashboard before committing."
11
- - "Try a different layout for the settings screen."
12
- - Any time the user would otherwise spend a day picking between three vague mockups in their head.
13
-
14
- ## Two sub-shapes: strongly prefer sub-shape A
15
-
16
- A UI prototype is much easier to judge when it's **butting up against the rest of the app**: real header, real sidebar, real data, real density. A throwaway route on its own is a vacuum: every variant looks fine in isolation. Default to sub-shape A whenever there's a plausible existing page to host the variants. Only reach for sub-shape B if the prototype genuinely has no nearby home.
17
-
18
- ### Sub-shape A: adjustment to an existing page (preferred)
19
-
20
- The route already exists. Variants are rendered **on the same route**, gated by a `?variant=` URL search param. The existing data fetching, params, and auth all stay. Only the rendering swaps. This is the default; pick it unless there's a specific reason not to.
21
-
22
- If the prototype is for something that doesn't yet have a page but *would naturally live inside one* (a new section of the dashboard, a new card on the settings screen, a new step in an existing flow), it's still sub-shape A. Mount the variants inside the host page.
23
-
24
- ### Sub-shape B: a new page (last resort)
25
-
26
- Only use this when the thing being prototyped genuinely has no existing page to live inside (e.g. an entirely new top-level surface, or a flow that can't be embedded anywhere sensible).
27
-
28
- Create a **throwaway route** following whatever routing convention the project already uses. Don't invent a new top-level structure. Name it so it's obviously a prototype (e.g. include the word `prototype` in the path or filename). Same `?variant=` pattern.
29
-
30
- Before committing to sub-shape B, sanity-check: is there really no existing page this could be embedded in? An empty route hides design problems that a populated one would expose.
31
-
32
- In both sub-shapes the floating bottom bar is identical.
33
-
34
- ## Process
35
-
36
- ### 1. State the question and pick N
37
-
38
- Default to **3 variants**. More than 5 stops being radically different and starts being noise, so cap there.
39
-
40
- Write down the plan in one line, in the prototype's location or a top-of-file comment:
41
-
42
- > "Three variants of the settings page, switchable via `?variant=`, on the existing `/settings` route."
43
-
44
- This works whether the user is here to push back or not.
45
-
46
- ### 2. Generate radically different variants
47
-
48
- Draft each variant. Hold each one to:
49
-
50
- - The page's purpose and the data it has access to.
51
- - The project's component library / styling system (TailwindCSS, shadcn, MUI, plain CSS, whatever).
52
- - A clear exported component name, e.g. `VariantA`, `VariantB`, `VariantC`.
53
-
54
- Variants must be **structurally different**: different layout, different information hierarchy, different primary affordance, not just different colours. Three slightly-tweaked card grids isn't a UI prototype, it's wallpaper. If two drafts come out too similar, redo one with explicit "do not use a card grid" guidance.
55
-
56
- ### 3. Wire them together
57
-
58
- Create a single switcher component on the route:
59
-
60
- ```tsx
61
- // pseudo-code, adapt to the project's framework
62
- const variant = searchParams.get('variant') ?? 'A';
63
- return (
64
- <>
65
- {variant === 'A' && <VariantA {...data} />}
66
- {variant === 'B' && <VariantB {...data} />}
67
- {variant === 'C' && <VariantC {...data} />}
68
- <PrototypeSwitcher variants={['A','B','C']} current={variant} />
69
- </>
70
- );
71
- ```
72
-
73
- For sub-shape A (existing page): keep all the existing data fetching above the switcher; only the rendered subtree changes per variant.
74
-
75
- For sub-shape B (new page): the throwaway route under `/prototype/<name>` mounts the same switcher.
76
-
77
- ### 4. Build the floating switcher
78
-
79
- A small fixed-position bar at the bottom-centre of the screen with three pieces:
80
-
81
- - **Left arrow**: cycles to the previous variant (wraps around).
82
- - **Variant label**: shows the current variant key and, if the variant exports a name, that name too. e.g. `B (Sidebar layout)`.
83
- - **Right arrow**: cycles forward (wraps around).
84
-
85
- Behaviour:
86
-
87
- - Clicking an arrow updates the URL search param (use the framework's router, e.g. `router.replace` on Next, `navigate` on React Router, etc) so the variant is shareable and reload-stable.
88
- - Keyboard: `←` and `→` arrow keys also cycle. Don't intercept arrow keys when an `<input>`, `<textarea>`, or `[contenteditable]` is focused.
89
- - Visually distinct from the page (e.g. high-contrast pill, subtle shadow) so it's obviously not part of the design being evaluated.
90
- - Hidden in production builds: gate on `process.env.NODE_ENV !== 'production'` or an equivalent check, so a stray prototype merge can't ship the bar to users.
91
-
92
- Put the switcher in a single shared component so both sub-shapes can reuse it. Locate it wherever shared UI lives in the project.
93
-
94
- ### 5. Hand it over
95
-
96
- Surface the URL (and the `?variant=` keys). The user will flip through whenever they get to it. The interesting feedback is usually **"I want the header from B with the sidebar from C"**, which is the actual design they want.
97
-
98
- ### 6. Capture the answer and clean up
99
-
100
- Once a variant has won, capture the answer (which variant and why), then capture the prototype the way the [SKILL](SKILL.md) describes. Fold the winner into the real code and move the rest onto the throwaway branch, not into main:
101
-
102
- - **Sub-shape A**: fold the winner into the existing page; drop the losing variants and the switcher from main.
103
- - **Sub-shape B**: promote the winning variant to a real route; drop the throwaway route and the switcher from main.
104
-
105
- The full set of variants is the primary source, so it lands on the throwaway branch, not the bin, since variant components and the switcher left in the main branch rot fast and confuse the next reader.
106
-
107
- ## Anti-patterns
108
-
109
- - **Variants that differ only in colour or copy.** That's a tweak, not a prototype. Real variants disagree about structure.
110
- - **Sharing too much code between variants.** A shared `<Header>` is fine; a shared `<Layout>` defeats the point. Each variant should be free to throw out the layout.
111
- - **Wiring variants to real mutations.** Read-only prototypes are fine. If a variant needs to mutate, point it at a stub: the question is "what should this look like", not "does the backend work".
112
- - **Promoting the prototype directly to production.** The variant code was written under prototype constraints (no tests, minimal error handling). Rewrite it properly when you fold it in.
@@ -1,3 +0,0 @@
1
- interface:
2
- display_name: "Prototype"
3
- short_description: "Prototype to answer a design question"
@@ -1,21 +0,0 @@
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.
@@ -1,14 +0,0 @@
1
- ---
2
- name: research
3
- description: Investigate a question against high-trust primary sources and capture the findings as a Markdown file in the repo. Use when the user wants a topic researched, docs or API facts gathered, or reading legwork delegated to a background agent.
4
- ---
5
-
6
- <!-- Vendored from mattpocock/skills at commit c55ee46073ed923f86ce59a5eb3b6d895095d1b7 (skills/engineering/research). MIT licensed — see LICENSE in this directory. -->
7
-
8
- Spin up a **background agent** to do the research, so you keep working while it reads.
9
-
10
- Its job:
11
-
12
- 1. Investigate the question against **primary sources** (official docs, source code, specs, first-party APIs), not a secondary write-up of them. Follow every claim back to the source that owns it.
13
- 2. Write the findings to a single Markdown file, citing each claim's source.
14
- 3. Save it where the repo already keeps such notes; match the existing convention, and if there is none, put it somewhere sensible and say where.
@@ -1,3 +0,0 @@
1
- interface:
2
- display_name: "Research"
3
- short_description: "Research from high-trust sources"
@@ -1,21 +0,0 @@
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.
@@ -1,16 +0,0 @@
1
- ---
2
- name: resolving-merge-conflicts
3
- description: "Use when you need to resolve an in-progress git merge/rebase conflict."
4
- ---
5
-
6
- <!-- Vendored from mattpocock/skills at commit c55ee46073ed923f86ce59a5eb3b6d895095d1b7 (skills/engineering/resolving-merge-conflicts). MIT licensed — see LICENSE in this directory. -->
7
-
8
- 1. **See the current state** of the merge/rebase. Check git history, and the conflicting files.
9
-
10
- 2. **Find the primary sources** for each conflict. Understand deeply why each change was made, and what the original intent was. Read the commit messages, check the PRs, check original issues/tickets.
11
-
12
- 3. **Resolve each hunk.** Preserve both intents where possible. Where incompatible, pick the one matching the merge's stated goal and note the trade-off. Do **not** invent new behaviour. Always resolve; never `--abort`.
13
-
14
- 4. Discover the project's **automated checks** and run them, typically typecheck, then tests, then format. Fix anything the merge broke.
15
-
16
- 5. **Finish the merge/rebase.** Stage everything and commit. If rebasing, continue the rebase process until all commits are rebased.
@@ -1,3 +0,0 @@
1
- interface:
2
- display_name: "Resolving Merge Conflicts"
3
- short_description: "Resolve merge and rebase conflicts"
@@ -1,21 +0,0 @@
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.
@@ -1,40 +0,0 @@
1
- ---
2
- name: tdd
3
- description: Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
4
- ---
5
-
6
- <!-- Vendored from mattpocock/skills at commit c55ee46073ed923f86ce59a5eb3b6d895095d1b7 (skills/engineering/tdd). MIT licensed — see LICENSE in this directory. -->
7
-
8
- # Test-Driven Development
9
-
10
- TDD is the red → green loop. This skill is the reference that makes that loop produce tests worth keeping: what a good test is, where tests go, the anti-patterns, and the rules of the loop. Every section applies on every cycle: consult them before and during the loop, not after.
11
-
12
- When exploring the codebase, read `CONTEXT.md` (if it exists) so test names and interface vocabulary match the project's domain language, and respect ADRs in the area you're touching.
13
-
14
- ## What a good test is
15
-
16
- Tests verify behavior through public interfaces, not implementation details. Code can change entirely; tests shouldn't. A good test reads like a specification: "user can checkout with valid cart" tells you exactly what capability exists, and it survives refactors because it doesn't care about internal structure.
17
-
18
- See [tests.md](tests.md) for examples and [mocking.md](mocking.md) for mocking guidelines.
19
-
20
- ## Seams: where tests go
21
-
22
- A **seam** is the public boundary you test at: the interface where you observe behavior without reaching inside. Tests live at seams, never against internals.
23
-
24
- **Test only at pre-agreed seams.** Before writing any test, write down the seams under test and confirm them with the user. No test is written at an unconfirmed seam. You can't test everything, so agreeing the seams up front is how testing effort lands on the critical paths and complex logic instead of every edge case.
25
-
26
- Ask: "What's the public interface, and which seams should we test?"
27
-
28
- When the shape of that interface is itself in question (how deep the module is, where the seam belongs, what the interface should expose), call the Skill tool with "codebase-design" for the vocabulary. It is the shared source of the module, interface, depth, seam, adapter, leverage and locality terms, and it is a reference to consult, not a session to run.
29
-
30
- ## Anti-patterns
31
-
32
- - **Implementation-coupled**: mocks internal collaborators, tests private methods, or verifies through a side channel (querying the database instead of using the interface). The tell: the test breaks when you refactor but behavior hasn't changed.
33
- - **Tautological**: the assertion recomputes the expected value the way the code does (`expect(add(a, b)).toBe(a + b)`, a snapshot derived by hand the same way, a constant asserted equal to itself), so it passes by construction and can never disagree with the code. Expected values must come from an independent source of truth: a known-good literal, a worked example, the spec.
34
- - **Horizontal slicing**: writing all tests first, then all implementation. Bulk tests verify _imagined_ behavior: you test the _shape_ of things rather than user-facing behavior, the tests go insensitive to real changes, and you commit to test structure before understanding the implementation. Work in **vertical slices** instead: one test → one implementation → repeat, each test a **tracer bullet** that responds to what the last cycle taught you.
35
-
36
- ## Rules of the loop
37
-
38
- - **Red before green.** Write the failing test first, then only enough code to pass it. Don't anticipate future tests or add speculative features.
39
- - **One slice at a time.** One seam, one test, one minimal implementation per cycle.
40
- - **Refactoring is not part of the loop.** It belongs to the review stage (see the `code-review` skill), not the red → green implementation cycle.
@@ -1,3 +0,0 @@
1
- interface:
2
- display_name: "TDD"
3
- short_description: "Test-driven red-green-refactor"
@@ -1,59 +0,0 @@
1
- # When to Mock
2
-
3
- Mock at **system boundaries** only:
4
-
5
- - External APIs (payment, email, etc.)
6
- - Databases (sometimes - prefer test DB)
7
- - Time/randomness
8
- - File system (sometimes)
9
-
10
- Don't mock:
11
-
12
- - Your own classes/modules
13
- - Internal collaborators
14
- - Anything you control
15
-
16
- ## Designing for Mockability
17
-
18
- At system boundaries, design interfaces that are easy to mock:
19
-
20
- **1. Use dependency injection**
21
-
22
- Pass external dependencies in rather than creating them internally:
23
-
24
- ```typescript
25
- // Easy to mock
26
- function processPayment(order, paymentClient) {
27
- return paymentClient.charge(order.total);
28
- }
29
-
30
- // Hard to mock
31
- function processPayment(order) {
32
- const client = new StripeClient(process.env.STRIPE_KEY);
33
- return client.charge(order.total);
34
- }
35
- ```
36
-
37
- **2. Prefer SDK-style interfaces over generic fetchers**
38
-
39
- Create specific functions for each external operation instead of one generic function with conditional logic:
40
-
41
- ```typescript
42
- // GOOD: Each function is independently mockable
43
- const api = {
44
- getUser: (id) => fetch(`/users/${id}`),
45
- getOrders: (userId) => fetch(`/users/${userId}/orders`),
46
- createOrder: (data) => fetch('/orders', { method: 'POST', body: data }),
47
- };
48
-
49
- // BAD: Mocking requires conditional logic inside the mock
50
- const api = {
51
- fetch: (endpoint, options) => fetch(endpoint, options),
52
- };
53
- ```
54
-
55
- The SDK approach means:
56
- - Each mock returns one specific shape
57
- - No conditional logic in test setup
58
- - Easier to see which endpoints a test exercises
59
- - Type safety per endpoint
@@ -1,77 +0,0 @@
1
- # Good and Bad Tests
2
-
3
- ## Good Tests
4
-
5
- **Integration-style**: Test through real interfaces, not mocks of internal parts.
6
-
7
- ```typescript
8
- // GOOD: Tests observable behavior
9
- test("user can checkout with valid cart", async () => {
10
- const cart = createCart();
11
- cart.add(product);
12
- const result = await checkout(cart, paymentMethod);
13
- expect(result.status).toBe("confirmed");
14
- });
15
- ```
16
-
17
- Characteristics:
18
-
19
- - Tests behavior users/callers care about
20
- - Uses public API only
21
- - Survives internal refactors
22
- - Describes WHAT, not HOW
23
- - One logical assertion per test
24
-
25
- ## Bad Tests
26
-
27
- **Implementation-detail tests**: Coupled to internal structure.
28
-
29
- ```typescript
30
- // BAD: Tests implementation details
31
- test("checkout calls paymentService.process", async () => {
32
- const mockPayment = jest.mock(paymentService);
33
- await checkout(cart, payment);
34
- expect(mockPayment.process).toHaveBeenCalledWith(cart.total);
35
- });
36
- ```
37
-
38
- Red flags:
39
-
40
- - Mocking internal collaborators
41
- - Testing private methods
42
- - Asserting on call counts/order
43
- - Test breaks when refactoring without behavior change
44
- - Test name describes HOW not WHAT
45
- - Verifying through external means instead of interface
46
-
47
- ```typescript
48
- // BAD: Bypasses interface to verify
49
- test("createUser saves to database", async () => {
50
- await createUser({ name: "Alice" });
51
- const row = await db.query("SELECT * FROM users WHERE name = ?", ["Alice"]);
52
- expect(row).toBeDefined();
53
- });
54
-
55
- // GOOD: Verifies through interface
56
- test("createUser makes user retrievable", async () => {
57
- const user = await createUser({ name: "Alice" });
58
- const retrieved = await getUser(user.id);
59
- expect(retrieved.name).toBe("Alice");
60
- });
61
- ```
62
-
63
- **Tautological tests**: Expected value restates the implementation, so the test passes by construction.
64
-
65
- ```typescript
66
- // BAD: Expected value is recomputed the way the code computes it
67
- test("calculateTotal sums line items", () => {
68
- const items = [{ price: 10 }, { price: 5 }];
69
- const expected = items.reduce((sum, i) => sum + i.price, 0);
70
- expect(calculateTotal(items)).toBe(expected);
71
- });
72
-
73
- // GOOD: Expected value is an independent, known literal
74
- test("calculateTotal sums line items", () => {
75
- expect(calculateTotal([{ price: 10 }, { price: 5 }])).toBe(15);
76
- });
77
- ```