get-shit-pretty 0.5.2 → 0.6.1

package/gsp/skills/gsp-start/SKILL.md

@@ -25,7 +25,7 @@ Multiple brands and projects can coexist. Projects reference a brand.
 </context>
 
 <objective>
-Through 2-3 rounds of natural conversation, gather a complete brief and create the right project structure (brand, project, or both). Route the user to their first phase skill.
+Through a sequential one-question-at-a-time conversation, gather a complete brief and create the right project structure (brand, project, or both). Route the user to their first phase skill.
 </objective>
 
 <execution_context>
@@ -49,11 +49,12 @@ Through 2-3 rounds of natural conversation, gather a complete brief and create t
 <questioning_principles>
 Follow these principles throughout all conversations:
 
-1. **Inference over interrogation** — state assumptions, let them correct. "SaaS dashboard for enterprise" → you already know: professional, data-dense, web-first.
-2. **Progressive disclosure** — don't dump all questions at once. Flow in natural rounds.
-3. **Concrete options over open-ended** — "More like Stripe's clean approach or Duolingo's playful style?" beats "What style do you want?"
-4. **Know when you have enough** — fill gaps with smart defaults. Don't over-ask.
-5. **One message per round** — ask a cohesive set of related questions, not one at a time.
+1. **One decision per question** — every question must be its own `AskUserQuestion` call with exactly one decision. Never group multiple questions into a single message. Ask, wait for the answer, then ask the next thing.
+2. **Never re-ask** — if the user already answered something (in this phase or a prior one), don't ask again. If you need to validate, confirm: "I see X from earlier — still accurate?" The user should never feel like they're repeating themselves.
+3. **Inference over interrogation** — state assumptions, let them correct. "SaaS dashboard for enterprise" → you already know: professional, data-dense, web-first.
+4. **Adapt and skip** — use each answer to inform the next question. If an answer reveals enough to skip a later question, skip it. Don't follow a rigid checklist.
+5. **Concrete options over open-ended** — "More like Stripe's clean approach or Duolingo's playful style?" beats "What style do you want?"
+6. **Know when you have enough** — fill gaps with smart defaults. Don't over-ask.
 </questioning_principles>
 
 <process>
@@ -71,12 +72,7 @@ Scan `.design/` for existing brands and projects:
 
 ### Step 1b: Run design system scan (background)
 
-Spawn a background agent with `run_in_background: true` that follows the `/gsp:design-system` skill methodology:
-- Use `subagent_type: "general-purpose"`
-- Prompt: "Follow the /gsp:design-system skill methodology. Scan the codebase and produce `.design/system/{STACK,COMPONENTS,TOKENS,CONVENTIONS,CONCERNS}.md`. Read the templates from the GSP templates/system/ directory for output format. If no package.json exists, write minimal greenfield versions."
-- Store the task reference — you'll read results in Step 3 Round 2 or Step 4.
-
-This produces workspace-level documents consumed by downstream skills and agents.
+Spawn `/gsp:design-system` as a background agent (`run_in_background: true`, `subagent_type: "general-purpose"`). It writes to `.design/system/` — don't wait for it. Store the task reference for the brand essence questions or Step 4.
 
 ### Step 1c: Greet
 
@@ -92,39 +88,15 @@ Adapt the greeting based on what the scan revealed. Use plain text with Unicode
 - **Summary box:** `┌──┐│└──┘` border with key-value pairs inside
 
 **Fresh start (no `.design/`):**
-```
-  /gsp: ◇◇
-
-  looks like a fresh start.
-```
-
-If `package.json` exists, append:
-```
-  i scanning your codebase in the background — i'll factor in what i find.
-```
-
-Then use `AskUserQuestion` with options:
-- **Brand identity** — "define who you are — strategy, voice, visuals"
-- **Design project** — "design screens and flows for something you're building"
-- **Both (brand + project)** — "full pipeline — brand first, then design"
-- **Quick project** — "skip branding — pick a style preset and start designing"
+Show `  /gsp: ◇◇\n  looks like a fresh start.` (append codebase scanning note if `package.json` exists). Use `AskUserQuestion` with: Brand identity, Design project, Both (brand + project), Quick project.
 
 **Legacy `.design/` detected (flat structure, pre-0.4.0):**
