@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 +3 -3
- package/package.json +1 -1
- package/plugins/spectre/.claude-plugin/plugin.json +1 -1
- package/plugins/spectre/skills/guide/SKILL.md +4 -4
- package/plugins/spectre/skills/prototype/SKILL.md +314 -0
- package/plugins/spectre/skills/scope/SKILL.md +98 -52
- package/plugins/spectre/skills/ux/SKILL.md +121 -0
- package/plugins/spectre-codex/skills/guide/SKILL.md +4 -4
- package/plugins/spectre-codex/skills/prototype/SKILL.md +314 -0
- package/plugins/spectre-codex/skills/scope/SKILL.md +98 -52
- package/plugins/spectre-codex/skills/ux/SKILL.md +121 -0
- package/plugins/spectre/skills/ux_spec/SKILL.md +0 -100
- package/plugins/spectre-codex/skills/ux_spec/SKILL.md +0 -100
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:
|
|
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:
|
|
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:
|
|
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
|
@@ -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:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
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
|
|
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
|
-
|
|
19
|
+
<ARGUMENTS> $ARGUMENTS </ARGUMENTS>
|
|
20
20
|
|
|
21
|
-
## Step 1: Immediate Reply &
|
|
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
|
|
25
|
-
- **Else If** ARGUMENTS empty β probe for context enthusiastically
|
|
26
|
-
- **Else** β proceed
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
60
|
+
> Here's my read on this, grounded in {one-line of what Step 2 surfaced}:
|
|
42
61
|
>
|
|
43
|
-
> **
|
|
62
|
+
> **Hypothesis**: [problem statement, who it affects, proposed IN / OUT / ANTI-SCOPE]
|
|
44
63
|
>
|
|
45
|
-
> **Questions
|
|
46
|
-
> 1. [User problem question]
|
|
47
|
-
> 2. [
|
|
48
|
-
> 3. [
|
|
49
|
-
> 4. [
|
|
50
|
-
> 5. [
|
|
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
|
|
73
|
+
> Answer the blocking ones; skip optional if obvious.
|
|
55
74
|
|
|
56
|
-
**Question types
|
|
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?
|
|
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]?
|
|
63
|
-
- **Success**: What makes you say "this shipped well"?
|
|
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
|
|
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
|
|
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
|
|
97
|
+
- **Wait** β User confirms scope boundaries are accurate.
|
|
74
98
|
|
|
75
|
-
## Step
|
|
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** β
|
|
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
|
-
|
|
110
|
+
### Path A: Inline Clarifications (AskUserQuestion available)
|
|
86
111
|
|
|
87
|
-
- **Action** β
|
|
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
|
-
-
|
|
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
|
|
129
|
+
- **Action** β ReadClarifications: Read the file; use responses (proceed with intelligent assumptions if blocks are empty).
|
|
97
130
|
|
|
98
|
-
## Step
|
|
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**:
|
|
105
|
-
|
|
106
|
-
## Step 5: Light Technical Context (Optional)
|
|
137
|
+
**Sections**:
|
|
107
138
|
|
|
108
|
-
**
|
|
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
|
-
|
|
111
|
-
|
|
112
|
-
- **
|
|
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**:
|
|
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
|
|
168
|
+
> Docs saved: `{OUT_DIR}/concepts/scope.md`, clarifications under `{OUT_DIR}/clarifications/`
|
|
123
169
|
>
|
|
124
|
-
> Reply with
|
|
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
|
|
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.
|