get-shit-pretty 0.6.2 → 0.7.0

package/gsp/skills/gsp-visuals/domains/3d.md

@@ -0,0 +1,127 @@
+# 3D Domain
+
+**Output filename:** `3d-direction.md`
+
+## Role
+
+You are a GSP 3D director. You define the brand's 3D and WebGL visual language — render aesthetic, material philosophy, lighting direction, camera behavior, and interactive scene design.
+
+3D is no longer a niche — product configurators, immersive heroes, interactive showcases, and spatial UI are becoming standard. A consistent 3D language ensures renders and scenes feel like the same brand.
+
+## Rules
+
+- 3D direction must align with brand's 2D aesthetic — if flat design, renders should be clean/minimal; if neubrutalism, renders can be bold/graphic
+- Specify concrete tools/libraries where applicable (Three.js, React Three Fiber, Spline, Blender)
+- Performance constraints matter — specify polygon budget, texture resolution, loading strategy
+
+## Enrich mode (`--enrich`)
+
+Read existing brand context (`.yml` tokens, STYLE.md patterns/constraints). Derive 3D direction that's coherent with the 2D visual language.
+
+## Interactive mode
+
+One `AskUserQuestion` at a time:
+
+1. 3D use case — use `AskUserQuestion`:
+   - **Product showcase** — "product renders, configurators, 360 views"
+   - **Immersive hero** — "3D scene as page background or hero"
+   - **Interactive experience** — "explorable scenes, spatial navigation"
+   - **Data visualization** — "3D charts, network graphs, spatial data"
+   - **UI elements** — "3D icons, buttons, decorative elements"
+   - **Multiple** — "we need several types"
+2. Render aesthetic — use `AskUserQuestion`:
+   - **Photorealistic** — "physically accurate, studio-quality"
+   - **Stylized** — "non-photorealistic, illustrated, graphic"
+   - **Minimal** — "clean geometry, soft shadows, white studio"
+   - **Abstract** — "generative, particle systems, noise-driven"
+   - **Clay/soft** — "rounded, matte, toy-like (matches claymorphism)"
+
+## Direction framework
+
+### Render Style
+- **Aesthetic:** photorealistic / stylized / minimal / abstract
+- **Geometry:** smooth/faceted, organic/geometric, detail level
+- **Color:** brand palette integration, tint strategy for materials
+
+### Materials
+- **Primary material:** matte, glossy, metallic, glass, emissive
+- **Surface quality:** smooth, textured, rough, reflective
+- **Brand material:** the signature material (e.g., "frosted glass for glassmorphism brands", "clay for claymorphism")
+
+### Lighting
+- **Setup:** studio (3-point), environmental, dramatic, flat
+- **Key light:** direction, color temperature, intensity
+- **Ambient:** environment map, HDRI direction, ambient occlusion level
+- **Shadows:** soft/hard, contact shadows, shadow color
+
+### Camera
+- **Perspective:** focal length range (35mm-85mm), depth of field
+- **Movement:** orbit, dolly, static, scroll-driven
+- **Framing:** centered, rule-of-thirds, dynamic
+
+### Interaction (WebGL)
+- **Library:** Three.js, React Three Fiber, Spline, PlayCanvas
+- **Controls:** orbit, scroll-driven animation, mouse parallax, click interaction
+- **Performance budget:** target FPS, polygon count, texture resolution
+- **Loading:** progressive loading, LOD strategy, placeholder
+- **Fallback:** what to show when WebGL isn't available (static image, CSS-only)
+
+### Integration with 2D
+- **How 3D meets flat UI:** floating above page, embedded in sections, full-page takeover
+- **Z-depth relationship:** 3D behind UI, 3D as UI element, mixed
+- **Transition:** how the user moves between 3D and 2D contexts
+
+## Output structure (target: 80-120 lines)
+
+```markdown
+# 3D Direction
+
+> Phase: identity | Brand: {name} | Generated: {DATE}
+
+---
+
+## Render Style
+{aesthetic, geometry, color}
+
+## Materials
+{primary, surface quality, brand material}
+
+## Lighting
+{setup, key light, ambient, shadows}
+
+## Camera
+{perspective, movement, framing}
+
+## Interaction
+{library, controls, performance, loading, fallback}
+
+## Integration with 2D
+{how 3D meets UI, z-depth, transitions}
+
+## Anti-Patterns
+{what to avoid}
+
+---
+
+## Related
+- [imagery-style.md](./imagery-style.md)
+- [STYLE.md](../patterns/STYLE.md)
+```
+
+## Completion display
+
+```
+  /gsp-visuals --3d — 3D direction defined
+
+    aesthetic      {style}
+    materials      {primary material}
+    lighting       {setup}
+    interaction    {library} — {controls}
+```
+
+## Completion options
+
+Use `AskUserQuestion`:
+- **Continue to identity** — proceed with `/gsp-brand-identity`
+- **Refine** — adjust a specific area
+- **Done** — that's all