-Acknowledge the legacy project, note it still works with current commands. Use `AskUserQuestion`:
-- **Start fresh brand** — "new dual-diamond brand alongside your legacy project"
-- **Start design project** — "new project using the updated pipeline"
-- **Keep working** — "continue with the legacy structure"
+Acknowledge the legacy project. Use `AskUserQuestion`: Start fresh brand, Start design project, Keep working.
 
 **Brands exist, no projects:**
-Show brand name + pipeline flow. Then use `AskUserQuestion` with:
-- One option per existing brand — "start a project with {brand name}"
-- **Create new brand** — "start a new brand identity"
-
-When brand is complete, show compact single-line: `  acme-corp                                          ◆ complete`
+Show brand name + pipeline flow (compact single-line if complete, full pipeline if incomplete). Use `AskUserQuestion`: one option per existing brand + Create new brand.
 
-When brand is incomplete, show full pipeline flow + `→ next: /gsp:{next-command}`
-
-**Brands + projects exist:**
+**Brands + projects exist (canonical format):**
 Show compact brand (single-line if complete) + full project pipeline flow. Then `AskUserQuestion`:
 - **Continue {project}** — "pick up at {next phase}"
 - **New project** — "start a new design project"
@@ -144,14 +116,13 @@ When codebase has been scanned (`.design/system/STACK.md` exists), show a Summar
 ```
 
 **Codebase signals found (any state):**
-Weave in what you found: "I see you've got a [Next.js/React Native/etc.] project here with [Tailwind/shadcn/etc.] — I'll factor that into the design scope."
+Weave in what you found naturally: framework, styling, component count.
 
 ## Step 2: Route based on conversation
 
 From the greeting exchange, determine which flow to run:
 
-- **Brand identity (new)** → Brand flow (Step 3) with `brand_mode: "new"`
-- **Brand identity (evolve)** → Brand flow (Step 3) with `brand_mode: "evolve"`. Detect evolve signals: user mentions existing brand, assets, guidelines, rebrand, refresh, modernize, evolve, update, redesign.
+- **Brand identity** → Brand flow (Step 3)
 - **Design project** → Check for brands first. If none exist, explain they need a brand first. Offer to create one, then auto-transition to project flow.
 - **Full design (brand + project)** → Brand flow (Step 3), with E2E flag so brand completion auto-transitions to project flow (Step 4)
 - **Quick project** → Quick flow (Step 5)
@@ -159,56 +130,69 @@ From the greeting exchange, determine which flow to run:
 
 ## Step 3: Brand flow
 
+Each question is its own `AskUserQuestion` call. Ask one, wait, adapt, ask the next. Skip anything you can already infer.
+
+**Step 3a — Brand name and path selection:**
+
 1. Ask for brand name (kebab-case, e.g., "acme-corp")
-2. Create directory structure:
+2. "Do you already have brand materials to work with?" — use `AskUserQuestion`:
+   - **Yes, I have an existing brand** — "I have a logo, colors, guidelines, or other assets"
+   - **No, starting fresh** — "Building a brand from scratch"
+
+If **yes** → set `brand_mode: "evolve"`. Continue with evolve sequence (Step 3b-evolve).
+If **no** → set `brand_mode: "new"`. Continue with new sequence (Step 3b-new).
+
+3. Create directory structure:
 ```bash
 mkdir -p .design/branding/{name}/{audit,discover,strategy,identity,patterns}
 ```
 
-3. Gather brand brief in 3 rounds. The brief is the single source of truth for business and persona definition — invest here.
+**Step 3b-evolve — Gather existing brand context:**
+
+Ask these before business questions — the existing brand shapes everything:
+
+3. Share your current brand materials — logo, colors, guidelines, URLs, anything you have. (open-ended — gather thoroughly here. Brand-audit will NOT re-ask for assets.)
+4. How old is the current brand? (open-ended)
+5. What's working well with the current brand? (open-ended)
+6. What's not working — what are the pain points? (open-ended)
+7. Evolution scope — use `AskUserQuestion`: **Preserve most, tweak details** / **Evolve significantly, keep core** / **Replace — start fresh**
 
-**Round 1 — Business & People:**
-- Company name, industry, stage
-- What problem does this business solve? For whom? How differently?
-- Business model (how it makes money)
-- Who are the main competitors? (users usually know their top 2-3)
-- Primary persona — use `AskUserQuestion` to confirm or build: present an inferred persona profile (name, role, day-in-the-life, frustration, aspiration, discovery, trust signals) and let user correct. If they say "fintech for Gen Z" → infer and present a concrete persona.
-- Secondary persona (if relevant)
-- Mission and vision
+Then continue to Step 3c (business & people), skipping anything the brand materials already reveal.
 
-This round is the most important. The personas should feel like real people, not demographic buckets. Dig into the emotional layer: anxiety, ambition, frustration, curiosity, status, safety.
+**Step 3b-new — Skip to business questions:**
 
-**Round 2 — Brand Essence & Landscape:**
+Continue directly to Step 3c.
 
-Before presenting personality options, **internally synthesize** from Round 1:
-- **Promise:** what should someone feel when they interact with this brand? (derived from persona frustrations + aspirations)
-- **Point of view:** what does this brand disagree with in the category? (derived from the problem + how it solves it differently)
+**Step 3c — Business & People:**
 
-You do NOT ask the user these directly — you use them to ground the personality options.
+8. What's the company name, and what industry/stage? (open-ended `AskUserQuestion`)
+9. What problem does it solve, and for whom? (open-ended — use the answer to start inferring persona)
+10. What's the business model? (use `AskUserQuestion` with options if you can infer likely models from industry, otherwise open-ended)
+11. Who are the main competitors? (2-3 names — open-ended)
+12. Present an inferred primary persona — a concrete profile (name, role, frustration, aspiration) based on answers so far. Personas should feel like real people — dig into the emotional layer. Use `AskUserQuestion`: **Looks right** / **Adjust** / **Add a secondary persona**
 
-- Brand personality — use `AskUserQuestion` with 2-3 concrete personality directions. **Each option must explain WHY it fits this brand's audience and problem** — not just a style label:
-  - Each option: **Label** (3 adjectives) / **Description** (why this personality fits their specific audience and competitive position — reference the persona by name, the problem, or the gap) / **Preview** (example sentence in that voice, using their product context)
-  - **Surprise me** — craft an unexpected direction inspired by the user's industry and personas
-- What the brand should NEVER feel like
-- Competitive landscape — use `WebSearch` to enrich the competitors named in Round 1. Present the map for confirmation.
-- Brands admired / styles to avoid
+**Step 3d — Brand Essence:**
 
-**Round 3 — Constraints & confirmation:**
-- Existing brand assets? (logo, colors, guidelines)
-- Timeline and budget constraints
-- Non-negotiables
-- **Check background scan:** If the codebase scanner has returned results, weave tech findings naturally.
-- State your understanding back: "Here's what I'm hearing: [summary]." Use `AskUserQuestion`:
-  - **Looks good** — "That's accurate, let's go"
-  - **Adjust something** — "I want to change or add something"
+Before presenting personality options, **internally synthesize** promise (what should someone feel?) and point of view (what does this brand disagree with?) from prior answers. Don't ask these directly — use them to ground personality options.
 
-**Evolve mode additions (when `brand_mode` is `evolve`):**
-Add to Round 3:
-- Current brand age, existing guidelines
-- Brand equity (what's working) and pain points (what's not)
-- Evolution scope — preserve / evolve / replace
+13. Brand personality direction — use `AskUserQuestion` with 2-3 concrete personality directions. **Each option must explain WHY it fits this brand's audience and problem** — not just a style label:
+    - Each option: **Label** (3 adjectives) / **Description** (why this personality fits their specific audience and competitive position — reference the persona by name, the problem, or the gap) / **Preview** (example sentence in that voice, using their product context)
+    - **Surprise me** — craft an unexpected direction inspired by the user's industry and personas
+    - Note: this is a high-level direction only. Brand strategy phase will deepen this into archetype + voice — don't over-refine here.
+14. What should the brand NEVER feel like? (use `AskUserQuestion` with 2-3 anti-directions inferred from their personality pick, plus open-ended option)
+15. Brands admired or styles to avoid? (open-ended `AskUserQuestion`)
 
-Skip or compress rounds if the user gives enough upfront. Don't over-ask.
+Note: competitive landscape deep-dive happens in the research phase — don't re-confirm it here. The competitor names from Q11 are enough.
+
+**Step 3e — Constraints & confirmation:**
+
+16. Any non-negotiables or constraints? (timeline, budget, must-haves) — open-ended `AskUserQuestion`
+17. **Check background scan:** If the codebase scanner has returned results, weave tech findings naturally into your summary.
+18. State your understanding back: "Here's what I'm hearing: [summary]." Use `AskUserQuestion`:
+    - **Looks good** — "That's accurate, let's go"
+    - **Adjust something** — "I want to change or add something"
+
+Skip any question you can already answer from prior context. Don't over-ask.
 
 4. Write artifacts:
 - `.design/branding/{name}/BRIEF.md` from brand brief template
@@ -218,39 +202,18 @@ Skip or compress rounds if the user gives enough upfront. Don't over-ask.
 
 5. Set `brand_mode` in config.json based on Step 2 routing decision.
 
-6. Route using `AskUserQuestion`:
-
-- **Brand-only, new →** Use `AskUserQuestion`: "Brand brief created! Want to keep going?"
-  - **Continue to research** — "Start brand research now" → invoke `/gsp:brand-research` via Skill tool
-  - **Stop here** — "I'll come back later" → confirm files are saved, show how to resume with `/gsp:start`
-  - **What happens next?** — "Explain the next phase" → explain what brand research does and how it uses the brief
-
-- **Brand-only, evolve →** Use `AskUserQuestion`: "Brand brief created! Let's audit your current brand."
-  - **Continue to audit** — "Audit my existing brand now" → invoke `/gsp:brand-audit` via Skill tool
-  - **Stop here** — "I'll come back later" → confirm files are saved, show how to resume with `/gsp:start`
-  - **What happens next?** — "Explain the audit phase" → explain what the brand audit does and why it comes before strategy
-
-- **E2E, new →** "Brand brief created. Now let's scope the design project." → continue to Step 4.
+6. Route using `AskUserQuestion` — always offer Continue / Stop here / What happens next:
 
-- **E2E, evolve →** Use `AskUserQuestion`: "Brand brief created! Let's audit your existing brand before the design project."
-  - **Continue to audit** — "Audit my existing brand now" → invoke `/gsp:brand-audit` via Skill tool
-  - **Stop here** — "I'll come back later" → confirm files are saved, show how to resume with `/gsp:start`
-  - **What happens next?** — "Explain the audit phase" → explain what the brand audit does and how it feeds into the rest of the pipeline
+- **Brand-only, new →** continue to `/gsp:brand-research`
+- **Brand-only, evolve →** continue to `/gsp:brand-audit`
+- **E2E, new →** continue to `/gsp:brand-research` (complete the entire brand pipeline first — research → strategy → identity → patterns — then auto-transition to Step 4 for project setup). Set `"e2e": true` in config.json so brand-patterns knows to route to project flow after completion.
+- **E2E, evolve →** continue to `/gsp:brand-audit` (complete full brand pipeline, then auto-transition to Step 4). Set `"e2e": true` in config.json.
 
 ## Step 4: Project flow
 
 **Background:** Run `git branch --show-current` with `run_in_background: true` now — result will be ready by the time we need it for git context detection.
 
-1. Show available brands:
-```
-Available brands:
-  • acme-corp (complete — all 4 phases)
-  • beta-labs (in progress — 2/4 phases)
-```
-
-If no brands exist, explain that a brand is needed first and offer to create one.
-If only one complete brand exists, suggest it as default.
-If multiple brands exist, use `AskUserQuestion` with one option per brand (include status in description).
+1. Show available brands with phase status. No brands → offer to create one. One complete → suggest as default. Multiple → `AskUserQuestion` with one option per brand.
 
 2. User selects a brand.
 
@@ -263,55 +226,37 @@ mkdir -p .design/projects/{name}/{brief,research,design,critique,build,review,co
 
 ### Detect git context
 
-Use the git branch detected earlier (run `git branch --show-current` in background at the start of Step 4, while asking for project name — result is ready by now).
+Use the background `git branch --show-current` result. If detected, confirm branch with `AskUserQuestion`. Store in config.json `git.branch` + STATE.md `## Git`. No git repo → skip silently.
 
