kataster 0.3.0 → 0.3.1

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.
@@ -0,0 +1,69 @@
1
+ # Third-party notices
2
+
3
+ Kataster's workflow is partly derived from other people's work. This file says what came from where, so the credit
4
+ travels with the payload: it is copied into every installation together with the skills.
5
+
6
+ Everything not listed here is original to Kataster.
7
+
8
+ ## Matt Pocock – Skills for Real Engineers
9
+
10
+ - Upstream: <https://github.com/mattpocock/skills>
11
+ - Site: <https://www.aihero.dev/skills>
12
+ - License: MIT, Copyright (c) 2026 Matt Pocock (full text below)
13
+
14
+ The grilling interview, the deep-module vocabulary, the test-first loop, the architecture survey, the throwaway
15
+ prototype and the `writing-for-agents` reference are his. Some files are copied verbatim, others are adapted to
16
+ Kataster's artifacts (`CONTEXT.md` instead of `GLOSSARY.md`, the `skill` tool name in OpenCode, the seam catalog,
17
+ the review agents):
18
+
19
+ | In Kataster | Upstream | State |
20
+ |---|---|---|
21
+ | `.claude/skills/grilling/SKILL.md` | `skills/productivity/grilling/SKILL.md` | adapted (naming, sub-agent wording) |
22
+ | `.claude/skills/grill-me/SKILL.md` | `skills/productivity/grill-me/SKILL.md` | copied (tool name) |
23
+ | `.claude/skills/grill-with-docs/SKILL.md` | `skills/engineering/grill-with-docs/SKILL.md` | adapted |
24
+ | `.claude/skills/writing-for-agents/SKILL.md` | `skills/productivity/writing-for-agents/SKILL.md` | copied verbatim |
25
+ | `.claude/skills/writing-for-agents/SKILL-MECHANICS.md` | `skills/productivity/writing-for-agents/SKILL-MECHANICS.md` | copied verbatim |
26
+ | `.claude/skills/codebase-design/SKILL.md` | `skills/engineering/codebase-design/SKILL.md` | copied verbatim |
27
+ | `.claude/skills/codebase-design/DEEPENING.md` | `skills/engineering/codebase-design/DEEPENING.md` | copied verbatim |
28
+ | `.claude/skills/codebase-design/DESIGN-IT-TWICE.md` | `skills/engineering/codebase-design/DESIGN-IT-TWICE.md` | adapted |
29
+ | `.claude/skills/tdd/SKILL.md` | `skills/engineering/tdd/SKILL.md` | adapted (glossary, seam catalog) |
30
+ | `.claude/skills/improve-codebase-architecture/SKILL.md` | `skills/engineering/improve-codebase-architecture/SKILL.md` | adapted (glossary, tool name) |
31
+ | `.claude/skills/retro/SKILL.md` | `skills/engineering/retro/SKILL.md` | adapted |
32
+ | `.claude/skills/domain-model/SKILL.md` | `skills/engineering/domain-modeling/SKILL.md` | adapted (contexts, aggregates, data model) |
33
+ | `.claude/skills/prototype/SKILL.md` | `skills/engineering/prototype/SKILL.md` | adapted (standalone HTML in discovery, story/guideline capture, timebox) |
34
+ | `.claude/skills/prototype/UI.md` | `skills/engineering/prototype/UI.md` | adapted (standalone default, in-app exception, Kataster artifacts) |
35
+ | `.claude/skills/prototype/LOGIC.md` | `skills/engineering/prototype/LOGIC.md` | adapted (Kataster artifacts) |
36
+
37
+ Agents and commands built on top of them (`/implement`, `/feature`, `/review-stories`, `/groom-backlog`,
38
+ `/shape`, the review agents in `.claude/agents/`) are Kataster's own, but they stand on the same ideas: grilling as
39
+ a design-tree interview on the frontier, facts looked up rather than asked, decisions left to the user.
40
+
41
+ ## Other ideas
42
+
43
+ - **John Ousterhout**, *A Philosophy of Software Design* – "Design It Twice" is the model for the parallel-interface
44
+ exercise in `codebase-design`; depth, seam and the deletion test shape its vocabulary.
45
+ - **Eric Evans**, *Domain-Driven Design* – ubiquitous language, bounded contexts and aggregates shape the domain
46
+ model and the glossary in `CONTEXT.md`.
47
+ - **Martin Fowler** – the smell baseline behind the review agents.
48
+
49
+ ## MIT License
50
+
51
+ Copyright (c) 2026 Matt Pocock
52
+
53
+ Permission is hereby granted, free of charge, to any person obtaining a copy
54
+ of this software and associated documentation files (the "Software"), to deal
55
+ in the Software without restriction, including without limitation the rights
56
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
57
+ copies of the Software, and to permit persons to whom the Software is
58
+ furnished to do so, subject to the following conditions:
59
+
60
+ The above copyright notice and this permission notice shall be included in all
61
+ copies or substantial portions of the Software.
62
+
63
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
64
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
65
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
66
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
67
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
68
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
69
+ SOFTWARE.
@@ -35,6 +35,8 @@ In a **story review** (task from `/review-stories`) add two lenses:
35
35
  8. **UX lens** (label `ui` only): the screen's job and entry point are named; the empty, rejected and
36
36
  no-permission cases have a scenario; UI wording matches the glossary's `_UI (<lang>)_`. A pattern the
37
37
  guidelines already define is referenced by its G-number, not restated as scenarios – name restated ones.
38
+ A screen whose structural shape is still open is not `ready`: recommend a prototype (`/feature --prototype`
39
+ or a spike) instead of approving it.
38
40
 
39
41
  ## Boundaries
40
42
  - In stories you only change `size`, `risk`, `depends_on` and – in a story review – `priority`. Return everything else as a recommendation.
@@ -1,18 +1,19 @@
1
1
  ---
2
2
  name: ux-designer
3
- description: UX/UI designer. Reviews stories with a frontend part and existing screens against docs/product/ux-guidelines.md, and maintains those guidelines. Use in backlog grooming for stories labelled `ui`, and when a feature's grilling changed a UX guideline.
3
+ description: UX/UI designer. Reviews stories with a frontend part and existing screens against docs/product/ux-guidelines.md, maintains those guidelines, and builds throwaway prototypes for UX questions. Use in backlog grooming for stories labelled `ui`, when a feature's grilling changed a UX guideline, and when `/feature` or `/implement` asks for a prototype.
4
4
  tools: Read, Glob, Grep, Write, Edit
5
5
  model: sonnet
6
6
  color: pink
7
7
  skills:
8
8
  - ux-design
9
9
  - user-stories
10
+ - prototype
10
11
  hooks:
11
12
  PreToolUse:
12
13
  - matcher: "Write|Edit"
13
14
  hooks:
14
15
  - type: command
15
- command: 'node "$CLAUDE_PROJECT_DIR/.claude/hooks/path-guard.ts" docs/product/ux-guidelines.md docs/reviews/'
16
+ command: 'node "$CLAUDE_PROJECT_DIR/.claude/hooks/path-guard.ts" docs/product/ux-guidelines.md docs/reviews/ docs/prototypes/'
16
17
  ---
17
18
 
18
19
  You are the UX/UI designer of this project, whose interface its users meet in the situations