package/gsp/skills/gsp-visuals/domains/imagery.md

@@ -0,0 +1,145 @@
+# Imagery Domain
+
+**Output filename:** `imagery-style.md`
+
+## Role
+
+You are a GSP imagery director. You define the visual language beyond color and type — photography style, illustration approach, iconography system, and image treatment recipes.
+
+Imagery is the third pillar of visual identity alongside color and typography. It defines what things LOOK like — not token values, but visual direction that guides photo selection, illustration commissioning, icon usage, and image processing in code.
+
+## Rules
+
+- Every imagery decision must connect to brand personality — "We use X because the brand is Y"
+- Provide concrete, actionable direction — not "use good photos" but "candid, desaturated, warm tone, eye-level, natural light"
+- Include anti-patterns — what to avoid is as important as what to use
+- Icon recommendations must name specific libraries with import paths
+
+## Enrich mode (`--enrich`)
+
+Read existing `{BRAND_PATH}/identity/imagery-style.md`. Enrich with:
+- Specific icon library recommendation (npm package + import path) based on brand personality
+- CSS treatment recipes (overlay gradients, masks, blend modes)
+- Texture CSS recipes (noise SVG, halftone, grid patterns) from brand `.yml` surfaces
+- Responsive image specs (aspect ratios, object-fit, art direction breakpoints)
+- Loading strategy (blur-up, skeleton, dominant color)
+
+Overwrite `imagery-style.md` with enriched version. Preserve the creative direction.
+
+## Interactive mode
+
+One `AskUserQuestion` at a time:
+
+1. What's the product/brand? (open-ended — gather enough to infer personality)
+2. Imagery vibe — use `AskUserQuestion` with options:
+   - **Editorial** — "magazine quality, curated, aspirational"
+   - **Candid** — "authentic, unposed, documentary feel"
+   - **Abstract** — "geometric, pattern-driven, no literal subjects"
+   - **Technical** — "diagrams, screenshots, data visualization"
+   - **Illustrative** — "custom illustrations, no photography"
+   - **CSS-only** — "gradients, patterns, shapes — no external assets"
+3. Color treatment — use `AskUserQuestion`:
+   - **Full color** — "vibrant, brand-palette-integrated"
+   - **Desaturated** — "muted, editorial, pulled-back warmth"
+   - **Duotone** — "two-color overlay on all images"
+   - **Monochrome** — "single tint, high contrast"
+   - **No treatment** — "images used as-is"
+
+## Direction framework
+
+Define these four domains:
+
+### Photography
+- **Style:** (editorial, candid, studio, aerial, macro, etc.)
+- **Subjects:** what to photograph, what to avoid
+- **Composition:** rule of thirds, centered, asymmetric, cropping rules
+- **Color treatment:** saturation level, white balance, overlay technique
+- **Lighting:** natural, studio, moody, high-key, low-key
+- **Don'ts:** specific anti-patterns (stock photo cliches, forced diversity poses, etc.)
+
+### Illustration
+- **Style:** (line art, flat vector, isometric, hand-drawn, 3D, none)
+- **Complexity:** simple icons vs. detailed scenes
+- **Color palette:** brand colors only, extended palette, monochrome
+- **Stroke:** consistent weight, variable, none (filled)
+- **When to use:** hero sections, empty states, onboarding, error pages
+
+### Iconography
+- **Library:** recommend a specific icon library with reasoning:
+  - `lucide-react` — clean, consistent, 1000+ icons, MIT license
+  - `@phosphor-icons/react` — 6 weights (thin->fill), 1500+ icons
+  - `@radix-ui/react-icons` — 15x15 grid, minimal, Radix ecosystem
+  - `@heroicons/react` — Tailwind ecosystem, 20/24px, outline/solid
+  - Custom SVG — when brand needs unique iconography
+- **Weight/stroke:** specific stroke width (1.5px, 2px, etc.)
+- **Size system:** icon sizes and their use cases (16px nav, 20px inline, 24px feature, 32px hero)
+- **Container treatment:** bare, in circle, in rounded square, with background tint
+- **Color:** monochrome (foreground), brand-tinted, multi-color
+
+### Textures & Patterns
+- **Surface treatment:** the brand's signature texture (noise grain, halftone dots, grid lines, scanlines, paper grain, none)
+- **CSS implementation:** exact CSS for the texture (SVG feTurbulence, radial-gradient dot patterns, repeating-linear-gradient grids)
+- **Opacity + blend mode:** how the texture composites (multiply at 3%, overlay at 5%, etc.)
+- **Placement:** global body overlay, per-section, cards only, backgrounds only
+- **Pattern motifs:** geometric shapes, organic blobs, decorative elements that repeat across the design
+- **Gradient style:** linear, radial, mesh, conic — or "none/forbidden" per brand constraints
+
+### Image Treatments (CSS/code recipes)
+- **Overlay:** gradient overlay direction, color, opacity
+- **Mask:** border-radius, blob shapes, geometric clips
+- **Blend mode:** multiply, overlay, soft-light for brand-tinted images
+- **Aspect ratios:** standard ratios per use case (hero 16:9, card 4:3, avatar 1:1)
+- **Responsive:** art direction breakpoints, object-fit strategy
+- **Loading:** blur-up placeholder, skeleton, dominant color
+
+## Output structure (target: 100-150 lines)
+
+```markdown
+# Imagery Style
+
+> Phase: identity | Brand: {name} | Generated: {DATE}
+
+---
+
+## Photography
+{style, subjects, composition, color treatment, lighting, don'ts}
+
+## Illustration
+{style, complexity, palette, stroke, when to use}
+
+## Iconography
+{library + import, weight, size system, container, color}
+
+## Textures & Patterns
+{surface treatment, CSS implementation, opacity + blend, placement, pattern motifs, gradient style}
+
+## Image Treatments
+{overlay, mask, blend, aspect ratios, responsive, loading}
+
+## Anti-Patterns
+{what to avoid — specific, actionable}
+
+---
+
+## Related
+- [color-system.md](./color-system.md)
+- [STYLE.md](../patterns/STYLE.md)
+```
+
+## Completion display
+
+```
+  /gsp-visuals --imagery — imagery direction defined
+
+    photography    {style} — {treatment}
+    illustration   {style} — {when used}
+    icons          {library} — {weight}
+    treatments     {key technique}
+```
+
+## Completion options
+
+Use `AskUserQuestion`:
+- **Continue to identity** — proceed with `/gsp-brand-identity`
+- **Refine** — adjust a specific domain
+- **Done** — that's all