-1. If a branch was detected, use `AskUserQuestion`: "I see you're on `{branch}` — track this as the project branch?"
-   - **Yes, use this branch** — "Track `{branch}`"
-   - **Different branch** — "I want to use a different branch name"
-3. Store in config.json `git.branch` and STATE.md `## Git` table
-4. If no git repo detected, skip silently — leave fields as "—"
+5. Write `.design/projects/{name}/brand.ref` — brand name, relative path, consumed_at ISO date, identity_hash (first 8 chars md5 of IDENTITY.md, or "pending").
 
-5. Write `brand.ref`:
-```
-brand: {brand-name}
-path: ../../branding/{brand-name}/
-consumed_at: {ISO_DATE}
-identity_hash: {first 8 chars of md5 of IDENTITY.md content, or "pending" if identity not complete}
-```
-Write to `.design/projects/{name}/brand.ref`
-
-6. Consume design system scan results:
-- Read `.design/system/STACK.md` (guaranteed done by now — conversation has been going for multiple rounds)
-- Note classification for config.json
-- Auto-infer `implementation_target` from STACK.md tech stack and COMPONENTS.md component inventory
-
-7. Gather project brief in 2 rounds:
-
-**Round 1 — What we're building:**
-- What are we building? (app, website, dashboard, etc.)
-- Present background scan findings: "I found a {classification} {framework} project with {details}. Want to build on that?"
-- Platforms (web, iOS, Android)?
-- Tech stack preferences? (confirm inferred or ask)
-- Implementation target — use `AskUserQuestion` with options based on codebase analysis (e.g., shadcn, rn-reusables, custom, css-only)
-- Design scope — use `AskUserQuestion`:
-  - **Full** — "Complete design: screens, components, tokens"
-  - **Partial** — "Specific screens or flows only"
-  - **Tokens only** — "Just design tokens, no screens"
-- Key screens/flows needed?
-
-Use inference from the codebase scan — don't re-ask what you can already see.
-
-**Round 2 — Success & gaps:**
-- Success criteria
-- Timeline, constraints
-- Any remaining gaps
-- State your understanding back: "Here's what I'm hearing: [summary]." Use `AskUserQuestion`:
-  - **Looks good** — "That's accurate, let's go"
-  - **Adjust something** — "I want to change or add something"
-  - **Explain this** — "Walk me through what you captured and why" → explain each section of the brief and how it'll be used in the next phases
-  - **Surprise me** — "Suggest something I haven't thought of" → propose an unexpected screen, flow, or feature angle that would elevate the project based on what you know about the brand, audience, and codebase. Present it as a suggestion the user can adopt, tweak, or skip.
-
-Skip or compress rounds if the user gives enough upfront. Don't over-ask.
+6. Consume `.design/system/STACK.md` — note classification for config.json, auto-infer `implementation_target` from STACK.md + COMPONENTS.md.
+
+7. Gather project brief as a sequential conversation. Each question is its own `AskUserQuestion` call. Ask one, wait, adapt, ask the next. Skip anything you can already infer from the codebase scan.
+
+**Sequence — What we're building:**
+
+1. What are we building? (app, website, dashboard, etc.) — open-ended `AskUserQuestion`
+2. Present background scan findings: "I found a {classification} {framework} project with {details}." Use `AskUserQuestion`: **Build on this** / **Different stack** / **Tell me more**
+3. Platforms? — use `AskUserQuestion`: **Web** / **iOS** / **Android** / **Cross-platform** (skip if obvious from codebase)
+4. Implementation target — use `AskUserQuestion` with options based on codebase analysis (e.g., shadcn, rn-reusables, custom, css-only)
+5. Design scope — use `AskUserQuestion`:
+   - **Full** — "Complete design: screens, components, tokens"
+   - **Partial** — "Specific screens or flows only"
+   - **Tokens only** — "Just design tokens, no screens"
+6. Key screens/flows needed? — open-ended `AskUserQuestion`
+
+**Sequence — Success & confirmation:**
+
+7. What does success look like? — open-ended `AskUserQuestion`
+8. Any constraints? (timeline, budget, must-haves) — open-ended `AskUserQuestion`
+9. State your understanding back: "Here's what I'm hearing: [summary]." Use `AskUserQuestion`:
+   - **Looks good** — "That's accurate, let's go"
+   - **Adjust something** — "I want to change or add something"
+   - **Explain this** — "Walk me through what you captured and why" → explain each section of the brief and how it'll be used in the next phases
+   - **Surprise me** — "Suggest something I haven't thought of" → propose an unexpected screen, flow, or feature angle that would elevate the project based on what you know about the brand, audience, and codebase. Present it as a suggestion the user can adopt, tweak, or skip.
+
+Skip any question you can already answer from the codebase scan. Don't over-ask.
 
 8. Write artifacts:
 - `.design/projects/{name}/BRIEF.md` from project brief template
