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.
- package/.claude/THIRD_PARTY_NOTICES.md +69 -0
- package/.claude/agents/lead-dev.md +2 -0
- package/.claude/agents/ux-designer.md +14 -4
- package/.claude/skills/feature/SKILL.md +32 -6
- package/.claude/skills/groom-backlog/SKILL.md +2 -1
- package/.claude/skills/implement/SKILL.md +25 -4
- package/.claude/skills/prototype/LOGIC.md +101 -0
- package/.claude/skills/prototype/SKILL.md +85 -0
- package/.claude/skills/prototype/UI.md +130 -0
- package/.claude/skills/ux-design/SKILL.md +23 -0
- package/.opencode/agents/lead-dev.md +2 -0
- package/.opencode/agents/ux-designer.md +19 -4
- package/.opencode/commands/feature.md +1 -1
- package/.opencode/commands/implement.md +1 -1
- package/CHANGELOG.md +14 -0
- package/README.md +34 -2
- package/guide/concepts.md +15 -0
- package/guide/release.md +1 -1
- package/package.json +1 -1
- package/templates/docs/product/ux-guidelines.md +2 -0
- package/templates/docs/prototypes/README.md +9 -0
- package/templates/docs/workflow.md +13 -4
|
@@ -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,
|
|
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`,
|
|
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*)
|
|
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,
|
|
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
|
|
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 #
|
|
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
|
@@ -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**.
|
|
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
|