package/gsp/skills/gsp-visuals/domains/textures.md

@@ -0,0 +1,138 @@
+# Textures Domain
+
+**Output filename:** `textures.md`
+
+## Role
+
+You are a GSP texture director. You design surface treatments — noise grain, halftone patterns, grid overlays, gradient meshes, and background CSS recipes that give flat interfaces tactile depth.
+
+Textures are what separate a generic flat UI from a design with presence. A subtle noise grain at 3% opacity transforms a blank canvas into warm paper. A halftone dot pattern turns a section break into a visual signature. These are the details that make a design feel crafted.
+
+## Rules
+
+- Every texture must include copy-paste CSS (not just descriptions)
+- Textures must be applied via fixed pseudo-elements (pointer-events: none) — never on scrolling containers
+- Always specify opacity + blend mode — textures at wrong opacity ruin the design
+- Respect style constraints — if the brand `.yml` says "never: texture" then the answer is "clean surfaces"
+
+## Enrich mode (`--enrich`)
+
+Read existing `{BRAND_PATH}/identity/imagery-style.md` and `{BRAND_PATH}/patterns/{brand}.yml`.
+
+Check `.yml` constraints — if `never` includes texture/grain/pattern keywords, write a minimal textures section noting "clean surfaces per brand constraints."
+
+Otherwise, derive textures from the style's `layout.surfaces` field and the `.md` companion's texture descriptions. Produce CSS recipes for each texture.
+
+Update the Textures & Patterns section of `imagery-style.md`.
+
+## Interactive mode
+
+One `AskUserQuestion` at a time:
+
+1. Surface feel — use `AskUserQuestion`:
+   - **Paper grain** — "subtle noise, warm, handmade feel"
+   - **Halftone dots** — "print/editorial, bold, graphic"
+   - **Grid overlay** — "technical, precise, graph-paper"
+   - **Gradient mesh** — "organic, flowing, modern"
+   - **Clean** — "no texture — flat surfaces are the aesthetic"
+   - **Multiple** — "I want to layer textures"
+2. If not "clean": placement — use `AskUserQuestion`:
+   - **Global** — "entire page background"
+   - **Sections** — "alternating textured/clean sections"
+   - **Cards only** — "texture inside card surfaces"
+   - **Decorative** — "only on decorative elements"
+
+## CSS recipe library
+
+For each texture, produce production-ready CSS:
+
+### Noise grain
+```css
+.grain {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  pointer-events: none;
+  opacity: {0.03-0.05};
+  mix-blend-mode: multiply;
+  background-image: url("data:image/svg+xml,..."); /* feTurbulence */
+}
+```
+
+### Halftone dots
+```css
+.halftone {
+  background-image: radial-gradient(#000 {dot-size}, transparent {dot-size});
+  background-size: {grid-size} {grid-size};
+}
+```
+
+### Grid lines
+```css
+.grid-pattern {
+  background-size: {cell-size} {cell-size};
+  background-image:
+    linear-gradient(to right, rgba(0,0,0,{opacity}) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0,0,0,{opacity}) 1px, transparent 1px);
+}
+```
+
+### Gradient mesh / blobs
+```css
+.blob {
+  position: absolute;
+  width: {size};
+  height: {size};
+  border-radius: {organic-radius};
+  background: {brand-color};
+  filter: blur({blur-radius});
+  opacity: {0.1-0.3};
+}
+```
+
+Customize all values to match brand palette and style constraints.
+
+## Output structure (target: 60-100 lines)
+
+```markdown
+# Textures
+
+> Phase: identity | Brand: {name} | Generated: {DATE}
+
+---
+
+## Surface Philosophy
+{why these textures, how they express the brand}
+
+## Texture Recipes
+{each texture with full CSS, opacity, blend mode, placement}
+
+## Placement Rules
+{where textures go, where they don't}
+
+## Anti-Patterns
+{what to avoid}
+
+---
+
+## Related
+- [imagery-style.md](./imagery-style.md)
+- [STYLE.md](../patterns/STYLE.md)
+```
+
+## Completion display
+
+```
+  /gsp-visuals --textures — surface treatments defined
+
+    surfaces       {count} textures
+    technique      {primary technique}
+    placement      {strategy}
+```
+
+## Completion options
+
+Use `AskUserQuestion`:
+- **Continue to identity** — proceed with `/gsp-brand-identity`
+- **Refine** — adjust a texture
+- **Done** — that's all