@@ -331,33 +276,9 @@ For users who want to skip branding and start designing immediately with a style
 
 ### 5a: Style selection
 
-Read the style presets index at `${CLAUDE_SKILL_DIR}/../../skills/gsp-style/styles/INDEX.yml` and present grouped options:
-
-```
-  ─── pick a style ─────────────────────
-
-  minimal       swiss-minimalist, clean-modern, scandinavian
-  bold          neubrutalism, brutalist, cyberpunk
-  dark          modern-dark, midnight, hacker-terminal
-  editorial     editorial, magazine, newspaper
-  warm          organic, earthy, handcrafted
-  playful       retro-futurism, vaporwave, memphis
-```
-
-Use `AskUserQuestion` with:
-- One option per mood group (showing the first 2-3 preset names as preview)
-- **Surprise me** — "pick something unexpected for my stack"
-
-When user picks a group, show the specific presets in that group with 1-line descriptions from INDEX.yml. Use `AskUserQuestion` to pick the specific preset.
-
-If the user names a preset directly at any point, skip the group step.
+Read `${CLAUDE_SKILL_DIR}/../../skills/gsp-style/styles/INDEX.yml` and present styles grouped by category. Use `AskUserQuestion` with one option per mood group (showing 2-3 preset names as preview) plus **Surprise me**. When user picks a group, drill into specific presets. If user names a preset directly, skip the group step.
 
