@codename_inc/spectre 4.0.0 β†’ 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -65,7 +65,7 @@ Session continuity deep dive: [`docs/codex-sessionstart-memory.md`](./docs/codex
65
65
 
66
66
  ## πŸ” How It Works
67
67
 
68
- - run one of the kickoff prompts in Claude Code - `/spectre:scope` is the main command for building new features, but also `/spectre:kickoff` for high ambiguity new features (includes web research), `/spectre:research` for codebase research "how might we build …” style Qs, or `/spectre:ux_spec` to define user flows, components, and layout for a new feature.
68
+ - run one of the kickoff prompts in Claude Code - `/spectre:scope` is the main command for building new features, but also `/spectre:kickoff` for high ambiguity new features (includes web research), `/spectre:research` for codebase research "how might we build …” style Qs, or `/spectre:ux` to define user flows, components, and layout for a new feature.
69
69
 
70
70
  - follow the prompts/instructions to create the related canonical document and Claude Code will suggest the next step in the SPECTRE workflow automatically (e.g., going from `scope` to `plan` to `tasks` and so on)
71
71
 
@@ -281,7 +281,7 @@ Although I do sometimes use @spectre:web-research for web research. It's like mi
281
281
 
282
282
  - start /spectre:scope to get crisp on what's in/out. this is non-negotiable unless the feature is a one line ask.
283
283
 
284
- - if the feature's ux/user flow is unclear to me, or I want to make sure to really nail it, i run /spectre:ux_spec. Its similar to /spectre:scope but focuses on getting clear on the core user flows.
284
+ - if the feature's ux/user flow is unclear to me, or I want to make sure to really nail it, i run /spectre:ux. Its similar to /spectre:scope but focuses on getting clear on the core user flows.
285
285
 
286
286
  - /spectre:plan to build out a well researched technical design or set of tasks
287
287
 
@@ -367,7 +367,7 @@ I use /spectre:fix for pretty much all bugs I run into.
367
367
  | --- | --- |
368
368
  | `/spectre:sweep` | Light cleanup pass β€” lint, test, descriptive commits |
369
369
  | `/spectre:learn` | Capture knowledge for future sessions |
370
- | `/spectre:ux_spec` | UX specification for UI-heavy features |
370
+ | `/spectre:ux` | UX specification for UI-heavy features |
371
371
  | `/spectre:fix` | Investigate bugs & implement fixes |
372
372
 
373
373
  ## πŸ“ Repository Structure
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codename_inc/spectre",
3
- "version": "4.0.0",
3
+ "version": "5.0.0",
4
4
  "type": "module",
5
5
  "bin": {
6
6
  "spectre": "./bin/spectre.js"
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "spectre",
3
- "version": "4.0.0",
3
+ "version": "5.0.0",
4
4
  "description": "Agentic coding workflow with session memory. spectre guides you through Scope, Plan, Execute, Clean, Test, Rebase, and Extract phases."
5
5
  }
@@ -94,7 +94,7 @@ This is how the creator of SPECTRE uses it daily:
94
94
  ### Building a Feature (the main loop)
95
95
 
96
96
  1. **`/spectre:scope`** β€” Get crisp on what's in/out. Non-negotiable unless it's a one-liner.
97
- - If UX is unclear: run `/spectre:ux_spec` first for user flows and components
97
+ - If UX is unclear: run `/spectre:ux` first for user flows and components
98
98
 
99
99
  2. **`/spectre:plan`** β€” Build a well-researched technical design or task set
100
100
  - Once you have scope/plan/tasks, run `/spectre:handoff` for a fresh context window
@@ -147,7 +147,7 @@ Brain dump context, walk away, review the PR. Zero confirmation gates β€” scope,
147
147
  | `/spectre:scope` | Starting any new feature β€” interactive scoping with IN/OUT boundaries |
148
148
  | `/spectre:kickoff` | High-ambiguity projects β€” includes web research for best practices |
149
149
  | `/spectre:research` | Need deep codebase understanding before planning |
150
- | `/spectre:ux_spec` | UI-heavy features that need screen layouts, user flows, component states |
150
+ | `/spectre:ux` | UI-heavy features that need screen layouts, user flows, component states |
151
151
 
152
152
  ### Phase: Plan β€” Research & Task Breakdown
153
153
 
@@ -213,7 +213,7 @@ Brain dump context, walk away, review the PR. Zero confirmation gates β€” scope,
213
213
  -> `/spectre:scope` (always start here unless it's trivial)
214
214
 
215
215
  **Feature has complex UI?**
216
- -> `/spectre:ux_spec` after scope, before plan
216
+ -> `/spectre:ux` after scope, before plan
217
217
 
218
218
  **High ambiguity / new project?**
219
219
  -> `/spectre:kickoff` (includes web research)
@@ -283,7 +283,7 @@ SPECTRE generates these documents in `docs/tasks/{branch_name}/`:
283
283
  | Document | Generated By | Purpose |
284
284
  |----------|-------------|---------|
285
285
  | `concepts/scope.md` | `/spectre:scope` | What's IN and OUT |
286
- | `specs/ux.md` | `/spectre:ux_spec` | User flows, components, interactions |
286
+ | `specs/ux.md` | `/spectre:ux` | User flows, components, interactions |
287
287
  | `specs/plan.md` | `/spectre:create_plan` | Technical design and phasing |
288
288
  | `specs/tasks.md` | `/spectre:create_tasks` | Concrete tasks with acceptance criteria |
289
289
  | `reviews/code_review.md` | `/spectre:code_review` | Severity-based code review findings |
@@ -0,0 +1,314 @@
1
+ ---
2
+ name: prototype
3
+ description: πŸ‘» | Generate a self-contained HTML prototype to validate a feature visually before planning - primary agent
4
+ user-invocable: true
5
+ ---
6
+
7
+ # prototype
8
+
9
+ ## Input Handling
10
+
11
+ Treat the current command arguments as this workflow's input. When invoked from a slash command, use the forwarded `$ARGUMENTS` value.
12
+
13
+ # prototype: Make the Feature Visible Before You Plan It
14
+
15
+ Produce a self-contained, clickable HTML artifact that makes a feature visible β€” resolving ambiguity before scope, validating flows before plan, or anchoring stakeholder review. Output: single portable HTML file the user can open locally or host anywhere, saved to `{OUT_DIR}/prototypes/{name}_{MMDDYY}.html`.
16
+
17
+ ## ARGUMENTS
18
+
19
+ <ARGUMENTS> $ARGUMENTS </ARGUMENTS>
20
+
21
+ ## Invocation Modes
22
+
23
+ Detect mode from environment markers, ARGUMENTS, and existing docs. **Order matters** β€” check from most context to least:
24
+
25
+ - **Complete ux.md exists** (post-ux) β€” full Stage 2 spec is on disk. The prototype's job is to **render the spec**, not synthesize it. Default fidelity: **high-fi**. Skip all intake except visual anchor. Treat ux.md as authoritative β€” don't invent screens, don't contradict documented states or copy. On completion, recommend `/spectre:plan` or `/spectre:create_tasks`.
26
+ - **`FROM_UX=true`** β€” invoked mid-flow from `ux` Stage 1 β†’ Stage 2 gate. Only approved flows exist (no detailed spec yet). Skip flow-discovery intake. Default fidelity: **mid-fi**. On completion, point user back to `ux` Stage 2.
27
+ - **`--explore` flag in ARGUMENTS** β€” pre-scope discovery. Concept is unvalidated. Default fidelity: **low-fi**. On completion, recommend `/spectre:scope` as next step.
28
+ - **scope.md exists for this branch** (no ux.md) β€” post-scope validation. Default fidelity: **mid-fi**. On completion, recommend `/spectre:ux` or `/spectre:plan` based on feature complexity.
29
+ - **Standalone, no context** β€” ask the user what they're prototyping. Default fidelity: **mid-fi**.
30
+
31
+ ---
32
+
33
+ # STAGE 1: Intake & Fidelity Alignment
34
+
35
+ **Goal**: Confirm what we're prototyping, at what fidelity, and what visual anchor to use. Keep this tight β€” 2 to 4 questions, never a form.
36
+
37
+ ## Step 1 β€” Immediate Reply & Detect Context
38
+
39
+ - **Action** β€” ImmediateReply: Respond before any tools.
40
+ - **If** `FROM_UX=true` β†’ acknowledge ux context, read approved flows from `{OUT_DIR}/ux.md`, **SKIP to Step 3**
41
+ - **Else If** ARGUMENTS empty β†’ probe: "What are we prototyping? A quick description is enough β€” I'll figure out the fidelity from context."
42
+ - **Else** β†’ proceed to Step 2
43
+ - **CRITICAL**: No tool calls in this step except reading ux output when `FROM_UX=true`.
44
+
45
+ ## Step 2 β€” Read Available Context & Classify ux.md
46
+
47
+ - **Action** β€” DetectExistingDocs: Check for relevant inputs before asking the user anything.
48
+ - `branch_name=$(git rev-parse --abbrev-ref HEAD 2>/dev/null || echo unknown)`
49
+ - Look for: `docs/tasks/{branch_name}/concepts/scope.md`, `docs/tasks/{branch_name}/specs/prd.md`, `docs/tasks/{branch_name}/ux.md`
50
+ - Read whichever exist FULLY (no offset/limit)
51
+
52
+ - **Action** β€” ClassifyUxDoc: If `ux.md` exists, classify its completeness β€” this drives fidelity AND how much intake to skip.
53
+ - **Complete** β€” contains all of: Screens, Layouts, Components, Interactions, States, Content sections (the Stage 2 deliverables from `/spectre:ux`). Treat as authoritative. Skip flow-discovery questions. Set mode = **post-ux**.
54
+ - **Flows-only** β€” contains user flows / journeys but missing Stage 2 sections. Treat flows as approved input but expect to make UI decisions. Set mode = **flows-only ux**.
55
+ - **Absent** β€” fall back to scope.md / prd.md / standalone modes.
56
+
57
+ ## Step 3 β€” Recommend Fidelity, Confirm Anchor
58
+
59
+ Pick fidelity from signals available:
60
+
61
+ | Signal present | Recommends |
62
+ |---|---|
63
+ | `--explore` flag, or no scope/prd | **Low-fi** β€” grayscale, layout-only, no typography polish |
64
+ | scope.md exists, no design system anchor | **Mid-fi** β€” real colors, basic type, simplified components (default) |
65
+ | scope.md + flows-only ux.md, or brand/design system anchor | **Mid-fi to High-fi** β€” depends on anchor strength |
66
+ | **Complete ux.md** (post-ux) | **High-fi** β€” full design tokens, realistic data, micro-interactions; render the spec faithfully |
67
+
68
+ ### Intake by mode
69
+
70
+ **Post-ux mode** (complete ux.md) β€” present a tight confirmation, ask one question:
71
+
72
+ > **Prototype plan** β€” rendering complete UX spec
73
+ >
74
+ > Source: `{path to ux.md}` ({N} screens, {M} components, {K} states specified)
75
+ > Fidelity: **high-fi** (default β€” full spec is on disk; I'll render it faithfully, not invent)
76
+ >
77
+ > One thing I need: **visual anchor** β€” brand colors, font stack, an existing app/URL to match, or a named aesthetic (e.g. "Linear-style", "Notion-quiet", "Stripe-clean"). If the spec already specifies design tokens, reply "use the spec." If you skip this, I'll commit to a deliberate named aesthetic and call it out at the top of the file.
78
+
79
+ **All other modes** β€” present recommendation + request anchor + confirm framing:
80
+
81
+ > **Prototype plan**
82
+ >
83
+ > I'm reading this as: **{inferred feature/flow}**
84
+ > Recommended fidelity: **{low-fi | mid-fi | high-fi}** β€” {one-line reason}
85
+ > Primary flow: **{name}** (from {scope.md | ux.md flows | your description})
86
+ >
87
+ > Two things I need from you:
88
+ > 1. **Override fidelity?** Or "looks good."
89
+ > 2. **Visual anchor** β€” brand colors, font stack, an existing app/URL to match, or a named aesthetic (e.g. "Linear-style", "Notion-quiet", "Stripe-clean"). If you skip this, I'll commit to a deliberate named aesthetic and call it out at the top of the file so you can redirect.
90
+
91
+ **Wait for response.** If user pushes back on fidelity or feature framing, adjust and re-confirm.
92
+
93
+ ---
94
+
95
+ # STAGE 2: Parallel Research & Generation
96
+
97
+ **Gate**: Only proceed after Stage 1 confirmation (or `FROM_UX=true`).
98
+
99
+ ## Step 4 β€” Dispatch Parallel Subagents
100
+
101
+ Spawn three subagents in parallel. Each has a focused job.
102
+
103
+ ### `@spectre:web-research` β€” Visual Reference Discovery
104
+
105
+ Prompt template:
106
+
107
+ > Research visual design patterns and UI conventions for **{feature type}**. Specifically:
108
+ >
109
+ > 1. Find 2–3 living examples or screenshots of similar UI patterns in well-regarded products. Return URLs and visual descriptions.
110
+ > 2. Identify the established UX convention for this interaction type (wizard, dashboard, list+detail, modal flow, etc.) and any recent (2025–2026) refinements.
111
+ > 3. If the user specified an aesthetic anchor ({anchor_text}), find representative color palettes (hex), typography choices (font families with fallbacks), and one or two distinctive design moves that define the aesthetic.
112
+ > 4. Return concrete decisions β€” colors, fonts, layout patterns β€” not general advice.
113
+ >
114
+ > Length: under 400 words. Cite sources.
115
+
116
+ **Why**: Grounds generation in specific references. Without this step the model defaults to its own distribution (Inter + purple gradients). This is the anti-slop forcing function.
117
+
118
+ ### `@spectre:analyst` β€” Flow & Content Extraction
119
+
120
+ Use one of two prompt templates based on mode detected in Step 2.
121
+
122
+ **Extraction mode** β€” post-ux (complete ux.md present):
123
+
124
+ > Read **{path to ux.md}** fully. The Stage 2 spec is authoritative β€” your job is to **extract** structured data for HTML rendering, NOT to synthesize new screens, states, or content.
125
+ >
126
+ > Return a render brief organized by ux.md section:
127
+ >
128
+ > 1. **Screens** β€” verbatim from the Screens section: name, purpose, navigation relationships
129
+ > 2. **Layouts** β€” verbatim from Layouts: per-screen header/main/footer + responsive breakpoints
130
+ > 3. **Components** β€” verbatim from Components: each element's purpose, location, all documented states (default, hover, active, disabled, loading, error)
131
+ > 4. **Interactions** β€” verbatim from the Interactions table: Element | Action | Result
132
+ > 5. **States** β€” verbatim from the States table: State | Trigger | Appearance | Available Actions
133
+ > 6. **Content** β€” verbatim copy from the Content section: page titles, button labels, empty-state messages, error messages, confirmation dialogs. Use this copy EXACTLY in the prototype β€” do not paraphrase.
134
+ > 7. **Edge cases & a11y** β€” note any documented constraints (limits, null/long data, keyboard actions, focus management) the prototype should reflect
135
+ >
136
+ > If the spec specifies a state or content value, the prototype must match it. If the spec is silent on a detail, flag it as a "filled assumption" so it appears in the prototype's metadata header. Never invent screens that aren't in the spec.
137
+
138
+ **Synthesis mode** β€” flows-only ux, scope-only, or standalone:
139
+
140
+ > Read these documents fully: **{list of paths β€” scope.md, prd.md, ux.md flows section if present}**. Extract a content skeleton for an HTML prototype:
141
+ >
142
+ > 1. **Primary flow** β€” entry β†’ action β†’ outcome, with decision points
143
+ > 2. **Required UI states per screen** β€” every screen needs at minimum: happy path, empty state, error or edge state. Some screens also need: loading, success
144
+ > 3. **Stated constraints** β€” any layout, behavior, or content constraints from the docs
145
+ > 4. **Realistic content** β€” actual product names, plausible numbers, real-looking copy. NO Lorem ipsum. NO "Card Title." If domain-specific data is unclear, invent plausible values that match the feature's domain.
146
+ > 5. **Component inventory** β€” every recurring UI element that will need a named CSS class (button, card, input, badge, etc.)
147
+ >
148
+ > Return a structured flow brief: screen list, per-screen state list, realistic content for each, component inventory.
149
+
150
+ **Why**: This is the content skeleton. In post-ux mode, the spec already did this work β€” re-synthesizing risks contradicting documented decisions. In all other modes, skipping synthesis produces prototypes with Lorem ipsum and inconsistent component styling.
151
+
152
+ ### `@spectre:patterns` β€” Existing Codebase Anchor (only if applicable)
153
+
154
+ Skip this agent if there is no existing app to anchor to. Otherwise:
155
+
156
+ > Find existing UI patterns in this codebase that the prototype should match or extend: design tokens (colors, spacing, type), component conventions (button styles, card layouts), and any established interaction patterns. Return file references with the actual values (hex codes, class names, etc.) β€” not just paths.
157
+
158
+ **Why**: When prototyping inside an existing app, the prototype should look like a plausible new screen of that app, not a designer's blank canvas.
159
+
160
+ ## Step 5 β€” Generate the HTML Artifact
161
+
162
+ Wait for ALL subagents to complete. Synthesize their outputs, then generate a single self-contained HTML file. Use `@spectre:dev` to produce the file (or inline if the synthesis is straightforward).
163
+
164
+ ### Hard constraints on the generated HTML
165
+
166
+ **File structure** (every prototype includes these in order):
167
+
168
+ 1. **`<!DOCTYPE html>` + minimal `<head>`** with `<meta viewport>` and an inline `<style>` block
169
+ 2. **Metadata comment block** at the very top of `<head>`:
170
+ ```html
171
+ <!--
172
+ SPECTRE PROTOTYPE
173
+ Feature: {feature name}
174
+ Fidelity: {low-fi | mid-fi | high-fi}
175
+ Generated: {YYYY-MM-DD}
176
+ Branch: {branch_name}
177
+ Flow covered: {primary flow}
178
+ Screens/states: {comma-separated list}
179
+ Visual anchor: {named aesthetic or reference URL}
180
+ Source spec: {path to ux.md if post-ux mode, else "none β€” synthesized from {scope.md | description}"}
181
+ Key assumptions: {bullet list of design decisions and content assumptions}
182
+ Filled assumptions: {only in post-ux mode β€” items the spec was silent on that the prototype filled in; review these against the spec}
183
+ NOT included: {explicit list of what was deliberately left out}
184
+ Next step: /spectre:plan OR resume /spectre:ux Stage 2
185
+ -->
186
+ ```
187
+ 3. **Design tokens comment block** in `<head>`:
188
+ ```html
189
+ <!-- DESIGN TOKENS
190
+ Primary: #{hex}
191
+ Accent: #{hex}
192
+ Surface: #{hex}
193
+ Text: #{hex}
194
+ Font: {family}, served from {CDN or system}
195
+ Border-radius: {value}
196
+ Spacing unit: {value}
197
+ -->
198
+ ```
199
+ Also encode these as CSS custom properties on `:root` so they're reusable in the stylesheet.
200
+ 4. **Navigation bar** (only if multi-screen) β€” vanilla JS section toggling via `display:block/none`. No routing, no framework.
201
+ 5. **One `<section>` per screen.** Every screen must include the happy path AND at least one of: empty state, error state, loading state. Skipping these is the most common prototype failure mode.
202
+ 6. **Inline `<script>`** at end of body for interactions (tab switching, form submit interception, modal toggle, accordion). Vanilla JS only.
203
+
204
+ **Size budget**: under 300KB. No base64 photos. No Chart.js or other large libraries. Use inline SVG and CSS-drawn shapes for any illustrations. Tailwind via CDN is acceptable for mid/high-fi; skip for low-fi.
205
+
206
+ **Asset rules** (keep the file portable so users can open locally, email it, host on a gist, or push to any static host):
207
+ - No `<img src="https://...">` that can 404 β€” use inline SVG, data URIs, or CSS shapes
208
+ - No local relative paths (`./image.png`, `../style.css`) β€” they break the moment the file moves
209
+ - Fonts: Google Fonts CDN (single family, two weights max) or system fonts. No custom WOFF files.
210
+
211
+ ### Negative constraints (embed these explicitly in the @spectre:dev prompt)
212
+
213
+ When delegating to `@spectre:dev`, the prompt MUST include these as forbidden patterns:
214
+
215
+ - **No generic AI aesthetic.** Do not use Inter or Roboto by default. Do not use purple gradients on white. Commit to a named, deliberate aesthetic and call it out in the metadata.
216
+ - **No Lorem ipsum or placeholder filler.** All text must be realistic for the domain. "Card Title", "User Name", "Description goes here" are forbidden.
217
+ - **No happy-path-only screens.** Every screen must show at least one non-happy state (empty, error, or edge).
218
+ - **No broken interactivity.** Every `onclick`, `<form>`, or interactive element must respond visually. No `href="#"` that causes page jumps. No event handlers that throw console errors.
219
+ - **No external image dependencies that can break.** Inline SVG only.
220
+ - **No inconsistent component instances.** Define every recurring component as a named CSS class ONCE and reuse it. Do not re-style inline. If a card appears five times, it uses the same class five times.
221
+ - **No page-thinking when flow-thinking is required.** Screens appear in the order a user encounters them, not in the order they're easy to build.
222
+ - **No file-size bloat.** No base64 photos. No Chart.js, D3, or other heavyweight libraries. SVG and CSS only.
223
+
224
+ ### Output location
225
+
226
+ - **Action** β€” DetermineOutputDir:
227
+ - `branch_name=$(git rev-parse --abbrev-ref HEAD 2>/dev/null || echo unknown)`
228
+ - **If** `FROM_UX=true` or `FROM_KICKOFF=true` β†’ use the existing task directory
229
+ - **Else If** user specifies path β†’ use that
230
+ - **Else** β†’ `OUT_DIR=docs/tasks/{branch_name}`
231
+ - `mkdir -p "$OUT_DIR/prototypes"`
232
+
233
+ - **Action** β€” SaveArtifact: Write file to `{OUT_DIR}/prototypes/{feature_slug}_{MMDDYY}.html`
234
+
235
+ ## Step 6 β€” Self-Check Portability
236
+
237
+ Before reporting completion, sanity-check the artifact against the portability rules:
238
+
239
+ - File size under 300KB
240
+ - No `<img src="http...">` external images
241
+ - No local relative paths (`./`, `../`, `/local/`)
242
+ - All recurring components share a named CSS class (no inline-styled duplicates)
243
+ - Every screen includes at least one non-happy state
244
+
245
+ Surface any violations as caveats in the handoff. Don't silently ship a broken portable file.
246
+
247
+ ## Step 7 β€” Present & Handoff
248
+
249
+ - **Action** β€” PresentForReview:
250
+
251
+ > **Prototype complete**: `{path}` ({size} KB, {N} screens, {fidelity})
252
+ >
253
+ > **Visual anchor**: {named aesthetic}
254
+ > **Key assumptions made** (also embedded in file header):
255
+ > - {bullet 1}
256
+ > - {bullet 2}
257
+ > - {bullet 3}
258
+ > **NOT included**: {explicit list}
259
+ >
260
+ > Open the file in a browser to review (`open {path}` on macOS, or drag into any browser tab). The file is fully self-contained β€” share it however you like (email, gist, static host, etc.). Reply with feedback to iterate, or pick a next step below.
261
+
262
+ - **Action** β€” SurfaceFilledAssumptions (post-ux mode only): If `mode = post-ux` AND any filled assumptions exist (items the spec was silent on that the prototype filled in), append a closing-the-loop block:
263
+
264
+ > **Filled assumptions** β€” ux.md was silent on these; I made calls to render the spec. Review and tell me which to promote into the spec:
265
+ >
266
+ > 1. {assumption} β†’ I chose **{decision}** ({why, one line})
267
+ > 2. {assumption} β†’ I chose **{decision}** ({why, one line})
268
+ > 3. {assumption} β†’ I chose **{decision}** ({why, one line})
269
+ >
270
+ > Reply with numbers to update ux.md (e.g. `1, 3`), `all` to add all, or `skip` to leave the spec as-is.
271
+
272
+ If user picks updates:
273
+ - Edit `ux.md` directly: place each chosen item in the appropriate section (Components / States / Content / Edge Cases / Interactions).
274
+ - Re-run the Step 6 portability check (no regen needed unless user also requested HTML changes).
275
+ - Re-present with a one-line diff per added item: `ux.md ← added: {item} (in {section})`.
276
+
277
+ - **Action** β€” RenderFooter: Render Next Steps using `@skill-spectre:spectre-guide` skill, with mode-specific recommendation:
278
+ - **If `FROM_UX=true`** β†’ recommend: "Resume `/spectre:ux` Stage 2 with this prototype as input"
279
+ - **If `--explore`** β†’ recommend: `/spectre:scope` with the prototype as anchor
280
+ - **If post-scope** β†’ recommend: `/spectre:ux` (if flows still need detail) or `/spectre:plan` (if ready to build)
281
+ - **Else** β†’ standard Next Steps options
282
+
283
+ ---
284
+
285
+ ## Iteration Loop
286
+
287
+ If the user replies with feedback after Step 7:
288
+ - Small visual tweaks (color, copy, layout) β†’ edit the HTML directly
289
+ - Structural changes (add screen, change flow) β†’ re-run Step 4 subagents with the deltas and regenerate
290
+ - **Spec contradicts prototype** (post-ux mode) β†’ ask which is authoritative for each contradiction, then update ux.md AND the HTML together so they stay paired; re-run Step 6 portability check
291
+ - After any edit, re-run the Step 6 self-check before re-presenting
292
+
293
+ ---
294
+
295
+ ## Success Criteria
296
+
297
+ - [ ] Immediate reply sent; mode detected (FROM_UX, --explore, post-scope, or standalone)
298
+ - [ ] Existing context docs (scope.md, prd.md, ux.md) read FULLY before asking questions
299
+ - [ ] Fidelity recommended with rationale; user confirmed or overrode
300
+ - [ ] Visual anchor captured (named aesthetic or reference) β€” never left as generic default
301
+ - [ ] Three subagents dispatched in parallel: web-research (references), analyst (flow + content), patterns (existing codebase anchor, if applicable)
302
+ - [ ] ALL subagents completed before generation
303
+ - [ ] HTML artifact is single self-contained file under 300KB
304
+ - [ ] Metadata comment block at top of `<head>` includes feature, fidelity, assumptions, NOT-included list
305
+ - [ ] Design tokens block present and encoded as CSS custom properties on `:root`
306
+ - [ ] Every screen includes happy path + at least one non-happy state (empty, error, or edge)
307
+ - [ ] No Lorem ipsum, no placeholder filler β€” realistic domain content throughout
308
+ - [ ] No external image dependencies (inline SVG only)
309
+ - [ ] All recurring components use a single named CSS class (no inline re-styling)
310
+ - [ ] All interactive elements respond visually; no console errors; no `href="#"` jump links
311
+ - [ ] Saved to `{OUT_DIR}/prototypes/{slug}_{MMDDYY}.html`
312
+ - [ ] Portability self-check run (size, external images, relative paths, component reuse, state coverage); violations surfaced as caveats
313
+ - [ ] (post-ux mode only) Filled assumptions surfaced in chat with offer to update ux.md; selected items written to ux.md with diff summary
314
+ - [ ] Next Steps footer rendered with mode-appropriate recommendation
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: scope
3
- description: πŸ‘» | Interactively scope a feature or improvement, generating a complete Scope document that clarifies what's IN and OUT -- primary agent
3
+ description: πŸ‘» | Interactively scope a feature or improvement, generating a complete Scope document with IN, OUT, and ANTI-SCOPE boundaries -- primary agent
4
4
  user-invocable: true
5
5
  ---
6
6
 
@@ -12,104 +12,144 @@ Treat the current command arguments as this workflow's input. When invoked from
12
12
 
13
13
  # scope: Interactive Feature Scoping
14
14
 
15
- Collaborative workflow for structuring unstructured thoughts into clear scope boundaries through contextual brainstorming and targeted clarifications. Focuses on user value and scope boundaries before technical considerations. Output: comprehensive scope document with clear boundaries, user value, and key decisions saved to `{OUT_DIR}/concepts/scope.md`.
15
+ Collaborative workflow for structuring unstructured thoughts into clear scope boundaries through a grounded hypothesis and targeted clarifications. Focuses on user value and scope boundaries before technical considerations. Output: scope document with clear boundaries (IN / OUT / ANTI-SCOPE), user value, load-bearing assumptions, and key decisions saved to `{OUT_DIR}/concepts/scope.md`.
16
16
 
17
17
  ## ARGUMENTS
18
18
 
19
- &lt;ARGUMENTS&gt; $ARGUMENTS &lt;/ARGUMENTS&gt;
19
+ <ARGUMENTS> $ARGUMENTS </ARGUMENTS>
20
20
 
21
- ## Step 1: Immediate Reply & Gather Context
21
+ ## Step 1: Immediate Reply & Context Pickup
22
22
 
23
23
  - **Action** β€” ImmediateReply: Respond before any tools.
24
- - **If** `FROM_KICKOFF=true` β†’ acknowledge kickoff context, read `KICKOFF_DOC`, extract (Core Problem, User Value, Decisions Made, Remaining Ambiguities, Key Code Refs), **SKIP to Step 3**
25
- - **Else If** ARGUMENTS empty β†’ probe for context enthusiastically
26
- - **Else** β†’ proceed to Step 2
27
- - **CRITICAL**: No tool calls except reading kickoff doc when FROM_KICKOFF=true
24
+ - **If** `FROM_KICKOFF=true` β†’ acknowledge kickoff context, read `KICKOFF_DOC`, extract (Core Problem, User Value, Decisions Made, Remaining Ambiguities, Key Code Refs), **SKIP to Step 4**
25
+ - **Else If** ARGUMENTS empty β†’ probe for context enthusiastically and **WAIT** for user
26
+ - **Else** β†’ proceed with the steps below
27
+ - **CRITICAL**: No tool calls in this step except reading the kickoff doc when `FROM_KICKOFF=true`.
28
28
 
29
- ## Step 2: Interactive Scope Exploration
29
+ - **Action** β€” DetectExistingArtifacts: Before proposing a hypothesis, check for prior context that may already answer questions.
30
+ - `branch_name=$(git rev-parse --abbrev-ref HEAD 2>/dev/null || echo unknown)`
31
+ - Look for: `docs/tasks/{branch_name}/concepts/scope.md`, `docs/tasks/{branch_name}/task_context.md`
32
+ - **If** prior `scope.md` exists β†’ read fully; treat this invocation as a re-scope. Surface what was already settled and ask only about what's new or changed.
33
+ - **If** captured project knowledge is available (via `/spectre:apply`-style memory or session logs) β†’ surface decisions/patterns/gotchas relevant to this area before asking the user.
34
+
35
+ ## Step 2: Ground the Hypothesis (Fast)
36
+
37
+ **SKIP IF FROM_KICKOFF=true** β€” kickoff already grounded.
38
+
39
+ - **Action** β€” FastGround: Run ONE fast lookup to ground the hypothesis in repo reality. Pick the most informative single call:
40
+ - **`@spectre:finder` for one targeted query** β€” when you need to know what files/components exist for this area
41
+ - **One `grep` or `glob`** β€” when you need to verify a specific assumption ("does X already exist?")
42
+
43
+ **Constraints**:
44
+ - **One call only.** This is grounding, not research. Tech research is `/spectre:plan`'s job.
45
+ - **Fast.** If the call would take more than a few seconds, skip it and ask the user instead.
46
+ - If you need more than one signal, that's a sign this should be a `/spectre:kickoff` rather than a `/spectre:scope`.
47
+
48
+ ## Step 3: Interactive Scope Exploration
30
49
 
31
50
  **SKIP IF FROM_KICKOFF=true**
32
51
 
33
- - **Action** β€” ExploreScope: Collaborative dialogue focused on boundaries and user experience.
52
+ - **Action** β€” ExploreScope: Collaborative dialogue focused on boundaries, user experience, and anti-scope.
34
53
 
35
- **CRITICAL**: Focus on WHAT, not HOW. Defer all technical/implementation questions until scope boundaries are finalized. Only ask technical questions if the scope itself is inherently technical (e.g., "migrate database from X to Y").
54
+ **CRITICAL**: Focus on WHAT, not HOW. Defer all technical/implementation questions to `/spectre:plan`. Only ask technical questions if the scope itself is inherently technical (e.g., "migrate database from X to Y").
36
55
 
37
- **PATTERN**: Lead with a rich initial exploration. In your FIRST response, propose concrete hypotheses AND ask 5-8 questions across multiple dimensions. Give the user a full landscape to react to, not a single thread to follow.
56
+ **PATTERN**: Lead with a grounded hypothesis (informed by Step 2's lookup) AND ask 5–8 questions across multiple dimensions. Mark each question as **(blocking)** or *(optional)* so the user can skim and skip.
38
57
 
39
58
  **FIRST RESPONSE FORMAT**:
40
59
 
41
- > Here's my initial read on this, plus questions to help us explore the bounds:
60
+ > Here's my read on this, grounded in {one-line of what Step 2 surfaced}:
42
61
  >
43
- > **My hypothesis**: [problem statement, who it affects, proposed IN/OUT]
62
+ > **Hypothesis**: [problem statement, who it affects, proposed IN / OUT / ANTI-SCOPE]
44
63
  >
45
- > **Questions to explore**:
46
- > 1. [User problem question]
47
- > 2. [UX flow question]
48
- > 3. [Boundary edge question]
49
- > 4. [Alternative approach question]
50
- > 5. [Success criteria question]
51
- > 6. [Edge case question]
52
- > ...
64
+ > **Questions**:
65
+ > 1. **(blocking)** [User problem question]
66
+ > 2. **(blocking)** [Boundary edge question]
67
+ > 3. **(blocking)** [Anti-scope question]
68
+ > 4. *(optional)* [UX flow question]
69
+ > 5. *(optional)* [Alternative approach question]
70
+ > 6. *(optional)* [Edge case question]
71
+ > 7. *(optional)* [Success criteria question]
53
72
  >
54
- > Answer any/all that spark thoughts. Skip what's obvious.
73
+ > Answer the blocking ones; skip optional if obvious.
55
74
 
56
- **Question types to include** (aim for 5-8 total, mix from these):
75
+ **Question types** (mix from these; lean on blocking for boundaries and anti-scope):
57
76
 
58
77
  - **User & Problem**: Who feels this most? What triggers the need? What's the cost of not solving it?
59
78
  - **UX & Feel**: Should this feel fast or thorough? Guided or flexible? What's the ideal flow?
60
- - **Boundaries**: What about [adjacent thing]β€”IN or OUT? If unlimited time, what else? What's essential for v1?
79
+ - **Boundaries (IN/OUT)**: What about [adjacent thing]β€”IN or OUT? What's essential for v1?
80
+ - **Anti-Scope**: What problem are we *intentionally not solving* here? (Different from OUT β€” anti-scope clarifies the philosophical edge of the feature, not just deferred work.)
61
81
  - **Alternatives**: I could see this as [A] or [B]. Which direction?
62
- - **Edge cases**: What happens when [unusual situation]? Should we handle [error state]?
63
- - **Success**: What makes you say "this shipped well"? What's the one thing we can't get wrong?
82
+ - **Edge cases**: What happens when [unusual situation]?
83
+ - **Success**: What makes you say "this shipped well"?
64
84
 
65
- **DO NOT ask about**: implementation approach, technical trade-offs, architecture, or integration details until boundaries are confirmed.
85
+ **DO NOT ask about**: implementation approach, technical trade-offs, architecture, or integration details β€” those belong in `/spectre:plan`.
66
86
 
67
87
  - **Action** β€” IterateBoundaries: After user responds, refine boundaries and ask targeted follow-ups on gaps.
68
88
 
69
- > **Current Boundaries**: βœ… **IN**: \[list\] ❌ **OUT**: \[list\] ⚠️ **Unsure**: \[edge cases\]
89
+ > **Current Scope**:
90
+ > βœ… **IN**: [list]
91
+ > ❌ **OUT**: [list]
92
+ > 🚫 **ANTI-SCOPE**: [problems we're intentionally not solving]
93
+ > ⚠️ **Unsure**: [edge cases]
70
94
  >
71
95
  > Any items to move? Add exclusions? Clarify edges? Reply 'looks good' to continue.
72
96
 
73
- - **Wait** β€” User confirms Scope boundaries are accurate
97
+ - **Wait** β€” User confirms scope boundaries are accurate.
74
98
 
75
- ## Step 3: Generate Targeted Clarifications
99
+ ## Step 4: Targeted Clarifications
76
100
 
77
101
  - **Action** β€” DetermineOutputDir:
78
-
79
102
  - **If** FROM_KICKOFF β†’ use same dir as kickoff doc
80
103
  - **Else** β†’ `OUT_DIR = user_specified || docs/tasks/{branch_name}`
81
- - `mkdir -p "$OUT_DIR"`
104
+ - `mkdir -p "$OUT_DIR/concepts" "$OUT_DIR/clarifications"`
82
105
 
83
- - **Action** β€” GenerateTargetedQuestions: Create 3-6 questions based ONLY on remaining scope ambiguities from Step 2 (or kickoff's "Remaining Ambiguities").
106
+ - **Action** β€” DetectClarificationMethod: Check if `AskUserQuestion` tool is available.
107
+ - **If available** β†’ use inline clarification flow (Path A)
108
+ - **If not available** β†’ use file-based clarification flow (Path B)
84
109
 
85
- **CRITICAL**: Only ask about unresolved scope ambiguities. Technical questions (architecture, trade-offs, integration) belong in `/spectre:plan`, not here.
110
+ ### Path A: Inline Clarifications (AskUserQuestion available)
86
111
 
87
- - **Action** β€” SaveClarifications: Create `{OUT_DIR}/clarifications/scope_clarifications_{timestamp}.md`:
112
+ - **Action** β€” AskInline: Generate 3–6 questions based ONLY on remaining scope ambiguities from Step 3 (or kickoff's "Remaining Ambiguities").
113
+ - Ask the most critical first (up to 4 at a time, the tool limit).
114
+ - For trade-off decisions, present options with concise pros/cons.
115
+ - If more than 4 questions, ask in batches β€” most important first.
88
116
 
117
+ **CRITICAL**: Only ask about unresolved scope ambiguities. Technical questions belong in `/spectre:plan`, not here.
118
+
119
+ ### Path B: File-Based Clarifications (no AskUserQuestion)
120
+
121
+ - **Action** β€” GenerateTargetedQuestions: Create 3–6 questions in `{OUT_DIR}/clarifications/scope_clarifications_{YYYY-MM-DD_HHMMSS}.md`:
89
122
  - Header: concept name, confirmed boundaries so far
90
- - Questions: Each focused on a scope edge case with `<response></response>` block
123
+ - Each question with a `<response></response>` block
91
124
 
92
125
  - **Action** β€” PromptUser: "Saved clarifications to `{path}`. Answer in `<response>` blocks. Reply 'Read it' when ready."
93
126
 
94
- - **Wait** β€” User replies
127
+ - **Wait** β€” User replies.
95
128
 
96
- - **Action** β€” ReadClarifications: Read file, use responses (proceed with assumptions if empty)
129
+ - **Action** β€” ReadClarifications: Read the file; use responses (proceed with intelligent assumptions if blocks are empty).
97
130
 
98
- ## Step 4: Create Scope Document
131
+ ## Step 5: Create Scope Document
99
132
 
100
- - **Action** β€” CreateScopeDoc: Generate `{OUT_DIR}/concepts/scope.md` (use scoped filename if exists).
133
+ - **Action** β€” CreateScopeDoc: Generate `{OUT_DIR}/concepts/scope.md` (use scoped filename if one exists).
101
134
 
102
135
  **Priority**: User value and boundaries BEFORE technical details.
103
136
 
104
- **Sections**: The Problem (pain, impact, current state) β†’ Target Users (primary, secondary, needs) β†’ Success Criteria (outcomes, metrics) β†’ User Experience (journeys, principles, trade-offs) β†’ Scope Boundaries (in/out/maybe/future) β†’ Constraints (platform, perf, a11y, scale) β†’ Integration (touches, avoids, dependencies) β†’ Decisions (from clarifications + rationale) β†’ Risks (UX, scope creep, open questions) β†’ Next Steps (`/spectre:plan` or `/spectre:create_tasks`, complexity S/M/L)
105
-
106
- ## Step 5: Light Technical Context (Optional)
137
+ **Sections**:
107
138
 
108
- **Only if scope identifies specific technical/architecture integration points.**
139
+ 1. **The Problem** β€” pain, impact, current state
140
+ 2. **Target Users** β€” primary, secondary, needs
141
+ 3. **Success Criteria** β€” outcomes; prefer measurable assertions over prose
142
+ 4. **User Experience** β€” journeys, principles, trade-offs
143
+ 5. **Scope Boundaries** β€” IN / OUT / ANTI-SCOPE / Maybe / Future
144
+ 6. **Load-Bearing Assumptions** β€” assumptions that, if wrong, invalidate this scope. Each assumption gets a short *"if this is false, …"* consequence so future-you can recognize when to come back.
145
+ 7. **Constraints** β€” platform, perf, a11y, scale (user-provided only)
146
+ 8. **Decisions** β€” from clarifications + rationale
147
+ 9. **Risks** β€” UX, scope creep, open questions
148
+ 10. **Next Steps** β€” `/spectre:plan` or `/spectre:create_tasks`, complexity S/M/L
109
149
 
110
- - **Action** β€” IdentifyTouchpoints: Identify desired areas of research, and dispatch parallel @analyst subagents to research each area. Surface-level only (component names, NOT implementation). List features this interacts with, constraints worth documenting, areas to avoid.
111
-
112
- - **Action** β€” UpdateScopeDoc: Add findings to Integration & Constraints sections if relevant.
150
+ **Note on ANTI-SCOPE vs OUT**:
151
+ - **OUT** = we're not building it (yet, or for this release).
152
+ - **ANTI-SCOPE** = we're intentionally not solving this *problem* β€” it clarifies the philosophical edge of what this feature is for.
113
153
 
114
154
  ## Step 6: Final Review & Next Steps
115
155
 
@@ -117,12 +157,18 @@ Collaborative workflow for structuring unstructured thoughts into clear scope bo
117
157
 
118
158
  > **Scope Complete**: `{OUT_DIR}/concepts/scope.md`
119
159
  >
120
- > **Final Boundaries**: βœ… **IN**: \[from doc\] ❌ **OUT**: \[from doc\] ⚠️ **Maybe/Future**: \[from doc\]
160
+ > **Final Boundaries**:
161
+ > βœ… **IN**: [from doc]
162
+ > ❌ **OUT**: [from doc]
163
+ > 🚫 **ANTI-SCOPE**: [from doc]
164
+ > ⚠️ **Maybe/Future**: [from doc]
165
+ >
166
+ > **Load-Bearing Assumptions** (top 1–3 β€” if any prove false, return to scope): [from doc]
121
167
  >
122
- > Docs saved: `{OUT_DIR}/concepts/scope.md`, `{OUT_DIR}/clarifications/scope_clarifications_{timestamp}.md`
168
+ > Docs saved: `{OUT_DIR}/concepts/scope.md`, clarifications under `{OUT_DIR}/clarifications/`
123
169
  >
124
- > Reply with any edits, updates, or clarifications β€” otherwise pick a next step:
170
+ > Reply with edits β€” otherwise pick a next step:
125
171
 
126
172
  - **Action** β€” RenderFooter: Render Next Steps using `@skill-spectre:spectre-guide` skill.
127
173
 
128
- > **NOTE**: Do NOT wait for explicit approval. Present next steps immediately inline with the review. User can reply with scope edits OR jump straight into a next step command. If user replies with edits, apply them to the scope doc and re-present.
174
+ > **NOTE**: Do NOT wait for explicit approval. Present next steps inline with the review. The user can reply with scope edits OR jump straight into a next step command. If they reply with edits, apply them to the scope doc and re-present.