@@ -27,6 +28,7 @@ Write in the artifact language (`languages.artifacts` in `.claude/project.json`,
27
28
  - `docs/engineering/conventions.md` – the page frame, the design size, component rules, where the
28
29
  message catalogs live. What is decided there is not yours to re-decide.
29
30
  - The method, the question set and the review order: the preloaded skill `ux-design`.
31
+ - The prototype method, its two branches and its capture rules: the preloaded skill `prototype`.
30
32
 
31
33
  ## Tasks
32
34
  1. **Story review** – per story with a frontend part: is the screen's job clear, is the entry point named, do the
@@ -38,11 +40,18 @@ Write in the artifact language (`languages.artifacts` in `.claude/project.json`,
38
40
  with the date and the reason. Keep it short enough that someone reads it before writing a page.
39
41
  4. **Gaps** – which recurring interface question has no guideline yet, and which existing screens contradict each
40
42
  other?
43
+ 5. **Prototype** – when the main session delegates a UX question that cannot be settled on paper, build the
44
+ throwaway prototype under `docs/prototypes/<slug>/`: state the question and the branch (`ui` or `logic`) at
45
+ the top, use the domain language, no tests, no persistence, no application code. Return the verdict and the
46
+ branch pointer (`prototype/<slug>`).
41
47
 
42
48
  ## Boundaries
43
49
  - **You never write stories.** Everything that belongs in a story comes back as a recommendation – the
44
50
  `requirements-engineer` applies it. The same rule the product-owner and the lead-dev follow.
45
- - You never write application code, tests or the engineering conventions.
51
+ - You never write **production** application code, tests or the engineering conventions. A prototype is
52
+ throwaway: it lives under `docs/prototypes/`, is captured on a throwaway branch and is never merged. A
53
+ question that needs the real application page is built by the main session; you define the question and the
54
+ variants and review the result.
46
55
  - No implementation detail in what you propose: no component names, no classes, no pixel values. Observable
47
56
  behaviour and words, not markup.
48
57
  - Make no assumptions where the vision or the guidelines are silent: return them as questions, each with a
@@ -57,7 +66,8 @@ A table of findings:
57
66
  | Story / screen | Level (job / understanding / states / language / consistency / polish) | Severity (blocker, major, minor) | Finding | What to do instead |
58
67
 
59
68
  Below it: the scenarios or Context lines you propose per story (ready for the requirements-engineer to apply), the
60
- guidelines you would add, and at most 3 questions for the user, each with a recommended answer.
69
+ guidelines you would add, and at most 3 questions for the user, each with a recommended answer. When you built a
70
+ prototype, add its question, branch, verdict and pointer (`prototype/<slug>`) so the main session can pass it on.
61
71
 
62
72
  Severity means: **blocker** – the person cannot do the job, or cannot on a phone; **major** – they can, but will
63
73
  get it wrong, misread it or not find it; **minor** – it works and is understood, but is inconsistent or clumsy.
@@ -1,14 +1,16 @@
1
1
  ---
2
2
  name: feature
3
- description: Entry point for a new feature or change once the initial discovery is done – accepts a free-text idea, an existing story (`ST-NNN`) or a ticket (`#123`, `PROJ-123`, URL), grills the idea, runs a focused event storming, updates domain model and ADRs, derives stories into the backlog (local, or the tracker mirror) and runs the story review; bug tickets go to a regression story instead.
3
+ description: Entry point for a new feature or change once the initial discovery is done – accepts a free-text idea, an existing story (`ST-NNN`) or a ticket (`#123`, `PROJ-123`, URL), grills the idea, runs a focused event storming, updates domain model and ADRs, derives stories into the backlog (local, or the tracker mirror) and runs the story review; bug tickets go to a regression story instead; `--prototype` adds a throwaway prototype before the stories.
4
4
  disable-model-invocation: true
5
- argument-hint: "<idea | ST-NNN | #issue | PROJ-123 | URL>"
5
+ argument-hint: "<idea | ST-NNN | #issue | PROJ-123 | URL> [--prototype[=ui|logic]]"
6
6
  ---
7
7
 
8
8
  # New Feature
9
9
 
10
10
  The argument is a feature idea, an existing story or a ticket. Empty → ask the user for it first.
11
11
  Pick a short kebab-case slug for it (e.g. `order-photos`); stories get the label `feature:<slug>`.
12
+ `--prototype[=ui|logic]` is a flag, not part of the idea: strip it before resolving a reference. It asks for a
13
+ prototype before the stories are written; without a branch the `prototype` skill picks it from the question.
12
14
 
13
15
  ## 0. Intake – when the argument is a reference
14
16
 
@@ -28,7 +30,7 @@ Follow the route:
28
30
  |---|---|
29
31
  | `continue-story` | Read that story and treat it as the idea. Its open questions are the first grilling frontier. Do not create a parallel feature. |
30
32
  | `review-story` | Stop; run `/review-stories <id>` (or revise the story if it is still being written). |
31
- | `implement-story` | Stop; the next command is `/implement <id>`. |
33
+ | `implement-story` | Stop; the next command is `/implement <id>` – with `--prototype` if the user asked for one. |
32
34
  | `new-story` | Finished behaviour is final; continue as a new feature and name the old story as the predecessor. |
33
35
  | `bug` | Use the bug path below, not the feature pipeline. |
34
36
  | `feature` | Continue with step 1. |
@@ -63,24 +65,48 @@ Call the `skill` tool four times, for `grilling`, `domain-model`, `architect` an
63
65
  - **Lead dev**: Which existing code, data and stories change? Is there a migration? What is hard to test? Where does it cut into stories – each a vertical slice of at most ~10 scenarios?
64
66
  - Which existing processes, events and stories does it change? What's explicitly out of scope?
65
67
  - **UX – does a person see anything?** Almost always yes – then the UX frontier of `ux-design` belongs in the rounds: entry point, the screen's one job, what is shown before acting, what happens afterwards, the rejected, empty, full and no-permission cases, and the UI wording. A feature whose screens nobody named gets them by accident. Stories with a frontend part get the label `ui`.
68
+ - **Prototype – is paper enough?** When the UX frontier leaves a structural layout choice, a flow or a state model that cannot be settled in words, the UX lens proposes a prototype: one question, the branch (`ui` or `logic`), the variants or scenarios, and a timebox. The user decides. `--prototype` makes it explicit. Do not propose one for polish or for a question a guideline already answers. If it is agreed, run step 2b before the event storming.
66
69
  - New or changed terms → `CONTEXT.md` inline.
67
70
  - An architectural trade-off → ADR (`status: proposed`) only if the architect skill's three criteria hold.
68
71
 
69
72
  Don't move on before the user confirms.
70
73
 
74
+ ## 2b. Prototype (optional)
75
+
76
+ Only when the user asked (`--prototype`) or the grilling agreed on it. Load the `prototype` skill and follow
77
+ it. In short:
78
+
79
+ 1. **Question and branch.** Name the one question and pick `ui` (what should it look like) or `logic` (does
80
+ the state model feel right). Write both at the top of the prototype and in its `README.md`.
81
+ 2. **Delegate to `ux-designer`** with the question, the branch, the variants/scenarios, the timebox and the
82
+ target `docs/prototypes/<slug>/`. It writes a self-contained HTML prototype there – no application code,
83
+ no tests, no persistence, no shell.
84
+ 3. **The user looks and decides.** Open the file, flip the variants or press the buttons. The verdict is the
85
+ user's, not the agent's.
86
+ 4. **Capture.** The decision goes to `ux-designer` for `docs/product/ux-guidelines.md` (a G-number when it is
87
+ a recurring rule). Commit `docs/prototypes/<slug>/` on a throwaway branch `prototype/<slug>`, push it only
88
+ if the user wants to share it, then return to the branch you were on. The branch is never merged.
89
+ 5. **Into the story.** Pass the verdict and the branch pointer to `requirements-engineer` in section 5: the
90
+ story's `## Context` gets `Prototype: prototype/<slug> – <question> – <verdict>`, and the scenarios reflect
91
+ the decision. The `ux-designer` never writes the story itself.
92
+
93
+ If the question needs the real application (an existing page, real data), say so: that is an in-app prototype
94
+ and belongs to `/implement`, not to discovery. If the prototype does not answer the question within its
95
+ timebox, stop and record what is known.
96
+
71
97
  ## 3. Focused event storming
72
98
  Read `.claude/skills/event-storming/SKILL.md` and follow it with the feature as focus: phases 1–6 (phase 0 is covered by step 2), 7–8 only if aggregates or contexts are affected. Capture the feature as its own flow (`FLOW-<FeatureName>`) and write `docs/domain/events.yaml` after every phase.
73
99
 
74
100
  ## 4. Domain model & architecture
75
101
  - Contexts, aggregates or the data model affected → delegate to `domain-architect` with the file paths, the changed/new IDs from `events.yaml` and a clear task.
76
102
  - An architectural trade-off came up that wasn't recorded during grilling → offer an ADR per the architect skill's three criteria (`status: proposed`, the user accepts).
77
- - A UX decision changes or adds a guideline → delegate to `ux-designer`: write exactly these decisions into `docs/product/ux-guidelines.md`. The audit of existing screens belongs to `/groom-backlog`, not to the feature.
103
+ - A UX decision changes or adds a guideline → delegate to `ux-designer`: write exactly these decisions into `docs/product/ux-guidelines.md`. A prototype verdict is a decision like any other; the branch pointer and the verdict go into the story through step 5. The audit of existing screens belongs to `/groom-backlog`, not to the feature.
78
104
 
79
105
  ## 5. Stories
80
- Delegate to `requirements-engineer`: derive stories for the feature's new or changed commands, policies and read models; name the event/command IDs, the label `feature:<slug>`, the label `ui` for every story with a frontend part, the label `bug` for the bug path, the source reference (`Source: <ref> (<url>)`) for every story derived from a ticket, the UX decisions from step 2 (with the G-numbers of the guidelines they reference), the story cut from step 2, and existing stories that need revising. Finished stories get `status: review`; have it report the IDs of all stories it created or revised.
106
+ Delegate to `requirements-engineer`: derive stories for the feature's new or changed commands, policies and read models; name the event/command IDs, the label `feature:<slug>`, the label `ui` for every story with a frontend part, the label `bug` for the bug path, the source reference (`Source: <ref> (<url>)`) for every story derived from a ticket, the UX decisions from step 2 (with the G-numbers of the guidelines they reference), the prototype verdict and branch pointer from step 2b, the story cut from step 2, and existing stories that need revising. Finished stories get `status: review`; have it report the IDs of all stories it created or revised.
81
107
 
82
108
  ## 6. Review
83
109
  Read `.claude/skills/review-stories/SKILL.md` and follow it with the story IDs from step 5 as the arguments (only this feature's stories, not everything in `review`). The user still approves every change and every `ready`.
84
110
 
85
111
  ## 7. Wrap-up
86
- Summarize: the source and the route taken (idea, ticket, existing story or bug), glossary changes, new/changed events, ADRs proposed, stories created and their review outcome (`ready` vs. still open), open hotspots/questions. Point to `docs/stories/BACKLOG.md`, where `ready` stories are queued for the engineering workflow. For a bug, say which documented rule was restored, or that the rule changed and became a feature.
112
+ Summarize: the source and the route taken (idea, ticket, existing story or bug), glossary changes, new/changed events, ADRs proposed, a prototype run and its verdict (if any), stories created and their review outcome (`ready` vs. still open), open hotspots/questions. Point to `docs/stories/BACKLOG.md`, where `ready` stories are queued for the engineering workflow. For a bug, say which documented rule was restored, or that the rule changed and became a feature.
@@ -50,7 +50,8 @@ Start in **one** message, with the full file paths, the scope and the change lis
50
50
  smaller because the foundation is there, which bigger? Which dependency is technical fiction? Which story should
51
51
  be split, merged or dropped?
52
52
  - `ux-designer` – only for stories with the label `ui` (or an obvious frontend part): does the story still match
53
- `docs/product/ux-guidelines.md`, and which one builds a screen that a newer story has replaced?
53
+ `docs/product/ux-guidelines.md`, which one builds a screen that a newer story has replaced, and is there an open
54
+ UX question that needs a prototype (the `prototype` skill) before the story can be reviewed again?
54
55
 
55
56
  Tell each one explicitly: **recommend, don't rewrite** – they change only the frontmatter fields they own
56
57
  (`priority` for the PO, `size`/`risk`/`depends_on` for the lead dev), everything else comes back as a proposal.
@@ -1,15 +1,15 @@
1
1
  ---
2
2
  name: implement
3
- description: Engineering workflow – implements one story from docs/stories/ test-first on its own branch, verifies, has it reviewed by code-reviewer and acceptance-tester, refactors, and sets it `done` on the acceptance tester's verdict and hands the pull request to the user to merge.
3
+ description: Engineering workflow – implements one story from docs/stories/ test-first on its own branch, verifies, has it reviewed by code-reviewer and acceptance-tester, refactors, and sets it `done` on the acceptance tester's verdict and hands the pull request to the user to merge; `--prototype` settles an open UI question first.
4
4
  disable-model-invocation: true
5
- argument-hint: "[ST-NNN – empty = next ready story]"
5
+ argument-hint: "[ST-NNN – empty = next ready story] [--prototype[=ui|logic]]"
6
6
  ---
7
7
 
8
8
  # Implement a Story
9
9
 
10
- Story: the arguments from the invocation (empty → `node .claude/skills/implement/scripts/next-story.ts`; a story already `in-progress` is finished first).
10
+ Story: the arguments from the invocation (empty → `node .claude/skills/implement/scripts/next-story.ts`; a story already `in-progress` is finished first). `--prototype[=ui|logic]` is a flag, not the story ID: strip it before resolving the story. It asks for a prototype before the test plan; see *Prototype (only when asked)*.
11
11
 
12
- The main session writes the code; subagents only review. One checkpoint belongs to the user: the **merge** (step 7). Everything before it runs without asking – a `ready` story is good enough to build up to the pull request, and the acceptance tester accepts the story, not the user – unless the story turns out to be wrong (see *When the story is wrong*) or a seam is missing from the catalog (step 2).
12
+ The main session writes the code; subagents only review. One checkpoint belongs to the user: the **merge** (step 7). Everything before it runs without asking – a `ready` story is good enough to build up to the pull request, and the acceptance tester accepts the story, not the user – unless the story turns out to be wrong (see *When the story is wrong*), a seam is missing from the catalog (step 2), or the user asked for a prototype (step 1b – the verdict is theirs).
13
13
 
14
14
  Engineering conventions: `docs/engineering/conventions.md` – read it if it exists; it describes the module layout, how commands and read models are built, and the **seam catalog**.
15
15
 
@@ -22,6 +22,25 @@ Project profile: `.claude/project.json` – default branch, code roots, commands
22
22
  3. `node .claude/skills/implement/scripts/story-context.ts ST-NNN` – the context pack: story, exact test titles, dependencies, events/commands/rules/invariants, glossary, data model, ADRs. Read it completely; it is your source, not memory.
23
23
  4. `git switch -c st-NNN-<slug>` (slug from the file name), then `node .claude/skills/implement/scripts/story-status.ts ST-NNN in-progress` and commit `ST-NNN: start`.
24
24
 
25
+ ## 1b. Prototype (only when asked)
26
+
27
+ Only with `--prototype`, or when the user explicitly asks during the story. A `ui` story whose screen shape is
28
+ still open was not `ready`; this is the exception that settles it before the test plan. Load the `prototype`
29
+ skill and follow it.
30
+
31
+ 1. **Standalone first.** Delegate to `ux-designer`: question, branch (`ui` or `logic`), variants/scenarios,
32
+ timebox, target `docs/prototypes/<slug>/`. It writes the self-contained HTML file. The user decides.
33
+ 2. **In-app only when the question needs the real page** – an existing route, real data, the real header and
34
+ sidebar. You build the throwaway route or the `?variant=` gate yourself, following the project's routing
35
+ convention; the `ux-designer` defines the question and variants and reviews the result. The prototype stays
36
+ out of the production path and is captured on `prototype/<slug>`.
37
+ 3. **Capture.** Commit `docs/prototypes/<slug>/` (or the in-app prototype) on `prototype/<slug>`, return to the
38
+ story branch, and pass the verdict to `requirements-engineer`: `Prototype: prototype/<slug> – <question> –
39
+ <verdict>` in `## Context`; a recurring rule goes to `ux-designer` for `docs/product/ux-guidelines.md`.
40
+ 4. **Then decide.** If the prototype only settles layout and the scenarios still hold, continue with step 2.
41
+ If it changes behaviour or a scenario, the story goes back to `review` (see *When the story is wrong*),
42
+ `requirements-engineer` revises it and `/review-stories` approves it again. The branch stays.
43
+
25
44
  ## 2. Test plan
26
45
  Call the `skill` tool for `tdd` (and `codebase-design` when a new module or interface is involved).
27
46
  Show one table and go on to step 3 without waiting:
@@ -102,6 +121,8 @@ Summarize in a few lines: scenarios implemented, review findings fixed/skipped,
102
121
 
103
122
  ## Spikes
104
123
  A spike answers its **Question** within its **Timebox** – no test plan, no TDD for throwaway experiments.
124
+ - A UX or state-model spike is a prototype: load the `prototype` skill, keep the question and timebox in the
125
+ story, and capture the verdict the same way (step 1b).
105
126
  - Before starting, tell the user the timebox and what will be kept (skeleton code that becomes the application gets tests and passes verify).
106
127
  - Tick each checklist item in the story file as it is answered; write results where the item says (an ADR's consequences, `OPEN_QUESTIONS.md`). A new decision → ADR with `status: proposed` (architect skill); the user accepts.
107
128
  - Timebox exhausted → stop, document what is known, and ask the user how to continue.
@@ -0,0 +1,101 @@
1
+ # Logic Prototype
2
+
3
+ A single, self-contained HTML file (a **shareable demo**) that lets anyone drive a state model by clicking
4
+ buttons. Use this when the question is about **business logic, state transitions, or data shape**: the kind of
5
+ thing that looks reasonable on paper but only feels wrong once you push it through real cases.
6
+
7
+ Because it is one file with nothing to install, you can hand it to a non-developer (a designer, a PM, a domain
8
+ expert) and let them feel the model for themselves. So it speaks their language, not the code's.
9
+
10
+ ## When this is the right shape
11
+
12
+ - "I'm not sure if this state machine handles the edge case where X then Y."
13
+ - "Does this data model actually let me represent the case where ..."
14
+ - "I want to feel out what the API should look like before writing it."
15
+ - Anything where someone wants to **press buttons and watch state change**.
16
+
17
+ If the question is "what should this look like," this is the wrong branch. Use [UI.md](UI.md).
18
+
19
+ ## Process
20
+
21
+ ### 1. State the question
22
+
23
+ Before writing code, write down what state model and what question you are prototyping. One paragraph, at the
24
+ top of the demo (in a visible intro, not just a comment) and in the `README.md`. A logic prototype that answers
25
+ the wrong question is pure waste, so make the question explicit so it can be checked later.
26
+
27
+ ### 2. Isolate the logic in a portable module
28
+
29
+ Put the actual logic (the bit that is answering the question) in a single `<script>` block written as a small,
30
+ pure module that could be lifted out and dropped into the real codebase later. The page around it is throwaway;
31
+ this module isn't.
32
+
33
+ The right shape depends on the question:
34
+
35
+ - **A pure reducer**: `(state, action) => state`. Good when actions are discrete events and state is a single
36
+ value.
37
+ - **A state machine**: explicit states and transitions. Good when "which actions are even legal right now" is
38
+ part of the question.
39
+ - **A small set of pure functions** over a plain data type. Good when there is no implicit current state, just
40
+ transformations.
41
+ - **A class or module with a clear method surface** when the logic genuinely owns ongoing internal state.
42
+
43
+ Pick whichever shape best fits the question being asked, *not* whichever is easiest to wire to a page. Keep it
44
+ pure: no DOM, no `document`, no button handlers reaching inside it. The page calls into it; nothing flows the
45
+ other direction. This is what makes the prototype useful past its own lifetime: once the question is answered,
46
+ the validated reducer / machine / function set lifts into the real module on its own.
47
+
48
+ ### 3. Build the shareable HTML file
49
+
50
+ One file, plain HTML/CSS/JS: no framework, no bundler, no server, everything inline so it opens by double-click
51
+ and survives being emailed around. Anyone should be able to run it by opening it.
52
+
53
+ Write it for a non-developer. Every label is in **domain language** from `CONTEXT.md`, not code: buttons and
54
+ state read like the business, not like the reducer. Explain in plain words what is happening.
55
+
56
+ Lay it out with a clean hierarchy, top to bottom:
57
+
58
+ 1. **Title and one-line explanation** of what this demo lets you explore (the question from step 1).
59
+ 2. **Current state**: the full relevant state, rendered as a readable panel (labelled fields, not a raw JSON
60
+ dump), re-rendered after every click so the change is visible. Where it helps a non-developer follow, call
61
+ out what just changed.
62
+ 3. **Free-play buttons**: one button per action, always available, so anyone can poke at the model in any
63
+ order. Each click dispatches its action and re-renders the state.
64
+ 4. **Guided walkthroughs**: a set of **scenarios**, one per tab. Each tab holds a short plain-language
65
+ description of the scenario (the situation it sets up and what to watch for) and underneath it, the ordered
66
+ **buttons to press** for that scenario. Each step is a real button: clicking it performs that action and
67
+ moves to the next step. Starting a walkthrough resets to a known initial state so the scenario runs the same
68
+ way every time.
69
+
70
+ Choose scenarios that demonstrate the awkward cases, the ones hard to reason about on paper: the happy path, a
71
+ tricky edge case, an attempt at something that should be illegal.
72
+
73
+ Keep it beautiful but restrained: clean typography, generous spacing, one accent colour. No animations, no
74
+ gimmicks: nothing that competes with the state and the buttons.
75
+
76
+ ### 4. Hand it over
77
+
78
+ Send them the file, or open it for them. They will click through the walkthroughs and free-play whenever they
79
+ get to it; the interesting moments are when they say "wait, that shouldn't be possible" or "huh, I assumed X
80
+ would be different"; those are the bugs in the *idea*, which is the whole point. If they want new actions or a
81
+ new scenario, add them. Prototypes evolve.
82
+
83
+ ### 5. Capture the answer and the prototype
84
+
85
+ Once the prototype has answered its question, capture the answer, then capture the prototype the way the
86
+ [SKILL](SKILL.md) describes. The logic-specific mapping: the validated reducer / machine / function set lifts
87
+ into the real module (the decision, absorbed); the HTML shell rides along to the throwaway branch that keeps
88
+ the prototype as a primary source, and being one self-contained file, it stays trivially re-runnable there.
89
+
90
+ ## Anti-patterns
91
+
92
+ - **Don't add tests.** A prototype that needs tests is no longer a prototype.
93
+ - **Don't wire it to the real database.** Use in-memory state unless the question is specifically about
94
+ persistence.
95
+ - **Don't generalise.** No "what if we wanted to support X later." The prototype answers one question.
96
+ - **Don't blur the logic and the page together.** If the pure module references the DOM, `document`, or button
97
+ handlers, it is no longer liftable. Keep the page as a thin shell over a pure module.
98
+ - **Don't reach for a framework, bundler, or server.** One file the recipient double-clicks; a framework app or a
99
+ dev server defeats "shareable".
100
+ - **Don't ship the HTML shell into production.** The page is optimised for being clicked through by hand. The
101
+ logic module behind it is the bit worth keeping.
@@ -0,0 +1,85 @@
1
+ ---
2
+ name: prototype
3
+ description: Build a throwaway prototype to answer one design question – a self-contained HTML file for a logic/state question, or several radically different UI variants switchable in one file. Use when a UX or domain question cannot be settled on paper, and in /feature or /implement when the user asks for a prototype.
4
+ ---
5
+
6
+ # Prototype
7
+
8
+ A prototype is **throwaway code that answers a question**. The question decides the shape. It is not a first
9
+ draft of the feature: no tests, no persistence, no polish, no production path. The decision it settles is the
10
+ only thing that survives; the code is captured on a throwaway branch and never merged.
11
+
12
+ ## When this is the right tool
13
+
14
+ Use it when the question is one of these, and the user agrees:
15
+
16
+ - **"What should this look like?"** – a structural layout choice: three genuinely different information
17
+ hierarchies, not three colour variants.
18
+ - **"Does this logic / state model feel right?"** – a state machine, a set of rules or a data shape pushed
19
+ through cases that are hard to reason about on paper.
20
+ - **"How should this flow feel?"** – a sequence a person walks through, where the order and the feedback are
21
+ the question.
22
+
23
+ Do **not** prototype a question a guideline, the vision or the domain model already answers. Do not prototype
24
+ polish (colour, spacing, copy), and do not use it to avoid a grilling decision. The grilling comes first; the
25
+ prototype is evidence for one open branch of it.
26
+
27
+ ## Pick a branch
28
+
29
+ Identify which question is being answered – from the user's prompt, the story, the surrounding code, or by
30
+ asking if the user is around:
31
+
32
+ - **"Does this logic / state model feel right?"** → [LOGIC.md](LOGIC.md). One self-contained HTML file with
33
+ free-play buttons and tabbed guided walkthroughs that push the state model through the awkward cases. A
34
+ non-developer can drive it.
35
+ - **"What should this look like?"** → [UI.md](UI.md). Several radically different variants in one
36
+ self-contained HTML file, switchable via a `?variant=` URL search param and a floating bottom bar.
37
+
38
+ The two branches produce very different artifacts, so getting this wrong wastes the whole prototype. If the
39
+ question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the
40
+ surrounding code (a backend module → logic; a page or component → UI) and state the assumption at the top of
41
+ the prototype.
42
+
43
+ ## Where it lives
44
+
45
+ In discovery, the prototype is **standalone**: `docs/prototypes/<slug>/index.html`, written by the
46
+ `ux-designer`, with a short `README.md` next to it (question, branch, variants/scenarios, timebox, verdict).
47
+ No application code, no framework, no build step, no shell. The user opens the file in a browser.
48
+
49
+ A question that genuinely needs the real application – an existing page, real data, the real header and
50
+ sidebar – is an **in-app prototype**. That is the exception: it is built by the main session during
51
+ `/implement` (see [UI.md](UI.md)), not by the `ux-designer`, and it follows the project's routing convention
52
+ with a clearly marked throwaway route. The same capture rules apply.
53
+
54
+ ## Rules that apply to both
55
+
56
+ 1. **Throwaway from day one, and clearly marked as such.** The path or the first line says `PROTOTYPE`. Name
57
+ it so a casual reader cannot mistake it for production.
58
+ 2. **Trivial to run.** Standalone: double-click the HTML file. In-app: one command from the project's task
59
+ runner. No thinking required to start it.
60
+ 3. **No persistence by default.** State lives in memory. Persistence is the thing the prototype is *checking*,
61
+ not something it depends on. If the question explicitly involves a database, use a scratch database or a
62
+ local file with a clear "PROTOTYPE, wipe me" name.
63
+ 4. **Skip the polish.** No tests, no error handling beyond what makes the prototype runnable, no abstractions.
64
+ The point is to learn something fast.
65
+ 5. **Surface the state.** After every action (logic) or on every variant switch (UI), render the full relevant
66
+ state so the user can see what changed.
67
+ 6. **One question, one timebox.** Write the question at the top, in the user's language, and agree a timebox
68
+ with the user (one working session is the default). If the timebox expires without an answer, stop and
69
+ record what is known – a second prototype needs a new question, not more polish.
70
+ 7. **Capture the answer, not the code.** Fold the validated decision into the real artifact – the story's
71
+ `## Context`, `docs/product/ux-guidelines.md` (a G-number when it is a recurring rule) or the domain model.
72
+ Then capture the prototype itself as a **primary source**: commit `docs/prototypes/<slug>/` on a throwaway
73
+ branch `prototype/<slug>`, push it only if the user wants to share it, and return to the branch you were
74
+ on. The branch is never merged. The story carries `Prototype: prototype/<slug> – <question> – <verdict>`.
75
+
76
+ ## How it plugs into the workflow
77
+
78
+ - **`/feature`** – the UX lens proposes a prototype when the frontier leaves a structural UI, flow or state
79
+ question. The user decides. `--prototype[=ui|logic]` makes it explicit. The verdict goes to the
80
+ `ux-designer` (guidelines) and to the `requirements-engineer` (story), before the stories are reviewed.
81
+ - **`/implement`** – only when the user asks (`--prototype`) or a spike's question is a UX/state question. A
82
+ `ui` story whose screen shape is still open was not `ready`; the prototype settles it, then the story goes
83
+ back to `review` if its behaviour changed. The engineering rule holds: never decide a story in the code.
84
+ - **The `ux-designer`** owns the skill and builds the standalone prototype. It never writes production code,
85
+ tests or stories. The main session captures the branch and passes the verdict on.
@@ -0,0 +1,130 @@
1
+ # UI Prototype
2
+
3
+ Generate **several radically different UI variations** in one self-contained HTML file, switchable from a
4
+ floating bottom bar. The user flips between variants in the browser, picks one (or steals bits from each), then
5
+ throws the rest away.
6
+
7
+ If the question is about logic/state rather than what something looks like, this is the wrong branch. Use
8
+ [LOGIC.md](LOGIC.md).
9
+
10
+ ## When this is the right shape
11
+
12
+ - "What should this page look like?"
13
+ - "I want to see a few options for this dashboard before committing."
14
+ - "Try a different layout for the settings screen."
15
+ - Any time the user would otherwise spend a day picking between three vague mockups in their head.
16
+
17
+ ## Two sub-shapes: standalone first
18
+
19
+ A UI prototype is easier to judge when it butts up against the rest of the app – real header, real sidebar,
20
+ real data, real density. A variant in a vacuum looks fine in isolation. But in discovery there is no app code
21
+ yet, and the `ux-designer` must not write it. So the default is standalone; the in-app shape is the exception.
22
+
23
+ ### Sub-shape A: standalone HTML (default in discovery)
24
+
25
+ One file, `docs/prototypes/<slug>/index.html`, with inline CSS and JS. No framework, no bundler, no server. It
26
+ opens by double-click and survives being emailed around.
27
+
28
+ - Use sample data that matches the domain (`CONTEXT.md`), not `foo`/`bar`.
29
+ - Give each variant a clear component name in the file: `VariantA`, `VariantB`, `VariantC`.
30
+ - Keep the page frame realistic: the header, the navigation and the density the real page will have. A blank
31
+ page hides design problems that a populated one exposes.
32
+ - If the feature will live inside an existing screen, render that screen's frame around the variants.
33
+
34
+ ### Sub-shape B: in-app throwaway route (only in `/implement`)
35
+
36
+ Only when the question genuinely needs the real application: an existing page, real data, the real header and
37
+ sidebar. The main session builds it, not the `ux-designer`. Follow the project's routing convention; do not
38
+ invent a new top-level structure. Name the route or the file so it is obviously a prototype. Same `?variant=`
39
+ pattern and the same switcher. Never wire it to real mutations; read-only is fine.
40
+
41
+ ## Process
42
+
43
+ ### 1. State the question and pick N
44
+
45
+ Default to **3 variants**. More than 5 stops being radically different and starts being noise, so cap there.
46
+
47
+ Write down the plan in one line, at the top of the file and in the `README.md`:
48
+
49
+ > "Three variants of the settings page, switchable via `?variant=`, on the existing `/settings` route."
50
+
51
+ ### 2. Generate radically different variants
52
+
53
+ Draft each variant. Hold each one to:
54
+
55
+ - The page's purpose and the data it has access to.
56
+ - The project's component library / styling system if the prototype is in-app; plain CSS if it is standalone.
57
+ - A clear component name in the file, e.g. `VariantA`, `VariantB`, `VariantC`.
58
+
59
+ Variants must be **structurally different**: different layout, different information hierarchy, different
60
+ primary affordance, not just different colours. Three slightly-tweaked card grids isn't a UI prototype, it's
61
+ wallpaper. If two drafts come out too similar, redo one with explicit "do not use a card grid" guidance.
62
+
63
+ ### 3. Wire them together
64
+
65
+ Create a single switcher in the file:
66
+
67
+ ```js
68
+ // pseudo-code, adapt to the file
69
+ const variant = new URLSearchParams(location.search).get("variant") ?? "A";
70
+ render(
71
+ variant === "A" ? VariantA(data) :
72
+ variant === "B" ? VariantB(data) :
73
+ VariantC(data)
74
+ );
75
+ renderSwitcher(["A", "B", "C"], variant);
76
+ ```
77
+
78
+ For sub-shape B (in-app), keep all the existing data fetching above the switcher; only the rendered subtree
79
+ changes per variant.
80
+
81
+ ### 4. Build the floating switcher
82
+
83
+ A small fixed-position bar at the bottom-centre of the screen with three pieces:
84
+
85
+ - **Left arrow**: cycles to the previous variant (wraps around).
86
+ - **Variant label**: shows the current variant key and, if the variant exports a name, that name too. e.g.
87
+ `B (Sidebar layout)`.
88
+ - **Right arrow**: cycles forward (wraps around).
89
+
90
+ Behaviour:
91
+
92
+ - Clicking an arrow updates the URL search param (`history.replaceState` in a standalone file, the framework's
93
+ router in-app) so the variant is shareable and reload-stable.
94
+ - Keyboard: `←` and `→` arrow keys also cycle. Don't intercept arrow keys when an `<input>`, `<textarea>`, or
95
+ `[contenteditable]` is focused.
96
+ - Visually distinct from the page (e.g. high-contrast pill, subtle shadow) so it is obviously not part of the
97
+ design being evaluated.
98
+ - In-app only: hidden in production builds, gated on `process.env.NODE_ENV !== "production"` or an equivalent
99
+ check, so a stray prototype merge cannot ship the bar to users. A standalone file never enters the build.
100
+
101
+ ### 5. Hand it over
102
+
103
+ Surface the file path or the URL (and the `?variant=` keys). The user will flip through whenever they get to
104
+ it. The interesting feedback is usually **"I want the header from B with the sidebar from C"**, which is the
105
+ actual design they want.
106
+
107
+ ### 6. Capture the answer and clean up
108
+
109
+ Once a variant has won, capture the answer (which variant and why), then capture the prototype the way the
110
+ [SKILL](SKILL.md) describes. Fold the winner into the real code and move the rest onto the throwaway branch,
111
+ not into main:
112
+
113
+ - **Standalone**: the decision goes into the story and, when it is a recurring rule, into
114
+ `docs/product/ux-guidelines.md`. The whole `docs/prototypes/<slug>/` folder goes to `prototype/<slug>`.
115
+ - **In-app**: fold the winner into the existing page; drop the losing variants and the switcher from the story
116
+ branch. The full set goes to `prototype/<slug>`.
117
+
118
+ The full set of variants is the primary source, so it lands on the throwaway branch, not the bin. Variant
119
+ components and the switcher left in the main branch rot fast and confuse the next reader.
120
+
121
+ ## Anti-patterns
122
+
123
+ - **Variants that differ only in colour or copy.** That's a tweak, not a prototype. Real variants disagree
124
+ about structure.
125
+ - **Sharing too much code between variants.** A shared header is fine; a shared layout defeats the point.
126
+ Each variant should be free to throw out the layout.
127
+ - **Wiring variants to real mutations.** Read-only prototypes are fine. If a variant needs to mutate, point it
128
+ at a stub: the question is "what should this look like", not "does the backend work".
129
+ - **Promoting the prototype directly to production.** The variant code was written under prototype
130
+ constraints (no tests, minimal error handling). Rewrite it properly when you fold it in.
@@ -70,6 +70,29 @@ cannot be asked before the domain decision it serves.
70
70
  A question whose answer is already in `docs/product/ux-guidelines.md` is not asked again – quote the guideline
71
71
  instead. That is what makes the yardstick pay off.
72
72
 
73
+ ## When paper is not enough – the prototype
74
+
75
+ Most UX questions are settled in words: entry, job, states, wording. A few are not – which of three
76
+ structurally different layouts works, or whether a state model still feels right once it is pushed through the
77
+ awkward cases. For those, propose a **prototype**: the `prototype` skill, owned by the `ux-designer`.
78
+
79
+ Propose it in the grilling round, with a recommended answer, when the question is:
80
+
81
+ - a structural layout choice (not colour, spacing or copy),
82
+ - a state model or a flow that is hard to reason about on paper,
83
+ - a screen that does not exist yet and whose shape decides how the stories are cut.
84
+
85
+ Do not propose one for polish, or for a question a guideline or the vision already answers. State the one
86
+ question, the branch (`ui` or `logic`), the variants or scenarios, and the timebox. The user decides.
87
+
88
+ The verdict goes into `docs/product/ux-guidelines.md` as a G-number when it is a recurring rule, and into the
89
+ story's `## Context` (`Prototype: prototype/<slug> – <question> – <verdict>`). The prototype itself is
90
+ throwaway: it lives under `docs/prototypes/<slug>/`, is captured on a throwaway branch, and is never merged.
91
+ Details: `.claude/skills/prototype/SKILL.md`.
92
+
93
+ At story review, a `ui` story whose screen shape is still open is not `ready`: send it back to `/feature` for a
94
+ prototype (or a spike), rather than approving it and deciding it in code.
95
+
73
96
  ## What goes into the story, and what does not
74
97
 
75
98
  Stories stay at the level of observable behaviour. The `lead-dev` rule holds for UX too: no implementation detail
@@ -52,6 +52,8 @@ In a **story review** (task from `/review-stories`) add two lenses:
52
52
  8. **UX lens** (label `ui` only): the screen's job and entry point are named; the empty, rejected and
53
53
  no-permission cases have a scenario; UI wording matches the glossary's `_UI (<lang>)_`. A pattern the
54
54
  guidelines already define is referenced by its G-number, not restated as scenarios – name restated ones.
55
+ A screen whose structural shape is still open is not `ready`: recommend a prototype (`/feature --prototype`
56
+ or a spike) instead of approving it.
55
57
 
56
58
  ## Boundaries
57
59
  - In stories you only change `size`, `risk`, `depends_on` and – in a story review – `priority`. Return everything else as a recommendation.
@@ -1,5 +1,5 @@
1
1
  ---
2
- description: UX/UI designer. Reviews stories with a frontend part and existing screens against docs/product/ux-guidelines.md, and maintains those guidelines. Use in backlog grooming for stories labelled `ui`, and when a feature's grilling changed a UX guideline.
2
+ description: UX/UI designer. Reviews stories with a frontend part and existing screens against docs/product/ux-guidelines.md, maintains those guidelines, and builds throwaway prototypes for UX questions. Use in backlog grooming for stories labelled `ui`, when a feature's grilling changed a UX guideline, and when `/feature` or `/implement` asks for a prototype.
3
3
  mode: subagent
4
4
  color: pink
5
5
  permissions:
@@ -12,6 +12,9 @@ permissions:
12
12
  - action: edit
13
13
  resource: docs/reviews/*
14
14
  effect: allow
15
+ - action: edit
16
+ resource: docs/prototypes/**
17
+ effect: allow
15
18
  - action: shell
16
19
  resource: "*"
17
20
  effect: deny
@@ -30,9 +33,12 @@ permissions:
30
33
  - action: skill
31
34
  resource: user-stories
32
35
  effect: allow
36
+ - action: skill
37
+ resource: prototype
38
+ effect: allow
33
39
  ---
34
40
 
35
- Before you start, load the skills `ux-design` and `user-stories` with the `skill` tool.
41
+ Before you start, load the skills `ux-design`, `user-stories` and `prototype` with the `skill` tool.
36
42
 
37
43
  You are the UX/UI designer of this project, whose interface its users meet in the situations
38
44
  `docs/product/vision.md` describes. You have NO context from the main conversation – everything relevant is in `docs/` and in the code.
@@ -46,6 +52,7 @@ Write in the artifact language (`languages.artifacts` in `.claude/project.json`,
46
52
  - `docs/engineering/conventions.md` – the page frame, the design size, component rules, where the
47
53
  message catalogs live. What is decided there is not yours to re-decide.
48
54
  - The method, the question set and the review order: the preloaded skill `ux-design`.
55
+ - The prototype method, its two branches and its capture rules: the preloaded skill `prototype`.
49
56
 
50
57
  ## Tasks
51
58
  1. **Story review** – per story with a frontend part: is the screen's job clear, is the entry point named, do the
@@ -57,11 +64,18 @@ Write in the artifact language (`languages.artifacts` in `.claude/project.json`,
57
64
  with the date and the reason. Keep it short enough that someone reads it before writing a page.
58
65
  4. **Gaps** – which recurring interface question has no guideline yet, and which existing screens contradict each
59
66
  other?
67
+ 5. **Prototype** – when the main session delegates a UX question that cannot be settled on paper, build the
68
+ throwaway prototype under `docs/prototypes/<slug>/`: state the question and the branch (`ui` or `logic`) at
69
+ the top, use the domain language, no tests, no persistence, no application code. Return the verdict and the
70
+ branch pointer (`prototype/<slug>`).
60
71
 
61
72
  ## Boundaries
62
73
  - **You never write stories.** Everything that belongs in a story comes back as a recommendation – the
63
74
  `requirements-engineer` applies it. The same rule the product-owner and the lead-dev follow.
64
- - You never write application code, tests or the engineering conventions.
75
+ - You never write **production** application code, tests or the engineering conventions. A prototype is
76
+ throwaway: it lives under `docs/prototypes/`, is captured on a throwaway branch and is never merged. A
77
+ question that needs the real application page is built by the main session; you define the question and the
78
+ variants and review the result.
65
79
  - No implementation detail in what you propose: no component names, no classes, no pixel values. Observable
66
80
  behaviour and words, not markup.
67
81
  - Make no assumptions where the vision or the guidelines are silent: return them as questions, each with a
@@ -76,7 +90,8 @@ A table of findings:
76
90
  | Story / screen | Level (job / understanding / states / language / consistency / polish) | Severity (blocker, major, minor) | Finding | What to do instead |
77
91
 
78
92
  Below it: the scenarios or Context lines you propose per story (ready for the requirements-engineer to apply), the
79
- guidelines you would add, and at most 3 questions for the user, each with a recommended answer.
93
+ guidelines you would add, and at most 3 questions for the user, each with a recommended answer. When you built a
94
+ prototype, add its question, branch, verdict and pointer (`prototype/<slug>`) so the main session can pass it on.
80
95
 
81
96
  Severity means: **blocker** – the person cannot do the job, or cannot on a phone; **major** – they can, but will
82
97
  get it wrong, misread it or not find it; **minor** – it works and is understood, but is inconsistent or clumsy.
@@ -1,5 +1,5 @@
1
1
  ---
2
- description: Entry point for a new feature or change once the initial discovery is done – accepts a free-text idea, an existing story (`ST-NNN`) or a ticket (`#123`, `PROJ-123`, URL); grills the idea, runs a focused event storming, updates domain model and ADRs, derives stories into the backlog (local, or the tracker mirror) and runs the story review; bug tickets go to a regression story.
2
+ description: Entry point for a new feature or change once the initial discovery is done – accepts a free-text idea, an existing story (`ST-NNN`) or a ticket (`#123`, `PROJ-123`, URL); grills the idea, runs a focused event storming, updates domain model and ADRs, derives stories into the backlog (local, or the tracker mirror) and runs the story review; bug tickets go to a regression story; `--prototype` adds a throwaway prototype before the stories.
3
3
  ---
4
4
 
5
5
  Load the `feature` skill with the `skill` tool and follow it exactly. Do not restate it.
@@ -1,5 +1,5 @@
1
1
  ---
2
- description: Engineering workflow – implements one story from docs/stories/ test-first on its own branch, verifies, has it reviewed by code-reviewer and acceptance-tester, refactors, and sets it done on the acceptance tester's verdict and hands the pull request to the user to merge.
2
+ description: Engineering workflow – implements one story from docs/stories/ test-first on its own branch, verifies, has it reviewed by code-reviewer and acceptance-tester, refactors, and sets it done on the acceptance tester's verdict and hands the pull request to the user to merge; `--prototype` prototypes an open UI question first.
3
3
  ---
4
4
 
5
5
  Load the `implement` skill with the `skill` tool and follow it exactly. Do not restate it.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.3.1 – 2026-11-02
4
+
5
+ - **Optional prototyping, owned by the UX designer.** New `prototype` skill (adapted from Matt Pocock's, MIT) builds
6
+ a throwaway self-contained HTML prototype for one design question: several structurally different UI variants
7
+ (`ui`) or a clickable state model (`logic`). `/feature --prototype[=ui|logic]` – or a proposal from the UX frontier
8
+ during grilling – runs it between grilling and the stories; `/implement --prototype` settles an open UI question
9
+ before the test plan. The verdict goes into the story (`Prototype: …`) and, when it is a recurring rule, into
10
+ `docs/product/ux-guidelines.md` as a G-number. The prototype lives under `docs/prototypes/<slug>/`, is captured on
11
+ a throwaway branch `prototype/<slug>` and is never merged.
12
+ - **Credit where the workflow comes from.** `.claude/THIRD_PARTY_NOTICES.md` lists which skills are derived from
13
+ [Matt Pocock's skills](https://github.com/mattpocock/skills) – some adapted, some copied verbatim – and carries his
14
+ MIT license text. The file ships with the payload and lands in every installation; the README has a Credits
15
+ section.
16
+
3
17
  ## 0.3.0 – 2026-10-31
4
18
 
5
19
  - **Removed the optional extras and the vendored `shadcn` skill.** `--with` is gone; the CLI fails with a clear
package/README.md CHANGED
@@ -92,6 +92,8 @@ docs/
92
92
  workflow.md the map: sources of truth, commands, phases, rules
93
93
  product/vision.md the vision, grilled with you
94
94
  product/initiatives/ proposals for large ideas from /shape (no stories)
95
+ product/ux-guidelines.md the interface yardstick
96
+ prototypes/ throwaway prototypes on their own branch; the default branch keeps the README
95
97
  domain/events.yaml the event storming model (empty is valid)
96
98
  domain/context-map.md
97
99
  architecture/data-model.md
@@ -114,12 +116,12 @@ Existing `CONTEXT.md` and `docs/` are never touched.
114
116
  | `/grill-me` | Relentless interview on a plan, decision or idea |
115
117
  | `/grill-with-docs` | The same, writing glossary and ADRs as you go |
116
118
  | `/event-storming [process]` | Big-picture or single-process event storming |
117
- | `/feature <idea \| ST-NNN \| #123 \| PROJ-123>` | New feature from an idea, an existing story or a ticket: intake and routing, grilling, focused storming, model, stories, review; bugs become a regression story |
119
+ | `/feature <idea \| ST-NNN \| #123 \| PROJ-123>` | New feature from an idea, an existing story or a ticket: intake and routing, grilling, focused storming, model, stories, review; bugs become a regression story; `--prototype` adds a throwaway prototype before the stories |
118
120
  | `/shape <idea \| ticket> [--dry-run]` | Before a large feature: frame, place (existing/new context, shared library), impact, slices, rough cost range, recommendation; creates no stories |
119
121
  | `/review-stories [ST-…]` | One lead-dev pass (value, build, UX) before a story is `ready` |
120
122
  | `/backlog-sync [status\|pull\|push]` | Keep `docs/stories/` in sync with GitHub Issues or Jira |
121
123
  | `/groom-backlog [scope]` | Periodic challenge: is this backlog still worth building? |
122
- | `/implement [ST-NNN]` | Test-first implementation of one story, review, refactor, PR |
124
+ | `/implement [ST-NNN]` | Test-first implementation of one story, review, refactor, PR; `--prototype` prototypes an open UI question first |
123
125
  | `/improve-codebase-architecture` | Scan for deepening opportunities, present them, grill one |
124
126
  | `/retro` | Retrospective on a session, proposing rule changes |
125
127
 
@@ -149,6 +151,21 @@ The brief lands in `docs/product/initiatives/<slug>.md` (`proposed` until you ac
149
151
  existing monorepo is treated as a new context in an existing landscape, not as a greenfield project; a similar
150
152
  service is used as evidence and as the cost anchor, never as a template.
151
153
 
154
+ ### Prototyping an open question
155
+
156
+ When a UI, flow or state question cannot be settled on paper, `/feature --prototype` (or a proposal from the UX
157
+ lens during grilling) runs a throwaway prototype before the stories are written. The `ux-designer` builds one
158
+ self-contained HTML file under `docs/prototypes/<slug>/` – several structurally different UI variants or a
159
+ clickable state model. The verdict goes into the story and, when it is a recurring rule, into the UX guidelines;
160
+ the prototype is captured on a throwaway branch and never merged. `/implement --prototype` does the same for an
161
+ open UI question during engineering; if the prototype changes the story, the story goes back to `review`.
162
+
163
+ ```bash
164
+ /feature "checkout with saved cards" --prototype=ui
165
+ /feature PROJ-123 --prototype=logic
166
+ /implement ST-042 --prototype
167
+ ```
168
+
152
169
  ## Greenfield, end to end
153
170
 
154
171
  1. `npx kataster init --greenfield` → review `.claude/project.json`.
@@ -323,6 +340,21 @@ The toolkit is maintained in the open: bug reports, a skill that fills a real ga
323
340
  [SECURITY.md](SECURITY.md) is the way to report a vulnerability privately. Participation is covered by the
324
341
  [Code of Conduct](CODE_OF_CONDUCT.md).
325
342
 
343
+ ## Credits
344
+
345
+ Kataster stands on other people's work:
346
+
347
+ - **Matt Pocock** – [skills](https://github.com/mattpocock/skills), [aihero.dev](https://www.aihero.dev). The grilling
348
+ interview (`grilling`, `grill-me`, `grill-with-docs`), test-driven development (`tdd`), the deep-module vocabulary
349
+ (`codebase-design`), the architecture survey (`improve-codebase-architecture`), the throwaway prototype
350
+ (`prototype`), the retro, the domain-modeling discipline and `writing-for-agents` come from his skill repository –
351
+ partly adapted, partly copied verbatim under MIT. The per-file mapping and the license text are in
352
+ [.claude/THIRD_PARTY_NOTICES.md](.claude/THIRD_PARTY_NOTICES.md).
353
+ - **John Ousterhout**, *A Philosophy of Software Design* – "Design It Twice" and the depth, seam and deletion-test
354
+ vocabulary.
355
+ - **Eric Evans**, *Domain-Driven Design* – ubiquitous language, bounded contexts, aggregates.
356
+ - **Martin Fowler** – the smell baseline the review agents work from.
357
+
326
358
  ## License
327
359
 
328
360
  MIT
package/guide/concepts.md CHANGED
@@ -29,6 +29,7 @@ Two rules make it work:
29
29
  | `docs/stories/` | The backlog. One Markdown file per story; `BACKLOG.md` is generated. With a tracker, this is the local mirror | requirements-engineer, PO, lead-dev; `/backlog-sync` with a tracker |
30
30
  | `docs/product/vision.md` | Problem, user groups, goals, non-goals, success criteria | user |
31
31
  | `docs/product/ux-guidelines.md` | The interface yardstick, as numbered rules with date and reason | ux-designer, approved by user |
32
+ | `docs/prototypes/<slug>/` | Throwaway prototypes on their own branch; only the README stays on the default branch | ux-designer; verdict in the story and the guidelines |
32
33
 
33
34
  ## Events, commands, aggregates
34
35
 
@@ -75,6 +76,20 @@ An initiative is **not** a work item: no `ready`/`done`, no stories, no second b
75
76
  with a basis and a confidence – an analogue service is evidence, not a template. Each accepted slice then goes
76
77
  through `/feature`, which creates the stories and runs the review.
77
78
 
79
+ ## Prototypes
80
+
81
+ A **prototype** is throwaway code that answers one design question. It is not a first draft: no tests, no
82
+ persistence, no production path. The question decides the branch – `ui` (what should it look like) or `logic`
83
+ (does the state model feel right). In discovery it is one self-contained HTML file under
84
+ `docs/prototypes/<slug>/`, built by the `ux-designer`; a question that needs the real application page is built
85
+ by the main session during `/implement`.
86
+
87
+ `/feature --prototype` (or a proposal from the UX frontier during grilling) adds the phase between grilling and
88
+ the stories. The verdict goes into the story (`Prototype: prototype/<slug> – <question> – <verdict>`) and, when
89
+ it is a recurring rule, into `ux-guidelines.md` as a G-number. The code is captured on a throwaway branch
90
+ `prototype/<slug>` and never merged. `/implement --prototype` does the same for an open UI question during
91
+ engineering; if it changes the story, the story goes back to `review`.
92
+
78
93
  ## The seam catalog
79
94
 
80
95
  A **seam** is where a test attaches. Testing everything everywhere is not affordable, so the project agrees up front
package/guide/release.md CHANGED
@@ -11,7 +11,7 @@
11
11
  npm install --prefix .claude --no-audit --no-fund
12
12
  npm run typecheck --prefix .claude
13
13
  npm test
14
- npm pack --dry-run # 147 files, 215 kB – no examples/, no node_modules, no state/
14
+ npm pack --dry-run # 148 files, 218 kB – no examples/, no node_modules, no state/
15
15
  ```
16
16
 
17
17
  4. Install the tarball once and start a throwaway project with it – a tarball that installs is not the same as a
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kataster",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "Agent workflow for domain-driven discovery and delivery – drop it into a greenfield or brownfield repository and build the domain by grilling.",
5
5
  "keywords": [
6
6
  "agents",
@@ -4,6 +4,8 @@
4
4
  The yardstick, not the method. The method is `.claude/skills/ux-design/SKILL.md`.
5
5
  Every guideline is a rule someone can point at, with the date and the reason it was decided.
6
6
  `ux-designer` maintains this file; the user approves a guideline before it is written here.
7
+ A prototype verdict that becomes a recurring rule lands here as a G-number; the prototype itself stays on
8
+ its throwaway branch (`docs/prototypes/<slug>/`).
7
9
 
8
10
  Format:
9
11
  ## G1 – <short rule>
@@ -0,0 +1,9 @@
1
+ # Prototypes
2
+
3
+ Throwaway code that answers one design question. The method is `.claude/skills/prototype/SKILL.md`.
4
+
5
+ - A prototype lives in `docs/prototypes/<slug>/` on a throwaway branch `prototype/<slug>`; it is never merged.
6
+ - The default branch keeps this README only. The prototype itself is a primary source on its branch.
7
+ - The decision it settled goes into the story (`Prototype: prototype/<slug> – <question> – <verdict>` in
8
+ `## Context`) and, when it is a recurring rule, into `docs/product/ux-guidelines.md` as a G-number.
9
+ - One question, one self-contained HTML file, one timebox. No tests, no persistence, no production code.
@@ -17,6 +17,7 @@ is what to read when you are unsure where something belongs.
17
17
  | Vision, user groups, scope | `docs/product/vision.md` | user + `product-owner` |
18
18
  | Initiative briefs (proposals, no stories) | `docs/product/initiatives/<slug>.md` | `/shape`; user accepts |
19
19
  | UI/UX decisions (yardstick) | `docs/product/ux-guidelines.md` | `ux-designer` (user approves) |
20
+ | Prototypes (throwaway, on branch `prototype/<slug>`) | `docs/prototypes/<slug>/` | `ux-designer`; verdict in the story and `ux-guidelines.md` |
20
21
  | Glossary (ubiquitous language) | `CONTEXT.md` | `domain-model` skill |
21
22
  | Event storming model | `docs/domain/events.yaml` | event storming / `domain-architect` |
22
23
  | Visualization (generated!) | `docs/domain/event-storming.md` | hook – never edit manually |
@@ -49,12 +50,13 @@ is what to read when you are unsure where something belongs.
49
50
  | `affected.ts` | monorepo fast loop: changed files or `--base` → affected packages + native test command |
50
51
  | `grilling` (`/grill-me`) | relentless interview in rounds with recommended answers – how we ask questions |
51
52
  | `/grill-with-docs` | grilling + `domain-model` + `architect`: writes glossary and ADRs as it goes |
52
- | `/event-storming [process]`, `/feature <idea \| ST-NNN \| ticket>` | discovery entry points; both start by grilling. `/feature` resolves a story or ticket read-only and routes bugs to a regression story |
53
+ | `/event-storming [process]`, `/feature <idea \| ST-NNN \| ticket>` | discovery entry points; both start by grilling. `/feature` resolves a story or ticket read-only and routes bugs to a regression story; `--prototype` adds a throwaway prototype before the stories |
53
54
  | `user-stories`, `/review-stories` | story format, validation, review |
54
55
  | `backlog`, `/backlog-sync` | local / GitHub Issues / Jira mirror, sync and conflict rules |
55
56
  | `ux-design` | how we decide the interface: the UX frontier, what a story says about a screen, review order |
57
+ | `prototype` | throwaway HTML prototype for a UI or logic question; the verdict goes into the story and the guidelines |
56
58
  | `/groom-backlog` | periodic challenge of the open backlog |
57
- | `/implement [ST-NNN]` | one story test-first, verify, review, refactor, acceptance, pull request |
59
+ | `/implement [ST-NNN]` | one story test-first, verify, review, refactor, acceptance, pull request; `--prototype` prototypes an open UI question first |
58
60
  | `tdd` | red → green loop, good tests, seams |
59
61
  | `codebase-design` | vocabulary for deep modules |
60
62
  | `/improve-codebase-architecture` | periodic scan for deepening opportunities, then grilling |
@@ -100,6 +102,10 @@ is what to read when you are unsure where something belongs.
100
102
  source is recorded in the story (`Source: …`), its acceptance criteria are grilled like any other claim, and
101
103
  `external` is still written only by the backlog sync. A bug is a story with the label `bug`, not a separate type; a
102
104
  change to a documented rule is a feature, because the rule changes.
105
+ - **Prototypes are throwaway.** One question, one self-contained HTML file under `docs/prototypes/<slug>/`,
106
+ captured on a throwaway branch `prototype/<slug>` and never merged. The decision lands in the story
107
+ (`Prototype: …`) and, when it is a recurring rule, in `ux-guidelines.md` as a G-number. No tests, no
108
+ persistence, no production code.
103
109
  - **Initiatives are not a backlog.** `docs/product/initiatives/` holds proposals from `/shape`; they have no
104
110
  `ready`/`done` and create no stories. Only `docs/stories/` is work. Cost is a range with a basis and a
105
111
  confidence – never a single number, never a commitment.
@@ -110,11 +116,14 @@ is what to read when you are unsure where something belongs.
110
116
  Discovery, first time: `/bootstrap` (greenfield) or `/adopt` (existing code), then `/review-stories` until stories
111
117
  are `ready`. A monorepo is adopted slice by slice: finish one domain plus its shared library, then run
112
118
  `/adopt <next path>` – the map keeps track of what is adopted. Later features: `/feature <idea | ticket>`; an idea
113
- larger than one feature goes through `/shape` first and then `/feature` per slice.
119
+ larger than one feature goes through `/shape` first and then `/feature` per slice. When a UI, flow or state
120
+ question cannot be settled on paper, `/feature --prototype` adds a throwaway prototype between grilling and the
121
+ stories; the verdict goes into the story and the UX guidelines.
114
122
 
115
123
  Engineering, story by story: `/implement [ST-NNN]` (empty = next ready story whose dependencies are done):
116
124
  prepare → test plan → red/green per scenario → `verify.ts` → review lane scaled to risk → refactor → acceptance
117
- tester's verdict → `done` + pull request; **the user only merges**. Start the next story in a fresh session.
125
+ tester's verdict → `done` + pull request; **the user only merges**. `--prototype` settles an open UI question
126
+ first; if it changes the story, the story goes back to `review`. Start the next story in a fresh session.
118
127
 
119
128
  With a tracker: pull before `/review-stories`, `/groom-backlog` and `/implement`; push after changing or approving
120
129
  stories and after `done`. The tracker leads on conflict; `docs/stories/` is the mirror and `BACKLOG.md` stays