-**"Surprise me" logic:** Pick a preset weighted by codebase type from the background scan:
-- Developer tools / CLI → dark or minimal presets
-- Content / blog → editorial presets
-- SaaS / dashboard → minimal or bold presets
-- E-commerce → warm or playful presets
-- No codebase detected → truly random pick
+**"Surprise me" logic:** Weight by codebase type — dev tools → dark/minimal, content → editorial, SaaS → minimal/bold, e-commerce → warm/playful, unknown → random.
 
 ### 5b: Create minimal brand
 
@@ -406,7 +327,7 @@ Continue directly to Step 4 (project flow) with these modifications:
 - Go straight to asking for project name
 - Set `style_preset: "{preset}"` in the project's `config.json`
 - Set `identity_hash: "style-only"` in `brand.ref`
-- Proceed with the normal 2-round project brief gathering
+- Proceed with the normal sequential project brief gathering
 
 ### Upgrade path
 

package/gsp/skills/gsp-style/SKILL.md

@@ -35,6 +35,7 @@ Apply a named style preset to produce production-ready design tokens and foundat
 
 <rules>
 - Always use `AskUserQuestion` for user interaction — never prompt via plain text
+- One decision per question — never batch multiple questions in a single message
 - `tokens.json` follows W3C Design Tokens format from `references/design-tokens.md`
 - When mixing styles, later style values override earlier ones (last-wins precedence)
 - Never mix clashing styles — check the compatibility matrix first
