opencode-ship 0.9.0 → 0.10.0-rc.17
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/CHANGELOG.md +96 -0
- package/README.md +3 -1
- package/THIRD_PARTY_NOTICES.md +77 -19
- package/assets/agents/ship-controller.md +122 -0
- package/assets/agents/ship-final-spec-reviewer.md +87 -0
- package/assets/agents/ship-final-standards-reviewer.md +83 -0
- package/assets/agents/ship-planner.md +78 -0
- package/assets/agents/ship-task-builder.md +91 -0
- package/assets/agents/ship-task-reviewer.md +78 -0
- package/assets/commands/ship-deliver.md +30 -0
- package/assets/commands/ship-resume.md +28 -0
- package/assets/commands/ship-status.md +25 -0
- package/assets/skills/brainstorming/SKILL.md +160 -0
- package/assets/skills/brainstorming/spec-document-reviewer-prompt.md +49 -0
- package/assets/skills/brainstorming/visual-companion.md +298 -0
- package/assets/skills/code-review/SKILL.md +98 -0
- package/assets/skills/codebase-design/DEEPENING.md +37 -0
- package/assets/skills/codebase-design/DESIGN-IT-TWICE.md +44 -0
- package/assets/skills/codebase-design/SKILL.md +123 -0
- package/assets/skills/dispatching-parallel-agents/SKILL.md +176 -0
- package/assets/skills/domain-modeling/ADR-FORMAT.md +47 -0
- package/assets/skills/domain-modeling/CONTEXT-FORMAT.md +60 -0
- package/assets/skills/domain-modeling/SKILL.md +83 -0
- package/assets/skills/engineering-workflow/SKILL.md +125 -0
- package/assets/skills/engineering-workflow/domain.md +51 -0
- package/assets/skills/engineering-workflow/issue-tracker-github.md +45 -0
- package/assets/skills/engineering-workflow/issue-tracker-gitlab.md +46 -0
- package/assets/skills/engineering-workflow/issue-tracker-local.md +30 -0
- package/assets/skills/engineering-workflow/triage-labels.md +15 -0
- package/assets/skills/executing-plans/SKILL.md +73 -0
- package/assets/skills/grill-with-docs/SKILL.md +10 -14
- package/assets/skills/grilling/SKILL.md +21 -0
- package/assets/skills/handoff/SKILL.md +25 -0
- package/assets/skills/prototype/LOGIC.md +79 -0
- package/assets/skills/prototype/SKILL.md +35 -0
- package/assets/skills/prototype/UI.md +112 -0
- package/assets/skills/receiving-code-review/SKILL.md +214 -0
- package/assets/skills/requesting-code-review/SKILL.md +104 -0
- package/assets/skills/requesting-code-review/code-reviewer.md +172 -0
- package/assets/skills/research/SKILL.md +21 -0
- package/assets/skills/setup-engineering-workflow/SKILL.md +125 -0
- package/assets/skills/setup-engineering-workflow/domain.md +51 -0
- package/assets/skills/setup-engineering-workflow/issue-tracker-github.md +45 -0
- package/assets/skills/setup-engineering-workflow/issue-tracker-gitlab.md +46 -0
- package/assets/skills/setup-engineering-workflow/issue-tracker-local.md +30 -0
- package/assets/skills/setup-engineering-workflow/triage-labels.md +15 -0
- package/assets/skills/subagent-driven-development/SKILL.md +512 -0
- package/assets/skills/subagent-driven-development/implementer-prompt.md +142 -0
- package/assets/skills/subagent-driven-development/re-review-prompt.md +106 -0
- package/assets/skills/subagent-driven-development/task-reviewer-prompt.md +185 -0
- package/assets/skills/systematic-debugging/CREATION-LOG.md +119 -0
- package/assets/skills/systematic-debugging/SKILL.md +292 -0
- package/assets/skills/systematic-debugging/condition-based-waiting-example.ts +158 -0
- package/assets/skills/systematic-debugging/condition-based-waiting.md +115 -0
- package/assets/skills/systematic-debugging/defense-in-depth.md +122 -0
- package/assets/skills/systematic-debugging/find-polluter.sh +72 -0
- package/assets/skills/systematic-debugging/root-cause-tracing.md +169 -0
- package/assets/skills/systematic-debugging/test-academic.md +14 -0
- package/assets/skills/systematic-debugging/test-pressure-1.md +58 -0
- package/assets/skills/systematic-debugging/test-pressure-2.md +68 -0
- package/assets/skills/systematic-debugging/test-pressure-3.md +69 -0
- package/assets/skills/test-driven-development/SKILL.md +329 -0
- package/assets/skills/test-driven-development/writing-good-tests.md +198 -0
- package/assets/skills/to-spec/SKILL.md +84 -0
- package/assets/skills/to-tickets/SKILL.md +114 -0
- package/assets/skills/triage/AGENT-BRIEF.md +207 -0
- package/assets/skills/triage/OUT-OF-SCOPE.md +105 -0
- package/assets/skills/triage/SKILL.md +114 -15
- package/assets/skills/verification-before-completion/SKILL.md +129 -0
- package/assets/skills/wayfinder/SKILL.md +137 -0
- package/assets/skills/writing-plans/SKILL.md +177 -0
- package/assets/skills/writing-plans/plan-document-reviewer-prompt.md +49 -0
- package/dist/cli.js +1146 -435
- package/dist/core.js +210 -61
- package/dist/plugin.js +2368 -230
- package/package.json +3 -1
- package/schema/ship-config.schema.json +63 -2
- package/schema/ship-lock.schema.json +5 -3
- package/tests/plugin/plugin-load.test.mjs +85 -0
- package/vendor/mattpocock/LICENSE +30 -0
- package/vendor/obra/LICENSE +30 -0
- package/vendor/sources.json +976 -0
- package/vendor/superpowers/LICENSE +30 -0
- package/vendor/upstreams/mattpocock/skills/engineering/code-review/SKILL.md +89 -0
- package/vendor/upstreams/mattpocock/skills/engineering/codebase-design/DEEPENING.md +37 -0
- package/vendor/upstreams/mattpocock/skills/engineering/codebase-design/DESIGN-IT-TWICE.md +44 -0
- package/vendor/upstreams/mattpocock/skills/engineering/codebase-design/SKILL.md +114 -0
- package/vendor/upstreams/mattpocock/skills/engineering/domain-modeling/ADR-FORMAT.md +47 -0
- package/vendor/upstreams/mattpocock/skills/engineering/domain-modeling/CONTEXT-FORMAT.md +60 -0
- package/vendor/upstreams/mattpocock/skills/engineering/domain-modeling/SKILL.md +74 -0
- package/vendor/upstreams/mattpocock/skills/engineering/grill-with-docs/SKILL.md +7 -0
- package/vendor/upstreams/mattpocock/skills/engineering/prototype/LOGIC.md +79 -0
- package/vendor/upstreams/mattpocock/skills/engineering/prototype/SKILL.md +26 -0
- package/vendor/upstreams/mattpocock/skills/engineering/prototype/UI.md +112 -0
- package/vendor/upstreams/mattpocock/skills/engineering/research/SKILL.md +12 -0
- package/vendor/upstreams/mattpocock/skills/engineering/setup-matt-pocock-skills/SKILL.md +116 -0
- package/vendor/upstreams/mattpocock/skills/engineering/setup-matt-pocock-skills/domain.md +51 -0
- package/vendor/upstreams/mattpocock/skills/engineering/setup-matt-pocock-skills/issue-tracker-github.md +45 -0
- package/vendor/upstreams/mattpocock/skills/engineering/setup-matt-pocock-skills/issue-tracker-gitlab.md +46 -0
- package/vendor/upstreams/mattpocock/skills/engineering/setup-matt-pocock-skills/issue-tracker-local.md +30 -0
- package/vendor/upstreams/mattpocock/skills/engineering/setup-matt-pocock-skills/triage-labels.md +15 -0
- package/vendor/upstreams/mattpocock/skills/engineering/to-spec/SKILL.md +75 -0
- package/vendor/upstreams/mattpocock/skills/engineering/to-tickets/SKILL.md +105 -0
- package/vendor/upstreams/mattpocock/skills/engineering/triage/AGENT-BRIEF.md +207 -0
- package/vendor/upstreams/mattpocock/skills/engineering/triage/OUT-OF-SCOPE.md +105 -0
- package/vendor/upstreams/mattpocock/skills/engineering/triage/SKILL.md +112 -0
- package/vendor/upstreams/mattpocock/skills/engineering/wayfinder/SKILL.md +128 -0
- package/vendor/upstreams/mattpocock/skills/productivity/grilling/SKILL.md +12 -0
- package/vendor/upstreams/mattpocock/skills/productivity/handoff/SKILL.md +16 -0
- package/vendor/upstreams/obra/skills/brainstorming/SKILL.md +151 -0
- package/vendor/upstreams/obra/skills/brainstorming/spec-document-reviewer-prompt.md +49 -0
- package/vendor/upstreams/obra/skills/brainstorming/visual-companion.md +298 -0
- package/vendor/upstreams/obra/skills/dispatching-parallel-agents/SKILL.md +167 -0
- package/vendor/upstreams/obra/skills/executing-plans/SKILL.md +64 -0
- package/vendor/upstreams/obra/skills/receiving-code-review/SKILL.md +205 -0
- package/vendor/upstreams/obra/skills/requesting-code-review/SKILL.md +95 -0
- package/vendor/upstreams/obra/skills/requesting-code-review/code-reviewer.md +172 -0
- package/vendor/upstreams/obra/skills/subagent-driven-development/SKILL.md +503 -0
- package/vendor/upstreams/obra/skills/subagent-driven-development/implementer-prompt.md +142 -0
- package/vendor/upstreams/obra/skills/subagent-driven-development/re-review-prompt.md +106 -0
- package/vendor/upstreams/obra/skills/subagent-driven-development/task-reviewer-prompt.md +185 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/CREATION-LOG.md +119 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/SKILL.md +283 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/condition-based-waiting-example.ts +158 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/condition-based-waiting.md +115 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/defense-in-depth.md +122 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/find-polluter.sh +72 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/root-cause-tracing.md +169 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/test-academic.md +14 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/test-pressure-1.md +58 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/test-pressure-2.md +68 -0
- package/vendor/upstreams/obra/skills/systematic-debugging/test-pressure-3.md +69 -0
- package/vendor/upstreams/obra/skills/test-driven-development/SKILL.md +320 -0
- package/vendor/upstreams/obra/skills/test-driven-development/writing-good-tests.md +198 -0
- package/vendor/upstreams/obra/skills/verification-before-completion/SKILL.md +120 -0
- package/vendor/upstreams/obra/skills/writing-plans/SKILL.md +168 -0
- package/vendor/upstreams/obra/skills/writing-plans/plan-document-reviewer-prompt.md +49 -0
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
# Visual Companion Guide
|
|
2
|
+
|
|
3
|
+
Browser-based visual brainstorming companion for showing mockups, diagrams, and options.
|
|
4
|
+
|
|
5
|
+
## When to Use
|
|
6
|
+
|
|
7
|
+
Decide per-question, not per-session. The test: **would the user understand this better by seeing it than reading it?**
|
|
8
|
+
|
|
9
|
+
**Use the browser** when the content itself is visual:
|
|
10
|
+
|
|
11
|
+
- **UI mockups** — wireframes, layouts, navigation structures, component designs
|
|
12
|
+
- **Architecture diagrams** — system components, data flow, relationship maps
|
|
13
|
+
- **Side-by-side visual comparisons** — comparing two layouts, two color schemes, two design directions
|
|
14
|
+
- **Design polish** — when the question is about look and feel, spacing, visual hierarchy
|
|
15
|
+
- **Spatial relationships** — state machines, flowcharts, entity relationships rendered as diagrams
|
|
16
|
+
|
|
17
|
+
**Use the terminal** when the content is text or tabular:
|
|
18
|
+
|
|
19
|
+
- **Requirements and scope questions** — "what does X mean?", "which features are in scope?"
|
|
20
|
+
- **Conceptual A/B/C choices** — picking between approaches described in words
|
|
21
|
+
- **Tradeoff lists** — pros/cons, comparison tables
|
|
22
|
+
- **Technical decisions** — API design, data modeling, architectural approach selection
|
|
23
|
+
- **Clarifying questions** — anything where the answer is words, not a visual preference
|
|
24
|
+
|
|
25
|
+
A question *about* a UI topic is not automatically a visual question. "What kind of wizard do you want?" is conceptual — use the terminal. "Which of these wizard layouts feels right?" is visual — use the browser.
|
|
26
|
+
|
|
27
|
+
## How It Works
|
|
28
|
+
|
|
29
|
+
The server watches a directory for HTML files and serves the newest one to the browser. You write HTML content to `screen_dir`, the user sees it in their browser and can click to select options. Selections are recorded to `state_dir/events` that you read on your next turn.
|
|
30
|
+
|
|
31
|
+
**Content fragments vs full documents:** If your HTML file starts with `<!DOCTYPE` or `<html`, the server serves it as-is (just injects the helper script). Otherwise, the server automatically wraps your content in the frame template — adding the header, CSS theme, connection status, and all interactive infrastructure. **Write content fragments by default.** Only write full documents when you need complete control over the page.
|
|
32
|
+
|
|
33
|
+
## Starting a Session
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
# Start AFTER the user approves the companion. --open auto-opens their browser on
|
|
37
|
+
# the first screen; --project-dir persists mockups and enables same-port restart.
|
|
38
|
+
scripts/start-server.sh --project-dir /path/to/project --open
|
|
39
|
+
|
|
40
|
+
# Returns: {"type":"server-started","port":52341,
|
|
41
|
+
# "url":"http://localhost:52341/?key=ab12…",
|
|
42
|
+
# "screen_dir":"/path/to/project/.superpowers/brainstorm/12345-1706000000/content",
|
|
43
|
+
# "state_dir":"/path/to/project/.superpowers/brainstorm/12345-1706000000/state"}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Save `screen_dir` and `state_dir` from the response. With `--open`, the browser opens itself when you push the first screen — you don't need to ask the user to open it, but still share the URL as a fallback (headless/remote setups won't auto-open).
|
|
47
|
+
|
|
48
|
+
**The URL contains a session key (`?key=…`).** The server rejects any request
|
|
49
|
+
without it, so always give the user the **complete** URL from the `url` field —
|
|
50
|
+
never strip the query string, and never hand out a bare `http://host:port`. The
|
|
51
|
+
key gates HTTP and WebSocket access so a stray browser tab or another machine on
|
|
52
|
+
the network can't read the screens or inject events. After the first load the
|
|
53
|
+
browser remembers the key via a cookie, so reloads and `/files/*` assets work
|
|
54
|
+
without repeating it.
|
|
55
|
+
|
|
56
|
+
**Finding connection info:** The server writes its startup JSON to `$STATE_DIR/server-info`. If you launched the server in the background and didn't capture stdout, read that file to get the URL and port. When using `--project-dir`, check `<project>/.superpowers/brainstorm/` for the session directory.
|
|
57
|
+
|
|
58
|
+
**Note:** Pass the project root as `--project-dir` so mockups persist in `.superpowers/brainstorm/` and survive server restarts. Without it, files go to `/tmp` and get cleaned up. Remind the user to add `.superpowers/` to `.gitignore` if it's not already there.
|
|
59
|
+
|
|
60
|
+
**Launching the server by platform:**
|
|
61
|
+
|
|
62
|
+
**Claude Code:**
|
|
63
|
+
```bash
|
|
64
|
+
# Default mode works — the script backgrounds the server itself.
|
|
65
|
+
scripts/start-server.sh --project-dir /path/to/project --open
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
On Windows, the script auto-detects and switches to foreground mode (which blocks the tool call). Use `run_in_background: true` on the Bash tool call so the server survives across conversation turns, then read `$STATE_DIR/server-info` on the next turn to get the URL and port.
|
|
69
|
+
|
|
70
|
+
**Codex:**
|
|
71
|
+
```bash
|
|
72
|
+
# Codex reaps background processes. The script auto-detects CODEX_CI and
|
|
73
|
+
# switches to foreground mode. Run it normally — no extra flags needed.
|
|
74
|
+
scripts/start-server.sh --project-dir /path/to/project --open
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
**Gemini CLI:**
|
|
78
|
+
```bash
|
|
79
|
+
# Use --foreground and set is_background: true on your shell tool call
|
|
80
|
+
# so the process survives across turns
|
|
81
|
+
scripts/start-server.sh --project-dir /path/to/project --open --foreground
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
**Copilot CLI:**
|
|
85
|
+
```bash
|
|
86
|
+
# Use --foreground and start the server via the bash tool with mode: "async"
|
|
87
|
+
# so the process survives across turns. Capture the returned shellId for
|
|
88
|
+
# read_bash / stop_bash if you need to interact with it later.
|
|
89
|
+
scripts/start-server.sh --project-dir /path/to/project --open --foreground
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
**Other environments:** The server must keep running in the background across conversation turns. If your environment reaps detached processes, use `--foreground` and launch the command with your platform's background execution mechanism.
|
|
93
|
+
|
|
94
|
+
If the URL is unreachable from your browser (common in remote/containerized setups), bind a non-loopback host:
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
scripts/start-server.sh \
|
|
98
|
+
--project-dir /path/to/project \
|
|
99
|
+
--host 0.0.0.0 \
|
|
100
|
+
--url-host localhost
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Use `--url-host` to control what hostname is printed in the returned URL JSON.
|
|
104
|
+
|
|
105
|
+
## The Loop
|
|
106
|
+
|
|
107
|
+
1. **Check server is alive**, then **write HTML** to a new file in `screen_dir`:
|
|
108
|
+
- **Required: confirm the server is alive before referring to the URL or pushing a screen.** Check that `$STATE_DIR/server-info` exists and `$STATE_DIR/server-stopped` does not. If it has shut down, restart it with `start-server.sh` using the **same `--project-dir`** — it reuses the same port, so the user's open tab reconnects on its own (it shows a "paused" overlay while the server is down) and you don't need to send a new URL. The server auto-exits after 4 hours idle (configurable with `--idle-timeout-minutes`).
|
|
109
|
+
- Use semantic filenames: `platform.html`, `visual-style.html`, `layout.html`
|
|
110
|
+
- **Never reuse filenames** — each screen gets a fresh file
|
|
111
|
+
- Use your file-creation tool — **never use cat/heredoc** (dumps noise into terminal)
|
|
112
|
+
- Server automatically serves the newest file
|
|
113
|
+
|
|
114
|
+
2. **Tell user what to expect and end your turn:**
|
|
115
|
+
- Remind them of the URL (every step, not just first)
|
|
116
|
+
- Give a brief text summary of what's on screen (e.g., "Showing 3 layout options for the homepage")
|
|
117
|
+
- Ask them to respond in the terminal: "Take a look and let me know what you think. Click to select an option if you'd like."
|
|
118
|
+
|
|
119
|
+
3. **On your next turn** — after the user responds in the terminal:
|
|
120
|
+
- Read `$STATE_DIR/events` if it exists — this contains the user's browser interactions (clicks, selections) as JSON lines
|
|
121
|
+
- Merge with the user's terminal text to get the full picture
|
|
122
|
+
- The terminal message is the primary feedback; `state_dir/events` provides structured interaction data
|
|
123
|
+
|
|
124
|
+
4. **Iterate or advance** — if feedback changes current screen, write a new file (e.g., `layout-v2.html`). Only move to the next question when the current step is validated.
|
|
125
|
+
|
|
126
|
+
5. **Unload when returning to terminal** — when the next step doesn't need the browser (e.g., a clarifying question, a tradeoff discussion), push a waiting screen to clear the stale content:
|
|
127
|
+
|
|
128
|
+
```html
|
|
129
|
+
<!-- filename: waiting.html (or waiting-2.html, etc.) -->
|
|
130
|
+
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
|
131
|
+
<p class="subtitle">Continuing in terminal...</p>
|
|
132
|
+
</div>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
This prevents the user from staring at a resolved choice while the conversation has moved on. When the next visual question comes up, push a new content file as usual.
|
|
136
|
+
|
|
137
|
+
6. Repeat until done.
|
|
138
|
+
|
|
139
|
+
## Writing Content Fragments
|
|
140
|
+
|
|
141
|
+
Write just the content that goes inside the page. The server wraps it in the frame template automatically (header, theme CSS, connection status, and all interactive infrastructure).
|
|
142
|
+
|
|
143
|
+
**Minimal example:**
|
|
144
|
+
|
|
145
|
+
```html
|
|
146
|
+
<h2>Which layout works better?</h2>
|
|
147
|
+
<p class="subtitle">Consider readability and visual hierarchy</p>
|
|
148
|
+
|
|
149
|
+
<div class="options">
|
|
150
|
+
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
|
151
|
+
<div class="letter">A</div>
|
|
152
|
+
<div class="content">
|
|
153
|
+
<h3>Single Column</h3>
|
|
154
|
+
<p>Clean, focused reading experience</p>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
|
158
|
+
<div class="letter">B</div>
|
|
159
|
+
<div class="content">
|
|
160
|
+
<h3>Two Column</h3>
|
|
161
|
+
<p>Sidebar navigation with main content</p>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
That's it. No `<html>`, no CSS, no `<script>` tags needed. The server provides all of that.
|
|
168
|
+
|
|
169
|
+
## CSS Classes Available
|
|
170
|
+
|
|
171
|
+
The frame template provides these CSS classes for your content:
|
|
172
|
+
|
|
173
|
+
### Options (A/B/C choices)
|
|
174
|
+
|
|
175
|
+
```html
|
|
176
|
+
<div class="options">
|
|
177
|
+
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
|
178
|
+
<div class="letter">A</div>
|
|
179
|
+
<div class="content">
|
|
180
|
+
<h3>Title</h3>
|
|
181
|
+
<p>Description</p>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
**Multi-select:** Add `data-multiselect` to the container to let users select multiple options. Each click toggles the item's selected styling.
|
|
188
|
+
|
|
189
|
+
```html
|
|
190
|
+
<div class="options" data-multiselect>
|
|
191
|
+
<!-- same option markup — users can select/deselect multiple -->
|
|
192
|
+
</div>
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### Cards (visual designs)
|
|
196
|
+
|
|
197
|
+
```html
|
|
198
|
+
<div class="cards">
|
|
199
|
+
<div class="card" data-choice="design1" onclick="toggleSelect(this)">
|
|
200
|
+
<div class="card-image"><!-- mockup content --></div>
|
|
201
|
+
<div class="card-body">
|
|
202
|
+
<h3>Name</h3>
|
|
203
|
+
<p>Description</p>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
### Mockup container
|
|
210
|
+
|
|
211
|
+
```html
|
|
212
|
+
<div class="mockup">
|
|
213
|
+
<div class="mockup-header">Preview: Dashboard Layout</div>
|
|
214
|
+
<div class="mockup-body"><!-- your mockup HTML --></div>
|
|
215
|
+
</div>
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Split view (side-by-side)
|
|
219
|
+
|
|
220
|
+
```html
|
|
221
|
+
<div class="split">
|
|
222
|
+
<div class="mockup"><!-- left --></div>
|
|
223
|
+
<div class="mockup"><!-- right --></div>
|
|
224
|
+
</div>
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### Pros/Cons
|
|
228
|
+
|
|
229
|
+
```html
|
|
230
|
+
<div class="pros-cons">
|
|
231
|
+
<div class="pros"><h4>Pros</h4><ul><li>Benefit</li></ul></div>
|
|
232
|
+
<div class="cons"><h4>Cons</h4><ul><li>Drawback</li></ul></div>
|
|
233
|
+
</div>
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
### Mock elements (wireframe building blocks)
|
|
237
|
+
|
|
238
|
+
```html
|
|
239
|
+
<div class="mock-nav">Logo | Home | About | Contact</div>
|
|
240
|
+
<div style="display: flex;">
|
|
241
|
+
<div class="mock-sidebar">Navigation</div>
|
|
242
|
+
<div class="mock-content">Main content area</div>
|
|
243
|
+
</div>
|
|
244
|
+
<button class="mock-button">Action Button</button>
|
|
245
|
+
<input class="mock-input" placeholder="Input field">
|
|
246
|
+
<div class="placeholder">Placeholder area</div>
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
### Typography and sections
|
|
250
|
+
|
|
251
|
+
- `h2` — page title
|
|
252
|
+
- `h3` — section heading
|
|
253
|
+
- `.subtitle` — secondary text below title
|
|
254
|
+
- `.section` — content block with bottom margin
|
|
255
|
+
- `.label` — small uppercase label text
|
|
256
|
+
|
|
257
|
+
## Browser Events Format
|
|
258
|
+
|
|
259
|
+
When the user clicks options in the browser, their interactions are recorded to `$STATE_DIR/events` (one JSON object per line). The file is cleared automatically when you push a new screen.
|
|
260
|
+
|
|
261
|
+
```jsonl
|
|
262
|
+
{"type":"click","choice":"a","text":"Option A - Simple Layout","timestamp":1706000101}
|
|
263
|
+
{"type":"click","choice":"c","text":"Option C - Complex Grid","timestamp":1706000108}
|
|
264
|
+
{"type":"click","choice":"b","text":"Option B - Hybrid","timestamp":1706000115}
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
The full event stream shows the user's exploration path — they may click multiple options before settling. The last `choice` event is typically the final selection, but the pattern of clicks can reveal hesitation or preferences worth asking about.
|
|
268
|
+
|
|
269
|
+
If `$STATE_DIR/events` doesn't exist, the user didn't interact with the browser — use only their terminal text.
|
|
270
|
+
|
|
271
|
+
## Design Tips
|
|
272
|
+
|
|
273
|
+
- **Scale fidelity to the question** — wireframes for layout, polish for polish questions
|
|
274
|
+
- **Explain the question on each page** — "Which layout feels more professional?" not just "Pick one"
|
|
275
|
+
- **Iterate before advancing** — if feedback changes current screen, write a new version
|
|
276
|
+
- **2-4 options max** per screen
|
|
277
|
+
- **Use real content when it matters** — for a photography portfolio, use actual images (Unsplash). Placeholder content obscures design issues.
|
|
278
|
+
- **Keep mockups simple** — focus on layout and structure, not pixel-perfect design
|
|
279
|
+
|
|
280
|
+
## File Naming
|
|
281
|
+
|
|
282
|
+
- Use semantic names: `platform.html`, `visual-style.html`, `layout.html`
|
|
283
|
+
- Never reuse filenames — each screen must be a new file
|
|
284
|
+
- For iterations: append version suffix like `layout-v2.html`, `layout-v3.html`
|
|
285
|
+
- Server serves newest file by modification time
|
|
286
|
+
|
|
287
|
+
## Cleaning Up
|
|
288
|
+
|
|
289
|
+
```bash
|
|
290
|
+
scripts/stop-server.sh $SESSION_DIR
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
If the session used `--project-dir`, mockup files persist in `.superpowers/brainstorm/` for later reference. Only `/tmp` sessions get deleted on stop.
|
|
294
|
+
|
|
295
|
+
## Reference
|
|
296
|
+
|
|
297
|
+
- Frame template (CSS reference): `scripts/frame-template.html`
|
|
298
|
+
- Helper script (client-side): `scripts/helper.js`
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: code-review
|
|
3
|
+
description: Review the changes since a fixed point (commit, branch, tag, or merge-base) along two axes — Standards (does the code follow this repo's documented coding standards?) and Spec (does the code match what the originating issue/PRD asked for?). Runs both reviews in parallel sub-agents and reports them side by side. Use when the user wants to review a branch, a PR, work-in-progress changes, or asks to "review since X".
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Two-axis review of the diff between `HEAD` and a fixed point the user supplies:
|
|
7
|
+
|
|
8
|
+
- **Standards** — does the code conform to this repo's documented coding standards?
|
|
9
|
+
- **Spec** — does the code faithfully implement the originating issue / PRD / spec?
|
|
10
|
+
|
|
11
|
+
Both axes run as **parallel sub-agents** so they don't pollute each other's context, then this skill aggregates their findings.
|
|
12
|
+
|
|
13
|
+
The issue tracker should have been provided to you — run `/setup-matt-pocock-skills` if `docs/agents/issue-tracker.md` is missing.
|
|
14
|
+
|
|
15
|
+
## Process
|
|
16
|
+
|
|
17
|
+
### 1. Pin the fixed point
|
|
18
|
+
|
|
19
|
+
Whatever the user said is the fixed point — a commit SHA, branch name, tag, `main`, `HEAD~5`, etc. If they didn't specify one, ask for it.
|
|
20
|
+
|
|
21
|
+
Capture the diff command once: `git diff <fixed-point>...HEAD` (three-dot, so the comparison is against the merge-base). Also note the list of commits via `git log <fixed-point>..HEAD --oneline`.
|
|
22
|
+
|
|
23
|
+
Before going further, confirm the fixed point resolves (`git rev-parse <fixed-point>`) and the diff is non-empty. A bad ref or empty diff should fail here — not inside two parallel sub-agents.
|
|
24
|
+
|
|
25
|
+
### 2. Identify the spec source
|
|
26
|
+
|
|
27
|
+
Look for the originating spec, in this order:
|
|
28
|
+
|
|
29
|
+
1. Issue references in the commit messages (`#123`, `Closes #45`, GitLab `!67`, etc.) — fetch via the workflow in `docs/agents/issue-tracker.md`.
|
|
30
|
+
2. A path the user passed as an argument.
|
|
31
|
+
3. A PRD/spec file under `docs/`, `specs/`, or `.scratch/` matching the branch name or feature.
|
|
32
|
+
4. If nothing is found, ask the user where the spec is. If they say there isn't one, the **Spec** sub-agent will skip and report "no spec available".
|
|
33
|
+
|
|
34
|
+
### 3. Identify the standards sources
|
|
35
|
+
|
|
36
|
+
Anything in the repo that documents how code should be written, such as `CODING_STANDARDS.md` or `CONTRIBUTING.md`.
|
|
37
|
+
|
|
38
|
+
On top of whatever the repo documents, the Standards axis always carries the **smell baseline** below — a fixed set of Fowler code smells (_Refactoring_, ch.3) that applies even when a repo documents nothing. Two rules bind it:
|
|
39
|
+
|
|
40
|
+
- **The repo overrides.** A documented repo standard always wins; where it endorses something the baseline would flag, suppress the smell.
|
|
41
|
+
- **Always a judgement call.** Each smell is a labelled heuristic ("possible Feature Envy"), never a hard violation — and, like any standard here, skip anything tooling already enforces.
|
|
42
|
+
|
|
43
|
+
Each smell reads *what it is* → *how to fix*; match it against the diff:
|
|
44
|
+
|
|
45
|
+
- **Mysterious Name** — a function, variable, or type whose name doesn't reveal what it does or holds. → rename it; if no honest name comes, the design's murky.
|
|
46
|
+
- **Duplicated Code** — the same logic shape appears in more than one hunk or file in the change. → extract the shared shape, call it from both.
|
|
47
|
+
- **Feature Envy** — a method that reaches into another object's data more than its own. → move the method onto the data it envies.
|
|
48
|
+
- **Data Clumps** — the same few fields or params keep travelling together (a type wanting to be born). → bundle them into one type, pass that.
|
|
49
|
+
- **Primitive Obsession** — a primitive or string standing in for a domain concept that deserves its own type. → give the concept its own small type.
|
|
50
|
+
- **Repeated Switches** — the same `switch`/`if`-cascade on the same type recurs across the change. → replace with polymorphism, or one map both sites share.
|
|
51
|
+
- **Shotgun Surgery** — one logical change forces scattered edits across many files in the diff. → gather what changes together into one module.
|
|
52
|
+
- **Divergent Change** — one file or module is edited for several unrelated reasons. → split so each module changes for one reason.
|
|
53
|
+
- **Speculative Generality** — abstraction, parameters, or hooks added for needs the spec doesn't have. → delete it; inline back until a real need shows.
|
|
54
|
+
- **Message Chains** — long `a.b().c().d()` navigation the caller shouldn't depend on. → hide the walk behind one method on the first object.
|
|
55
|
+
- **Middle Man** — a class or function that mostly just delegates onward. → cut it, call the real target direct.
|
|
56
|
+
- **Refused Bequest** — a subclass or implementer that ignores or overrides most of what it inherits. → drop the inheritance, use composition.
|
|
57
|
+
|
|
58
|
+
### 4. Spawn both sub-agents in parallel
|
|
59
|
+
|
|
60
|
+
Send a single message with two `Agent` tool calls. Use the `general-purpose` subagent for both.
|
|
61
|
+
|
|
62
|
+
**Standards sub-agent prompt** — include:
|
|
63
|
+
|
|
64
|
+
- The full diff command and commit list.
|
|
65
|
+
- The list of standards-source files you found in step 3, **plus the smell baseline from step 3** pasted in full — the sub-agent has no other access to it.
|
|
66
|
+
- The brief: "Report — per file/hunk where relevant — (a) every place the diff violates a documented standard: cite the standard (file + the rule); and (b) any baseline smell you spot: name it and quote the hunk. Distinguish hard violations from judgement calls — documented-standard breaches can be hard, but baseline smells are always judgement calls, and a documented repo standard overrides the baseline. Skip anything tooling enforces. Under 400 words."
|
|
67
|
+
|
|
68
|
+
**Spec sub-agent prompt** — include:
|
|
69
|
+
|
|
70
|
+
- The diff command and commit list.
|
|
71
|
+
- The path or fetched contents of the spec.
|
|
72
|
+
- The brief: "Report: (a) requirements the spec asked for that are missing or partial; (b) behaviour in the diff that wasn't asked for (scope creep); (c) requirements that look implemented but where the implementation looks wrong. Quote the spec line for each finding. Under 400 words."
|
|
73
|
+
|
|
74
|
+
If the spec is missing, skip the Spec sub-agent and note this in the final report.
|
|
75
|
+
|
|
76
|
+
### 5. Aggregate
|
|
77
|
+
|
|
78
|
+
Present the two reports under `## Standards` and `## Spec` headings, verbatim or lightly cleaned. Do **not** merge or rerank findings — the two axes are deliberately separate (see _Why two axes_).
|
|
79
|
+
|
|
80
|
+
End with a one-line summary: total findings per axis, and the worst issue _within each axis_ (if any). Don't pick a single winner across axes — that's the reranking the separation exists to prevent.
|
|
81
|
+
|
|
82
|
+
## Why two axes
|
|
83
|
+
|
|
84
|
+
A change can pass one axis and fail the other:
|
|
85
|
+
|
|
86
|
+
- Code that follows every standard but implements the wrong thing → **Standards pass, Spec fail.**
|
|
87
|
+
- Code that does exactly what the issue asked but breaks the project's conventions → **Spec pass, Standards fail.**
|
|
88
|
+
|
|
89
|
+
Reporting them separately stops one axis from masking the other.
|
|
90
|
+
|
|
91
|
+
## Ship integration
|
|
92
|
+
|
|
93
|
+
This skill is part of the engineering profile shipped by
|
|
94
|
+
`opencode-ship@1.0`. The strong planner child session is
|
|
95
|
+
configured with `openai/gpt-5.6-sol` and the durable workflow
|
|
96
|
+
state lives under `<git-common-dir>/opencode-ship/`. All
|
|
97
|
+
GitHub mutations go through Ship's typed tools; never use
|
|
98
|
+
`gh api` or raw shell.
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# Deepening
|
|
2
|
+
|
|
3
|
+
How to deepen a cluster of shallow modules safely, given its dependencies. Assumes the vocabulary in [SKILL.md](SKILL.md) — **module**, **interface**, **seam**, **adapter**.
|
|
4
|
+
|
|
5
|
+
## Dependency categories
|
|
6
|
+
|
|
7
|
+
When assessing a candidate for deepening, classify its dependencies. The category determines how the deepened module is tested across its seam.
|
|
8
|
+
|
|
9
|
+
### 1. In-process
|
|
10
|
+
|
|
11
|
+
Pure computation, in-memory state, no I/O. Always deepenable — merge the modules and test through the new interface directly. No adapter needed.
|
|
12
|
+
|
|
13
|
+
### 2. Local-substitutable
|
|
14
|
+
|
|
15
|
+
Dependencies that have local test stand-ins (PGLite for Postgres, in-memory filesystem). Deepenable if the stand-in exists. The deepened module is tested with the stand-in running in the test suite. The seam is internal; no port at the module's external interface.
|
|
16
|
+
|
|
17
|
+
### 3. Remote but owned (Ports & Adapters)
|
|
18
|
+
|
|
19
|
+
Your own services across a network boundary (microservices, internal APIs). Define a **port** (interface) at the seam. The deep module owns the logic; the transport is injected as an **adapter**. Tests use an in-memory adapter. Production uses an HTTP/gRPC/queue adapter.
|
|
20
|
+
|
|
21
|
+
Recommendation shape: *"Define a port at the seam, implement an HTTP adapter for production and an in-memory adapter for testing, so the logic sits in one deep module even though it's deployed across a network."*
|
|
22
|
+
|
|
23
|
+
### 4. True external (Mock)
|
|
24
|
+
|
|
25
|
+
Third-party services (Stripe, Twilio, etc.) you don't control. The deepened module takes the external dependency as an injected port; tests provide a mock adapter.
|
|
26
|
+
|
|
27
|
+
## Seam discipline
|
|
28
|
+
|
|
29
|
+
- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a port unless at least two adapters are justified (typically production + test). A single-adapter seam is just indirection.
|
|
30
|
+
- **Internal seams vs external seams.** A deep module can have internal seams (private to its implementation, used by its own tests) as well as the external seam at its interface. Don't expose internal seams through the interface just because tests use them.
|
|
31
|
+
|
|
32
|
+
## Testing strategy: replace, don't layer
|
|
33
|
+
|
|
34
|
+
- Old unit tests on shallow modules become waste once tests at the deepened module's interface exist — delete them.
|
|
35
|
+
- Write new tests at the deepened module's interface. The **interface is the test surface**.
|
|
36
|
+
- Tests assert on observable outcomes through the interface, not internal state.
|
|
37
|
+
- Tests should survive internal refactors — they describe behaviour, not implementation. If a test has to change when the implementation changes, it's testing past the interface.
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# Design It Twice
|
|
2
|
+
|
|
3
|
+
When the user wants to explore alternative interfaces for a chosen deepening candidate, use this parallel sub-agent pattern. Based on "Design It Twice" (Ousterhout) — your first idea is unlikely to be the best.
|
|
4
|
+
|
|
5
|
+
Uses the vocabulary in [SKILL.md](SKILL.md) — **module**, **interface**, **seam**, **adapter**, **leverage**.
|
|
6
|
+
|
|
7
|
+
## Process
|
|
8
|
+
|
|
9
|
+
### 1. Frame the problem space
|
|
10
|
+
|
|
11
|
+
Before spawning sub-agents, write a user-facing explanation of the problem space for the chosen candidate:
|
|
12
|
+
|
|
13
|
+
- The constraints any new interface would need to satisfy
|
|
14
|
+
- The dependencies it would rely on, and which category they fall into (see [DEEPENING.md](DEEPENING.md))
|
|
15
|
+
- A rough illustrative code sketch to ground the constraints — not a proposal, just a way to make the constraints concrete
|
|
16
|
+
|
|
17
|
+
Show this to the user, then immediately proceed to Step 2. The user reads and thinks while the sub-agents work in parallel.
|
|
18
|
+
|
|
19
|
+
### 2. Spawn sub-agents
|
|
20
|
+
|
|
21
|
+
Spawn 3+ sub-agents in parallel using the Agent tool. Each must produce a **radically different** interface for the deepened module.
|
|
22
|
+
|
|
23
|
+
Prompt each sub-agent with a separate technical brief (file paths, coupling details, dependency category from [DEEPENING.md](DEEPENING.md), what sits behind the seam). The brief is independent of the user-facing problem-space explanation in Step 1. Give each agent a different design constraint:
|
|
24
|
+
|
|
25
|
+
- Agent 1: "Minimize the interface — aim for 1–3 entry points max. Maximise leverage per entry point."
|
|
26
|
+
- Agent 2: "Maximise flexibility — support many use cases and extension."
|
|
27
|
+
- Agent 3: "Optimise for the most common caller — make the default case trivial."
|
|
28
|
+
- Agent 4 (if applicable): "Design around ports & adapters for cross-seam dependencies."
|
|
29
|
+
|
|
30
|
+
Include both [SKILL.md](SKILL.md) vocabulary and CONTEXT.md vocabulary in the brief so each sub-agent names things consistently with the architecture language and the project's domain language.
|
|
31
|
+
|
|
32
|
+
Each sub-agent outputs:
|
|
33
|
+
|
|
34
|
+
1. Interface (types, methods, params — plus invariants, ordering, error modes)
|
|
35
|
+
2. Usage example showing how callers use it
|
|
36
|
+
3. What the implementation hides behind the seam
|
|
37
|
+
4. Dependency strategy and adapters (see [DEEPENING.md](DEEPENING.md))
|
|
38
|
+
5. Trade-offs — where leverage is high, where it's thin
|
|
39
|
+
|
|
40
|
+
### 3. Present and compare
|
|
41
|
+
|
|
42
|
+
Present designs sequentially so the user can absorb each one, then compare them in prose. Contrast by **depth** (leverage at the interface), **locality** (where change concentrates), and **seam placement**.
|
|
43
|
+
|
|
44
|
+
After comparing, give your own recommendation: which design you think is strongest and why. If elements from different designs would combine well, propose a hybrid. Be opinionated — the user wants a strong read, not a menu.
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: codebase-design
|
|
3
|
+
description: Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Codebase Design
|
|
7
|
+
|
|
8
|
+
Design **deep modules**: a lot of behaviour behind a small interface, placed at a clean seam, testable through that interface. Use this language and these principles wherever code is being designed or restructured. The aim is leverage for callers, locality for maintainers, and testability for everyone.
|
|
9
|
+
|
|
10
|
+
## Glossary
|
|
11
|
+
|
|
12
|
+
Use these terms exactly — don't substitute "component," "service," "API," or "boundary." Consistent language is the whole point.
|
|
13
|
+
|
|
14
|
+
**Module** — anything with an interface and an implementation. Deliberately scale-agnostic: a function, class, package, or tier-spanning slice. _Avoid_: unit, component, service.
|
|
15
|
+
|
|
16
|
+
**Interface** — everything a caller must know to use the module correctly: the type signature, but also invariants, ordering constraints, error modes, required configuration, and performance characteristics. _Avoid_: API, signature (too narrow — they refer only to the type-level surface).
|
|
17
|
+
|
|
18
|
+
**Implementation** — what's inside a module, its body of code. Distinct from **Adapter**: a thing can be a small adapter with a large implementation (a Postgres repo) or a large adapter with a small implementation (an in-memory fake). Reach for "adapter" when the seam is the topic; "implementation" otherwise.
|
|
19
|
+
|
|
20
|
+
**Depth** — leverage at the interface: the amount of behaviour a caller (or test) can exercise per unit of interface they have to learn. A module is **deep** when a large amount of behaviour sits behind a small interface, **shallow** when the interface is nearly as complex as the implementation.
|
|
21
|
+
|
|
22
|
+
**Seam** _(Michael Feathers)_ — a place where you can alter behaviour without editing in that place; the *location* at which a module's interface lives. Where to put the seam is its own design decision, distinct from what goes behind it. _Avoid_: boundary (overloaded with DDD's bounded context).
|
|
23
|
+
|
|
24
|
+
**Adapter** — a concrete thing that satisfies an interface at a seam. Describes *role* (what slot it fills), not substance (what's inside).
|
|
25
|
+
|
|
26
|
+
**Leverage** — what callers get from depth: more capability per unit of interface they learn. One implementation pays back across N call sites and M tests.
|
|
27
|
+
|
|
28
|
+
**Locality** — what maintainers get from depth: change, bugs, knowledge, and verification concentrate in one place rather than spreading across callers. Fix once, fixed everywhere.
|
|
29
|
+
|
|
30
|
+
## Deep vs shallow
|
|
31
|
+
|
|
32
|
+
**Deep module** = small interface + lots of implementation:
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
┌─────────────────────┐
|
|
36
|
+
│ Small Interface │ ← Few methods, simple params
|
|
37
|
+
├─────────────────────┤
|
|
38
|
+
│ │
|
|
39
|
+
│ Deep Implementation│ ← Complex logic hidden
|
|
40
|
+
│ │
|
|
41
|
+
└─────────────────────┘
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
**Shallow module** = large interface + little implementation (avoid):
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
┌─────────────────────────────────┐
|
|
48
|
+
│ Large Interface │ ← Many methods, complex params
|
|
49
|
+
├─────────────────────────────────┤
|
|
50
|
+
│ Thin Implementation │ ← Just passes through
|
|
51
|
+
└─────────────────────────────────┘
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
When designing an interface, ask:
|
|
55
|
+
|
|
56
|
+
- Can I reduce the number of methods?
|
|
57
|
+
- Can I simplify the parameters?
|
|
58
|
+
- Can I hide more complexity inside?
|
|
59
|
+
|
|
60
|
+
## Principles
|
|
61
|
+
|
|
62
|
+
- **Depth is a property of the interface, not the implementation.** A deep module can be internally composed of small, mockable, swappable parts — they just aren't part of the interface. A module can have **internal seams** (private to its implementation, used by its own tests) as well as the **external seam** at its interface.
|
|
63
|
+
- **The deletion test.** Imagine deleting the module. If complexity vanishes, it was a pass-through. If complexity reappears across N callers, it was earning its keep.
|
|
64
|
+
- **The interface is the test surface.** Callers and tests cross the same seam. If you want to test *past* the interface, the module is probably the wrong shape.
|
|
65
|
+
- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a seam unless something actually varies across it.
|
|
66
|
+
|
|
67
|
+
## Designing for testability
|
|
68
|
+
|
|
69
|
+
Good interfaces make testing natural:
|
|
70
|
+
|
|
71
|
+
1. **Accept dependencies, don't create them.**
|
|
72
|
+
|
|
73
|
+
```typescript
|
|
74
|
+
// Testable
|
|
75
|
+
function processOrder(order, paymentGateway) {}
|
|
76
|
+
|
|
77
|
+
// Hard to test
|
|
78
|
+
function processOrder(order) {
|
|
79
|
+
const gateway = new StripeGateway();
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
2. **Return results, don't produce side effects.**
|
|
84
|
+
|
|
85
|
+
```typescript
|
|
86
|
+
// Testable
|
|
87
|
+
function calculateDiscount(cart): Discount {}
|
|
88
|
+
|
|
89
|
+
// Hard to test
|
|
90
|
+
function applyDiscount(cart): void {
|
|
91
|
+
cart.total -= discount;
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
3. **Small surface area.** Fewer methods = fewer tests needed. Fewer params = simpler test setup.
|
|
96
|
+
|
|
97
|
+
## Relationships
|
|
98
|
+
|
|
99
|
+
- A **Module** has exactly one **Interface** (the surface it presents to callers and tests).
|
|
100
|
+
- **Depth** is a property of a **Module**, measured against its **Interface**.
|
|
101
|
+
- A **Seam** is where a **Module**'s **Interface** lives.
|
|
102
|
+
- An **Adapter** sits at a **Seam** and satisfies the **Interface**.
|
|
103
|
+
- **Depth** produces **Leverage** for callers and **Locality** for maintainers.
|
|
104
|
+
|
|
105
|
+
## Rejected framings
|
|
106
|
+
|
|
107
|
+
- **Depth as ratio of implementation-lines to interface-lines** (Ousterhout): rewards padding the implementation. We use depth-as-leverage instead.
|
|
108
|
+
- **"Interface" as the TypeScript `interface` keyword or a class's public methods**: too narrow — interface here includes every fact a caller must know.
|
|
109
|
+
- **"Boundary"**: overloaded with DDD's bounded context. Say **seam** or **interface**.
|
|
110
|
+
|
|
111
|
+
## Going deeper
|
|
112
|
+
|
|
113
|
+
- **Deepening a cluster given its dependencies** — see [DEEPENING.md](DEEPENING.md): dependency categories, seam discipline, and replace-don't-layer testing.
|
|
114
|
+
- **Exploring alternative interfaces** — see [DESIGN-IT-TWICE.md](DESIGN-IT-TWICE.md): spin up parallel sub-agents to design the interface several radically different ways, then compare on depth, locality, and seam placement.
|
|
115
|
+
|
|
116
|
+
## Ship integration
|
|
117
|
+
|
|
118
|
+
This skill is part of the engineering profile shipped by
|
|
119
|
+
`opencode-ship@1.0`. The strong planner child session is
|
|
120
|
+
configured with `openai/gpt-5.6-sol` and the durable workflow
|
|
121
|
+
state lives under `<git-common-dir>/opencode-ship/`. All
|
|
122
|
+
GitHub mutations go through Ship's typed tools; never use
|
|
123
|
+
`gh api` or raw shell.
|