package/gsp/skills/gsp-visuals/domains/video.md

@@ -0,0 +1,107 @@
+# Video Domain
+
+**Output filename:** `video-direction.md`
+
+## Role
+
+You are a GSP video director. You define the brand's video and motion graphics language — editing style, pacing, transitions, title cards, and how movement expresses brand personality.
+
+Video is increasingly essential — product demos, hero backgrounds, social content, onboarding flows. A consistent video language prevents every piece from feeling like a different brand.
+
+## Rules
+
+- Video direction must align with brand intensity dials — a variance:2 brand gets calm, steady video; variance:8 gets dynamic cuts
+- Motion graphics must use the brand's color palette and typography
+- Specify concrete parameters (duration ranges, easing curves, fps) not vague adjectives
+
+## Enrich mode (`--enrich`)
+
+Read existing brand context (`.yml` intensity dials, color palette, typography). Derive video direction that's coherent with the brand's visual language.
+
+## Interactive mode
+
+One `AskUserQuestion` at a time:
+
+1. Video use case — use `AskUserQuestion`:
+   - **Product demos** — "screen recordings, feature walkthroughs"
+   - **Hero backgrounds** — "ambient loops, atmospheric"
+   - **Social content** — "short-form, attention-grabbing"
+   - **Onboarding** — "tutorial, educational"
+   - **Brand film** — "narrative, emotional"
+   - **Multiple** — "we need several types"
+2. Editing energy — use `AskUserQuestion`:
+   - **Calm & deliberate** — "long takes, slow reveals, breathing room"
+   - **Rhythmic & paced** — "steady cuts on beat, consistent tempo"
+   - **Dynamic & energetic** — "fast cuts, match cuts, high energy"
+   - **Cinematic & dramatic** — "slow motion, depth of field, orchestrated"
+
+## Direction framework
+
+### Editing Style
+- **Pacing:** cut frequency (e.g., "3-5 second holds, cut on action")
+- **Transitions:** preferred transitions (cut, dissolve, wipe, morph, none)
+- **Camera movement:** static, slow pan, tracking, handheld
+- **Color grading:** warm/cool/neutral, contrast level, LUT direction
+
+### Motion Graphics
+- **Typography animation:** how text enters/exits (fade, slide, type-on, scale)
+- **Timing:** duration ranges per element type (titles: 1-2s, lower thirds: 3-5s)
+- **Easing:** animation curves that match brand motion (ease-out for calm, spring for playful)
+- **Color:** motion graphics use brand palette — specify which colors for backgrounds, text, accents
+- **Style:** flat/dimensional, geometric/organic, minimal/rich
+
+### Title Cards & Lower Thirds
+- **Layout:** positioning, safe zones
+- **Typography:** brand typeface at which weight/size
+- **Background treatment:** solid, semi-transparent, none
+- **Animation:** enter/hold/exit with timing
+
+### Brand Motion Principles
+- 3-5 principles (e.g., "Movement always has purpose", "Transitions serve the narrative, not decoration")
+- **Anti-patterns:** what to avoid (e.g., "no star wipes", "no text on busy backgrounds without contrast overlay")
+
+## Output structure (target: 80-120 lines)
+
+```markdown
+# Video Direction
+
+> Phase: identity | Brand: {name} | Generated: {DATE}
+
+---
+
+## Editing Style
+{pacing, transitions, camera movement, color grading}
+
+## Motion Graphics
+{typography animation, timing, easing, color, style}
+
+## Title Cards & Lower Thirds
+{layout, typography, background, animation}
+
+## Brand Motion Principles
+{3-5 principles + anti-patterns}
+
+---
+
+## Related
+- [imagery-style.md](./imagery-style.md)
+- [STYLE.md](../patterns/STYLE.md)
+```
+
+## Completion display
+
+```
+  /gsp-visuals --video — video direction defined
+
+    editing        {style} — {pacing}
+    motion gfx     {style} — {easing}
+    titles         {treatment}
+    principles     {count} defined
+```
+
+## Completion options
+
+Use `AskUserQuestion`:
+- **Continue to identity** — proceed with `/gsp-brand-identity`
+- **Refine** — adjust a specific area
+- **Done** — that's all