@@ -55,73 +56,12 @@ Read the user's input to determine the mode:
 
 ## Step 1: List mode (`--list`)
 
-If `--list`, read `styles/INDEX.yml` and display all presets:
-
-Read `styles/INDEX.yml` and render every style grouped by category. Format:
+Read `styles/INDEX.yml` and display all presets grouped by category. Format each as `{name}  {one-line description}` with `─── Category ────` separators and footer showing usage. Example:
 
 ```
-  /gsp:style
-  ═══════════════════════════════════════
-
-  34 styles available
-
   ─── Minimal ────────────────────────
     swiss-minimalist     Helvetica and whitespace — let the content breathe
     flat-design          Solid colors, zero shadows — bold color blocks as structure
-    monochrome           Pure black and white — typographic depth, zero decoration
-    minimal-dark         Three layers of darkness with warm amber accents
-
-  ─── Modern ─────────────────────────
-    professional         The sensible default — clean, trustworthy, gets out of the way
-    saas                 Electric blue gradient — modern SaaS landing page energy
-    enterprise           Indigo-to-violet gradient — dashboard-ready corporate
-    fluent               Microsoft Fluent 2 — acrylic materials, semantic tokens
-    material             Material Design 3 — adaptive, organic, expressive
-    modern-dark          Linear/Vercel aesthetic — ambient blobs, mouse spotlights
-    glassmorphism        Frosted glass panels floating over rich backgrounds
-    liquid-glass         Apple's 2025 design language — refractive, fluid, alive
-
-  ─── Creative ───────────────────────
-    neubrutalism         Gumroad meets Figma — thick borders, hard shadows
-    cyberpunk            Neon-soaked interfaces from a dystopian future
-    maximalism           MORE IS MORE — sensory overload, 5 rotating accent colors
-    bold-typography      Typography IS the design — massive headlines, poster aesthetic
-    playful-geometric    Memphis-inspired candy buttons and confetti cards
-    sketch               Wobbly borders and marker red on warm paper
-    kinetic              Viewport-width type, marquees, extreme scale hierarchy
-
-  ─── Elegant ────────────────────────
-    luxury               Gold accent, slow reveals, asymmetric restraint
-    art-deco             1920s theatrical glamour — gold on obsidian black
-    academia             Victorian study halls — mahogany, brass, and serif type
-    humanist-literary    Warm paper canvas, terracotta accent — quiet intelligence
-
-  ─── Organic ────────────────────────
-    botanical            Deep greens, paper grain, nature-inspired serif elegance
-    organic              Moss and terracotta — blob shapes, no straight lines
-
-  ─── Editorial ──────────────────────
-    newsprint            Multi-column layouts, drop caps, high information density
-
-  ─── Nostalgic ──────────────────────
-    retro                Windows 95 bevels, marquee text — the ugliness IS the beauty
-    vaporwave            80s/90s digital nostalgia with neon gradients and CRT scanlines
-
-  ─── Tactile ────────────────────────
-    claymorphism         Vinyl toy aesthetic — 4-layer shadows, super-rounded, squish
-    neumorphism          Dual opposing shadows — extruded and inset on continuous surface
-    industrial           Precision machinery — carbon fiber, dual-shadow, safety orange
-
-  ─── Tech ───────────────────────────
-    terminal             Your favorite code editor as a design system
-    web3                 Bitcoin orange luminescence on void black
-
-  ─── Geometric ──────────────────────
-    bauhaus              Form follows function — Bauhaus primary colors, hard shadows
-
-  ─────────────────────────────────────
-  Usage: /gsp:style {name}
-         /gsp:style --preview {name}
 ```
 
 Stop here. Do not write any files.
@@ -177,43 +117,7 @@ If invoked from a project context (`.design/projects/{project}/`):
 
 ## Step 5: Preview mode (`--preview`)
 
-If `--preview`, display the expanded tokens without writing files:
-
-```
-  /gsp:style preview — {name}
-  ═══════════════════════════════════════
-
-  Color
-    primary       {value}
-    secondary     {value}
-    accent        {value}
-    background    {value}
-    surface       {value}
-
-  Typography
-    heading       {font-family} @ {weight}
-    body          {font-family} @ {weight}
-    base size     {size}
-
-  Shape
-    radius        {sm} / {md} / {lg}
-    border        {width} {color}
-
-  Elevation
-    sm            {value}
-    md            {value}
-    lg            {value}
-
-  Motion
-    fast          {duration}
-    normal        {duration}
-    easing        {value}
-
-  ─────────────────────────────────────
-  Run /gsp:style {name} to apply.
-```
-
-Stop here. Do not write any files.
+If `--preview`, display expanded tokens grouped by section (Color, Typography, Shape, Elevation, Motion) as key-value pairs. Footer: usage hint to apply. Stop here — do not write any files.
 
 ## Step 6: Expand tokens to W3C format
 
@@ -241,65 +145,23 @@ Transform each YAML preset section into W3C Design Tokens JSON with `$value` and
 
 ## Step 7: Write tokens.json
 