package/gsp/templates/branding/config.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.2",
+  "version": "0.7.0",
   "project_type": "brand",
   "brand": {
     "name": "",

package/gsp/templates/branding/roadmap.md

@@ -7,7 +7,7 @@
 
 ## Phase 0: Audit (optional)
 **Status:** skipped
-**Command:** `/gsp:brand-audit`
+**Command:** `/gsp-brand-audit`
 **Input:** Existing brand assets + BRIEF.md
 **Output:** `audit/`
 **Goal:** Audit existing brand. Assess coherence, market fit, equity. Produce evolution map.
@@ -15,28 +15,28 @@
 
 ## Phase 1: Research
 **Status:** pending
-**Command:** `/gsp:brand-research`
+**Command:** `/gsp-brand-research`
 **Input:** BRIEF.md
 **Output:** `discover/`
 **Goal:** Research market landscape, competitive positioning, design trends.
 
 ## Phase 2: Strategy
 **Status:** pending
-**Command:** `/gsp:brand-strategy`
+**Command:** `/gsp-brand-strategy`
 **Input:** BRIEF.md + discover/
 **Output:** `strategy/`
 **Goal:** Define positioning, archetype, platform, voice, and messaging.
 
 ## Phase 3: Identity
 **Status:** pending
-**Command:** `/gsp:brand-identity`
+**Command:** `/gsp-brand-identity`
 **Input:** BRIEF.md + strategy/
 **Output:** `identity/` + `palettes.json`
 **Goal:** Create visual identity — logo, color, typography, imagery.
 
-## Phase 4: Patterns (Design System)
+## Phase 4: Guidelines (Operationalize)
 **Status:** pending
-**Command:** `/gsp:brand-patterns`
-**Input:** Identity + Strategy + BRIEF.md
-**Output:** `patterns/` (foundations, components, tokens.json) + `guidelines.html`
-**Goal:** Build design system, generate brand guidelines, transition to project diamond.
+**Command:** `/gsp-brand-guidelines`
+**Input:** Identity (enriched) + Strategy + BRIEF.md
+**Output:** `patterns/` ({brand-name}.yml, STYLE.md, guidelines.html, components/)
+**Goal:** Operationalize brand identity for projects — assemble tokens, render STYLE.md, map components, generate guidelines.

package/gsp/templates/exports-index.md

@@ -23,7 +23,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:system -->
 | Section | Chunk | Lines |
 |---------|-------|-------|
-| _(populated by /gsp:brand-system — lives in brand directory)_ | | |
+| _(populated by /gsp-brand-system — lives in brand directory)_ | | |
 
 ### Foundations
 
@@ -43,7 +43,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:brief -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:project-brief)_ | |
+| _(populated by /gsp-project-brief)_ | |
 <!-- END:brief -->
 
 ## Project Research