+If `{OUTPUT_PATH}/tokens.json` already exists, use `AskUserQuestion`: "tokens.json already exists — overwrite with style preset? Existing component-level tokens will be replaced." with options **Overwrite** and **Cancel**. If cancelled, skip writing tokens.json and proceed to the next step.
+
 Write the complete W3C Design Tokens JSON to `{OUTPUT_PATH}/tokens.json`.
 
 ## Step 8: Write foundation chunks
 
 Write 5 foundation chunks to `{OUTPUT_PATH}/foundations/`, each following `references/chunk-format.md`:
 
-### foundations/color-system.md
-- Document the full color palette from the preset
-- Include brand colors (primary, secondary, accent)
-- Include semantic colors (background, surface, on-primary, on-background, error, success, warning, info)
-- Include dark mode mapping if present
-- Note WCAG contrast considerations based on the color values
-
-### foundations/typography.md
-- Document the 9-level type scale (Display → Overline) with all properties
-- Include font family details and where to load them (Google Fonts link if applicable)
-- Include heading and body weight rationale
-
-### foundations/spacing.md
-- Document the spacing scale from the preset
-- Include base unit and full scale with usage guidelines
-
-### foundations/elevation.md
-- Document the shadow/elevation scale from the preset
-- Include use cases for each level (flat, cards, dropdowns, modals, popovers)
-- Include any style-specific elevation notes (e.g., hard shadows for neubrutalism, glow for cyberpunk)
-
-### foundations/border-radius.md
-- Document the radius token scale
-- Include style-specific shape notes (e.g., sharp corners for swiss-minimalist, chunky for neubrutalism)
+- **color-system.md** — brand colors, semantic colors, dark mode mapping, WCAG contrast notes
+- **typography.md** — 9-level type scale, font family details + Google Fonts link, weight rationale
+- **spacing.md** — spacing scale with base unit and usage guidelines
+- **elevation.md** — shadow scale with use cases per level + style-specific notes
+- **border-radius.md** — radius token scale + style-specific shape notes
 
 ## Step 9: Write INDEX.md
 
-Write `{OUTPUT_PATH}/INDEX.md`:
-
-```markdown
-# System
-> Phase: system | Style: {preset-name} | Generated: {DATE}
-
-## Applied Style
-
-**{preset-name}** — {preset description}
-
-## Foundations
-
-| Chunk | File | ~Lines |
-|-------|------|--------|
-| Color System | [color-system.md](./foundations/color-system.md) | ~{N} |
-| Typography | [typography.md](./foundations/typography.md) | ~{N} |
-| Spacing | [spacing.md](./foundations/spacing.md) | ~{N} |
-| Elevation | [elevation.md](./foundations/elevation.md) | ~{N} |
-| Border Radius | [border-radius.md](./foundations/border-radius.md) | ~{N} |
-
-## Tokens
-
-| File | Description |
-|------|-------------|
-| [tokens.json](./tokens.json) | W3C Design Tokens |
-```
+Write `{OUTPUT_PATH}/INDEX.md` — header with phase/style/date, applied style name + description, foundations table (chunk name, file link, ~lines), tokens table (tokens.json link).
 
 ## Step 10: Update state
 
@@ -313,29 +175,5 @@ If a project config.json exists:
 
 ## Step 11: Completion output
 
-Display the result:
-
-```
-  /gsp:style — {name} applied
-  ═══════════════════════════════════════
-
-  {OUTPUT_PATH}/
-  ├── foundations/
-  │   ├── color-system.md
-  │   ├── typography.md
-  │   ├── spacing.md
-  │   ├── elevation.md
-  │   └── border-radius.md
-  ├── tokens.json
-  └── INDEX.md
-
-  ─────────────────────────────────────
-```
-
-Then use `AskUserQuestion` with routing options:
-
-- **Start a project** — "scope what you're building with this style" → route to `/gsp:project-brief`
-- **Build components** — "extend with a full component library" → route to `/gsp:brand-patterns` (components pass only)
-- **Preview tokens** — "see the token values" → show tokens.json summary
-- **Try a different style** — "apply a different preset" → restart at Step 2
+Show: header (`/gsp:style — {name} applied`), file tree (foundations/ + tokens.json + INDEX.md). Then `AskUserQuestion`: Start a project → `/gsp:project-brief`, Build components → `/gsp:brand-patterns`, Preview tokens, Try a different style → restart Step 2.
 </process>