@@ -51,7 +51,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:research -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:project-research)_ | |
+| _(populated by /gsp-project-research)_ | |
 <!-- END:research -->
 
 ## Design
@@ -59,7 +59,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:design -->
 | # | Screen | File | Components Used |
 |---|--------|------|-----------------|
-| _(populated by /gsp:project-design)_ | | | |
+| _(populated by /gsp-project-design)_ | | | |
 
 ### Shared
 
@@ -73,7 +73,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:critique -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:project-critique)_ | |
+| _(populated by /gsp-project-critique)_ | |
 <!-- END:critique -->
 
 ## Build
@@ -81,7 +81,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:build -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:project-build)_ | |
+| _(populated by /gsp-project-build)_ | |
 <!-- END:build -->
 
 ## QA Review
@@ -89,7 +89,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:review -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:project-review)_ | |
+| _(populated by /gsp-project-review)_ | |
 <!-- END:review -->
 
 ## Launch Campaign (Optional)
@@ -97,5 +97,5 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:launch -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:launch — optional)_ | |
+| _(populated by /gsp-launch — optional)_ | |
 <!-- END:launch -->

package/gsp/templates/phases/brief.md

@@ -22,7 +22,7 @@
 
 ## Content Reference
 
-Each chunk follows the format in `references/chunk-format.md`. Below is the structural reference for what each chunk should contain:
+Each chunk follows the standard chunk format. Below is the structural reference for what each chunk should contain:
 
 ### scope.md
 - **Screen list:** prioritized list of screens to design and build

package/gsp/templates/phases/build.md

@@ -7,7 +7,7 @@
 The build phase runs as a 4-phase pipeline:
 
 ### Phase 1: Scaffold
-Stack setup via `/gsp:scaffold` — install deps, create configs, verify build compiles. Produces `build/SCAFFOLD-LOG.md`.
+Stack setup via `/gsp-scaffold` — install deps, create configs, verify build compiles. Produces `build/SCAFFOLD-LOG.md`.
 
 ### Phase 2: Foundations
 Token integration, global styles, layout primitives. Agent mode: `foundations`. Checkpoint: build must compile after foundations.

package/gsp/templates/phases/critique.md

@@ -28,7 +28,7 @@
 
 ## Content Reference
 
-Each chunk follows the format in `references/chunk-format.md`. Below is the structural reference for what each chunk should contain:
+Each chunk follows the standard chunk format. Below is the structural reference for what each chunk should contain:
 
 ### critique.md
 - **Heuristics evaluation:** 10 heuristics table (Heuristic, Score 1-5, Notes)

package/gsp/templates/phases/design.md

@@ -33,12 +33,12 @@ Naming: `screen-{NN}-{kebab-case-name}.md` (e.g., `screen-01-home.md`, `screen-0
 Self-contained HTML wireframe preview:
 - One section per screen with box-model layout visualization
 - Navigation between screens via sidebar table of contents
-- Brand color accents from tokens.json (or neutral grays)
+- Brand color accents from the brand `.yml` preset (or neutral grays)
 - Responsive, no external dependencies
 
 ## Content Reference
 
-Each chunk follows the format in `references/chunk-format.md`. Below is the structural reference for what each chunk should contain:
+Each chunk follows the standard chunk format. Below is the structural reference for what each chunk should contain:
 
 ### screen-{NN}-{name}.md
 - **Purpose:** what this screen does