get-shit-pretty 0.6.2 → 0.7.0

package/gsp/skills/gsp-brand-guidelines/SKILL.md

@@ -0,0 +1,233 @@
+---
+name: gsp-brand-guidelines
+description: Operationalize your brand — assemble tokens, STYLE.md, component mapping, and guidelines
+user-invocable: true
+model: opus
+effort: high
+allowed-tools:
+  - Read
+  - Write
+  - Bash
+  - Agent
+  - Grep
+  - Glob
+---
+<context>
+Phase 4 of the GSP branding diamond. Transforms the brand identity into operational artifacts that designer and builder agents consume — the `.yml` preset (source of truth), STYLE.md (agent contract), component token mapping, and `guidelines.html` (what the user sees).
+
+Identity made the creative decisions. This phase makes them work in code.
+</context>
+
+<objective>
+Operationalize brand identity into project-ready artifacts and complete the branding diamond.
+
+**Input:** Brand identity (enriched by domain skills) + strategy + BRIEF.md
+**Output:** `{brand}/patterns/` ({brand-name}.yml, STYLE.md, guidelines.html, components/, INDEX.md)
+**Agent:** `gsp-brand-engineer`
+</objective>
+
+<execution_context>
+@${CLAUDE_SKILL_DIR}/../../templates/phases/patterns.md
+@${CLAUDE_SKILL_DIR}/design-tokens.md
+</execution_context>
+
+<rules>
+- Always use `AskUserQuestion` for user-facing questions — never raw text prompts
+- One decision per question — never batch multiple questions in a single message
+</rules>
+
+<process>
+## Step 0: Resolve brand
+
+Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `BRAND_PATH`.
+If BRAND_PATH doesn't exist, tell the user to run `/gsp-start` first.
+
+## Step 1: Load context
+
+### Identity (chunk-first)
+
+Read `{BRAND_PATH}/identity/INDEX.md`. If it exists, load all identity chunks + `palettes.json`.
+
+If INDEX.md doesn't exist, check if identity phase is complete in brand STATE.md. If not, tell the user to complete brand identity first (run `/gsp-brand-identity`).
+
+### Strategy (selective, chunk-first)
+
+Read `{BRAND_PATH}/strategy/INDEX.md`. If it exists, load: voice-and-tone.md, archetype.md, positioning.md.
+
+### Brand context
+
+Read:
+- `{BRAND_PATH}/BRIEF.md` — business, personas, goals
+- `{BRAND_PATH}/config.json` — get `system_config.system_strategy`, `system_config.tech_stack`, `system_config.style_base`
+
+### Style base presets
+
+If `style_base` is a non-empty array, load each preset's files from `${CLAUDE_SKILL_DIR}/../gsp-style/styles/`:
+- `{preset-name}.yml` — structural scaffold (tokens + intensity + patterns + constraints + effects)
+- `{preset-name}.md` — design philosophy, bold bets, implementation patterns (CSS recipes, textures, animations)
+
+Both files are needed: the `.yml` provides the structure to inherit from, the `.md` provides the philosophy and implementation content for STYLE.md rendering.
+
+If `style_base` is empty or missing, load `${CLAUDE_SKILL_DIR}/../gsp-style/styles/professional.yml` and `professional.md` as the default format reference. The agent always needs at least one example to produce the custom style output.
+
+## Step 1.5: Codebase awareness
+
+**Always scan:** If `.design/system/` docs don't exist, invoke `/gsp-design-system` via Skill tool to scan the codebase. If they already exist, read them. Either way, load STACK.md, COMPONENTS.md, and TOKENS.md before continuing.
+
+Then ask the user (each as its own `AskUserQuestion`):
+
+1. Tech stack — if the scan detected a stack, use `AskUserQuestion`:
+   - **Yes, build on {framework} + {styling}** — "Use what's already here"
+   - **Different stack** — "I want to target a different tech stack"
+   If no stack detected, use open-ended `AskUserQuestion`: "What tech stack will this brand target?"
+   Store answer in `{BRAND_PATH}/config.json` → `system_config.tech_stack`
+
+2. System strategy — only ask if scan found existing tokens/components. Use `AskUserQuestion`:
+   - **Evolve** — "Extend the existing design system"
+   - **Rethink** — "Redesign from scratch, informed by what exists"
+   - **Ignore** — "Start fresh, don't reference the existing system"
+   Store strategy in `{BRAND_PATH}/config.json` → `system_config.system_strategy`
+   If scan found no tokens/components (greenfield/boilerplate): default to `generate`, skip this question
+
+## Step 2: Determine system strategy
+
+Read `system_config.system_strategy` from config.json (defaults to `generate` if missing).
+
+Three strategies:
+
+**GENERATE** (when `system_strategy` is `generate` or missing):
+Full system from scratch. For `boilerplate` codebases, respect existing config structure (extend tailwind.config, not replace) and output tokens in the format the existing config uses (Tailwind extend, CSS custom properties, etc).
+
+**EXTEND** (when `system_strategy` is `extend`):
+Evolve the existing system rather than replacing it.
+1. Audit existing tokens against the brand identity — keep what works, adjust what doesn't, fill gaps
+2. Classify each existing component: KEEP / RESTYLE / REFACTOR / REPLACE
+3. Design only net-new components not covered by existing ones
+4. Output delta tokens — only new and changed values
+5. Preserve existing naming conventions from `.design/system/CONVENTIONS.md`
+
+**REFACTOR** (when `system_strategy` is `refactor`):
+Redesign the system from the ground up, informed by what exists.
+1. Read and understand existing tokens, components, patterns from `.design/system/` docs
+2. Design a complete new system — same scope as GENERATE
+3. Produce a migration mapping for every change
+4. Preserve conventions unless the brand requires changes
+5. Flag breaking changes explicitly
+
+## Step 3: Spawn brand engineer — Pass 1: Core
+
+Spawn the `gsp-brand-engineer` agent. **Inline all content** — the agent should not need to read input files.
+
+Pass in the agent prompt:
+- **Content of** all identity chunks + palettes.json (loaded in Step 1)
+- **Content of** strategy chunks: voice-and-tone.md, archetype.md, positioning.md (loaded in Step 1)
+- **Content of** BRIEF.md (loaded in Step 1)
+- **Content of** style base preset `.yml` + `.md` (loaded in Step 1) — `.yml` as structural scaffold, `.md` as philosophy + implementation content for STYLE.md
+- Patterns output template, design tokens reference (from execution_context)
+- The `system_strategy` and `tech_stack` values
+- **Output path:** `{BRAND_PATH}/patterns/`
+
+> Produce the core brand artifacts ONLY:
+> 1. `{brand-name}.yml` — source of truth (tokens + intensity + patterns + constraints + effects)
+> 2. `STYLE.md` — agent contract (rendered from `.yml` + philosophy + bold bets)
+> 3. `guidelines.html` — visual brand guide (what the user sees in their browser)
+> 4. `INDEX.md` — core files only for now
+>
+> Do NOT produce component artifacts yet (token-mapping, overrides, custom specs). Those come after the user reviews the visual output.
+
+## Step 3.5: Visual review
+
+Tell the user: "Open `{BRAND_PATH}/patterns/guidelines.html` in your browser — this is your brand in one page."
+
+Present a compact summary:
+
+```
+  {brand-name} guidelines
+  ═══════════════════════════════════════
+
+    .yml preset
+      colors:     {primary}, {secondary}, {accent}
+      typography: {primary font}, {secondary font}
+      intensity:  variance {N}/10, motion {N}/10, density {N}/10
+
+    STYLE.md
+      patterns:   {N} components defined
+      constraints: {N} never, {N} always rules
+      effects:    {interaction vocabulary list}
+      bold bets:  {1-line summary of boldest bet}
+
+    → open guidelines.html in your browser to preview
+
+  ─────────────────────────────────────
+```
+
+Use `AskUserQuestion`:
+- **Looks good** — "The brand looks right, build components"
+- **Adjust tokens** — "I want to tweak colors, typography, or spacing"
+- **Adjust patterns** — "I want to change component rules or constraints"
+- **Adjust intensity** — "More/less creative, more/less motion, more/less density"
+
+If adjustments needed, use `/gsp-brand-refine` with the feedback to surgically update the `.yml`, regenerate `STYLE.md`, and regenerate `guidelines.html`. Then re-present.
+
+## Step 3.75: Perspective check
+
+Load persona profiles from `{BRAND_PATH}/BRIEF.md` and present stakeholder reactions:
+
+"Stress-testing the brand visuals:
+
+ {primary persona name}: {would this visual language feel trustworthy and appropriate?}
+ Skeptic: {are the constraints too restrictive or too loose? Is the intensity calibrated right?}
+ {top competitor}: {is the brand visually differentiated?}"
+
+Use `AskUserQuestion`:
+- **Lock it in** — "The brand is solid, build components"
+- **Adjust** — "One of these concerns resonates — I want to change something"
+
+If adjust → use `/gsp-brand-refine` with the concern, then re-present. If confirmed → proceed to components.
+
+## Step 4: Spawn brand engineer — Pass 2: Components
+
+Spawn the `gsp-brand-engineer` agent with:
+- **Content of** the confirmed `{BRAND_PATH}/patterns/{brand-name}.yml`
+- **Content of** `{BRAND_PATH}/patterns/STYLE.md`
+- **Content of** `.design/system/STACK.md`, `COMPONENTS.md`, `TOKENS.md` (when loaded in Step 1.5)
+- The `system_strategy` and `tech_stack` values
+- Design tokens reference (from execution_context)
+- **Output path:** `{BRAND_PATH}/patterns/`
+
+> Produce the component artifacts:
+> 1. `components/token-mapping.md` — brand tokens → library theming API (always)
+> 2. Component override specs (selective — only when tokens aren't enough)
+> 3. Custom component specs (selective — brand-distinctive with no library equivalent)
+> 4. Update `INDEX.md` with the components section
+>
+> The `.yml` and `STYLE.md` are confirmed — do not modify them. Focus on mapping tokens to the detected component library and specifying overrides.
+
+## Step 4.5: Update state
+
+Update `{BRAND_PATH}/STATE.md`:
+- Set Phase 4 (Patterns) status to `complete`
+- Record completion date
+- Set Prettiness Level to 100%
+
+## Step 5: Phase transition output
+
+Invoke `/gsp-phase-transition` with phase `guidelines` and output directory `{BRAND_PATH}/patterns/`.
+
+**E2E mode:** Read `{BRAND_PATH}/config.json`. If `e2e` is `true`, auto-invoke `/gsp-start` via Skill tool — it will detect the completed brand and route directly to project setup (Step 4). No need to ask the user.
+
+**Non-E2E:** When the user chooses "Start a project", invoke `/gsp-start` via the Skill tool. Do NOT attempt to handle project setup inline — `/gsp-start` has the codebase scanning, questioning rounds, and brief-writing logic needed for a proper project setup. The branding agent's context is spent on brand work and lacks the project setup methodology.
+
+Also display a brand summary after the standard transition — this is the final branding phase:
+
+```
+  brand complete — {brand-name}
+
+    discover       {key finding}
+    strategy       {archetype}, {positioning}, {top voice attributes}
+    identity       {colors}, {typefaces}
+    guidelines     .yml + STYLE.md + {N} components + guidelines.html
+
+    open: {BRAND_PATH}/patterns/guidelines.html
+```
+</process>

package/gsp/skills/gsp-brand-guidelines/token-mapping.md

@@ -0,0 +1,329 @@
+# Token Mapping Reference
+
+Deterministic mapping from GSP style preset `.yml` tokens to target CSS variable systems. The builder reads the `.yml` and generates the right output for the detected stack — no separate `tokens.json` or `token-mapping.md` needed.
+
+## Source: `.yml` Token Structure
+
+Every preset (and every brand `.yml`) has this structure:
+
+```yaml
+tokens:
+  color:
+    primary: "#hex"        # Brand primary
+    secondary: "#hex"      # Brand secondary
+    accent: "#hex"         # Brand accent
+    background: "#hex"     # Page background
+    surface: "#hex"        # Card/panel fill
+    on-primary: "#hex"     # Text on primary
+    on-background: "#hex"  # Text on background
+    error: "#hex"
+    success: "#hex"
+    warning: "#hex"
+    info: "#hex"
+    muted: "#hex"          # Subtle text, borders (optional)
+
+  typography:
+    font-family-primary: "stack"
+    font-family-mono: "stack"
+    font-family-display: "stack"     # optional
+    font-family-secondary: "stack"   # optional
+    font-weight-heading: N
+    font-weight-body: N
+    font-size-base: "Npx"
+    line-height-base: N
+
+  shape:
+    border-radius-sm: "Npx"
+    border-radius-md: "Npx"
+    border-radius-lg: "Npx"
+    border-width: "Npx"
+    border-color: "#hex"
+
+  elevation:
+    shadow-sm: "css-shadow"
+    shadow-md: "css-shadow"
+    shadow-lg: "css-shadow"
+    shadow-xl: "css-shadow"
+
+  spacing:
+    base: N
+    scale: [N, N, ...]
+
+  motion:
+    duration-fast: "Nms"
+    duration-normal: "Nms"
+    easing: "css-easing"
+
+dark_mode:
+  color:
+    background: "#hex"
+    surface: "#hex"
+    on-background: "#hex"
+    border-color: "#hex"   # optional
+    muted: "#hex"          # optional
+```
+
+---
+
+## Target: shadcn/ui
+
+shadcn uses HSL CSS variables in `:root` and `.dark`. The mapping is deterministic — every `.yml` token has exactly one shadcn variable.
+
+### Color mapping
+
+| `.yml` token | shadcn CSS variable | Notes |
+|---|---|---|
+| `color.background` | `--background` | Page background |
+| `color.on-background` | `--foreground` | Primary text |
+| `color.surface` | `--card` | Card background |
+| `color.on-background` | `--card-foreground` | Card text (same as foreground) |
+| `color.surface` | `--popover` | Popover bg (same as card) |
+| `color.on-background` | `--popover-foreground` | Popover text |
+| `color.primary` | `--primary` | Primary actions |
+| `color.on-primary` | `--primary-foreground` | Text on primary |
+| `color.secondary` | `--secondary` | Secondary actions |
+| `color.on-primary` | `--secondary-foreground` | Text on secondary (derive from contrast) |
+| `color.muted` | `--muted` | Muted backgrounds |
+| `color.muted` | `--muted-foreground` | Muted text (use muted or derive darker) |
+| `color.accent` | `--accent` | Accent highlights |
+| `color.on-primary` | `--accent-foreground` | Text on accent (derive from contrast) |
+| `color.error` | `--destructive` | Destructive actions |
+| `color.on-primary` | `--destructive-foreground` | Text on destructive |
+| `shape.border-color` | `--border` | Default borders |
+| `shape.border-color` | `--input` | Input borders |
+| `color.primary` | `--ring` | Focus ring |
+| `color.surface` | `--sidebar-background` | Sidebar bg |
+| `color.on-background` | `--sidebar-foreground` | Sidebar text |
+| `color.primary` | `--sidebar-primary` | Sidebar active |
+| `color.on-primary` | `--sidebar-primary-foreground` | Sidebar active text |
+| `color.accent` | `--sidebar-accent` | Sidebar accent |
+| `color.on-background` | `--sidebar-accent-foreground` | Sidebar accent text |
+| `shape.border-color` | `--sidebar-border` | Sidebar borders |
+| `color.primary` | `--sidebar-ring` | Sidebar focus ring |
+| | `--chart-1` through `--chart-5` | Derive from primary, secondary, accent, info, success |
+
+### Shape mapping
+
+| `.yml` token | shadcn CSS variable |
+|---|---|
+| `shape.border-radius-lg` | `--radius` |
+
+shadcn derives `--radius` down: `calc(var(--radius) - 2px)` for md, `calc(var(--radius) - 4px)` for sm.
+
+### Typography
+
+shadcn doesn't use CSS variables for fonts — set in `tailwind.config` `fontFamily` extend:
+
+```js
+fontFamily: {
+  sans: [/* from typography.font-family-primary */],
+  mono: [/* from typography.font-family-mono */],
+}
+```
+
+### Dark mode
+
+| `.yml` dark_mode token | shadcn CSS variable (`.dark` scope) |
+|---|---|
+| `dark_mode.color.background` | `--background` |
+| `dark_mode.color.on-background` | `--foreground` |
+| `dark_mode.color.surface` | `--card`, `--popover` |
+| `dark_mode.color.border-color` | `--border`, `--input` |
+| `dark_mode.color.muted` | `--muted`, `--muted-foreground` |
+
+Tokens not listed in `dark_mode` inherit their light-mode value.
+
+### Color format conversion
+
+shadcn expects HSL channel values (no `hsl()` wrapper): `210 40% 98%`
+
+**Conversion:** hex → HSL → extract H S% L% as space-separated string.
+
+```
+#1E40AF → hsl(221, 72%, 40%) → "221 72% 40%"
+```
+
+### Complete output example
+
+Given `professional.yml`:
+
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222 47% 11%;
+    --card: 210 40% 98%;
+    --card-foreground: 222 47% 11%;
+    --popover: 210 40% 98%;
+    --popover-foreground: 222 47% 11%;
+    --primary: 221 72% 40%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 215 16% 47%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 213 27% 84%;
+    --muted-foreground: 215 16% 47%;
+    --accent: 199 89% 48%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 214 32% 91%;
+    --input: 214 32% 91%;
+    --ring: 221 72% 40%;
+    --radius: 0.75rem;
+    --chart-1: 221 72% 40%;
+    --chart-2: 215 16% 47%;
+    --chart-3: 199 89% 48%;
+    --chart-4: 217 91% 60%;
+    --chart-5: 142 71% 45%;
+  }
+
+  .dark {
+    --background: 222 47% 11%;
+    --foreground: 210 40% 96%;
+    --card: 217 33% 17%;
+    --card-foreground: 210 40% 96%;
+    --popover: 217 33% 17%;
+    --popover-foreground: 210 40% 96%;
+    --border: 217 19% 27%;
+    --input: 217 19% 27%;
+    --muted: 215 20% 65%;
+    --muted-foreground: 215 20% 65%;
+  }
+}
+```
+
+---
+
+## Target: Tailwind (no component library)
+
+For codebases using Tailwind without shadcn, map directly to `tailwind.config` `extend`:
+
+```js
+theme: {
+  extend: {
+    colors: {
+      primary: "var(--color-primary)",
+      secondary: "var(--color-secondary)",
+      accent: "var(--color-accent)",
+      background: "var(--color-background)",
+      surface: "var(--color-surface)",
+      foreground: "var(--color-foreground)",
+      muted: "var(--color-muted)",
+      error: "var(--color-error)",
+      success: "var(--color-success)",
+      warning: "var(--color-warning)",
+    },
+    fontFamily: {
+      sans: [/* typography.font-family-primary */],
+      mono: [/* typography.font-family-mono */],
+    },
+    borderRadius: {
+      sm: "var(--radius-sm)",
+      md: "var(--radius-md)",
+      lg: "var(--radius-lg)",
+    },
+    boxShadow: {
+      sm: "var(--shadow-sm)",
+      md: "var(--shadow-md)",
+      lg: "var(--shadow-lg)",
+      xl: "var(--shadow-xl)",
+    },
+  }
+}
+```
+
+CSS variables use hex directly (no HSL conversion needed):
+
+```css
+:root {
+  --color-primary: #1E40AF;
+  --color-secondary: #475569;
+  --color-background: #FFFFFF;
+  --color-surface: #F8FAFC;
+  --color-foreground: #0F172A;
+  --color-muted: #94A3B8;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+}
+```
+
+---
+
+## Target: Vanilla CSS
+
+For non-Tailwind codebases, generate a CSS custom property system with semantic class recipes:
+
+```css
+:root {
+  /* Brand */
+  --color-primary: #1E40AF;
+  --color-secondary: #475569;
+  --color-accent: #0EA5E9;
+  --color-bg: #FFFFFF;
+  --color-surface: #F8FAFC;
+  --color-text: #0F172A;
+  --color-muted: #94A3B8;
+  --color-border: #E2E8F0;
+
+  /* Semantic */
+  --color-error: #DC2626;
+  --color-success: #16A34A;
+  --color-warning: #D97706;
+
+  /* Shape */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --border-width: 1px;
+
+  /* Elevation */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+
+  /* Spacing */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  /* Motion */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Typography */
+  --font-sans: Inter, system-ui, sans-serif;
+  --font-mono: SF Mono, Menlo, monospace;
+  --font-weight-heading: 600;
+  --font-weight-body: 400;
+  --font-size-base: 16px;
+  --line-height-base: 1.6;
+}
+```
+
+---
+
+## Layered resolution
+
+The builder resolves tokens in this order (last wins):
+
+1. **Preset `.yml`** — base tokens from the style preset (e.g., `professional.yml`)
+2. **Brand `.yml`** — overrides from branding process (e.g., `acme.yml` with `style_base: professional`)
+3. **Dark mode** — `dark_mode.color.*` overrides for `.dark` scope
+
+If only a preset exists (quick project), step 2 is skipped. The builder generates CSS from whatever `.yml` it receives.
+
+## When to generate extended files
+
+| Scenario | Files produced |
+|----------|---------------|
+| Quick project (`/gsp-style`) | Preset `.yml` (base) → CSS vars generated at build time |
+| Full branding (customized) | Brand `.yml` (inherits preset) + `STYLE.md` |
+| Full branding (unchanged from preset) | Only `STYLE.md` (brand `.yml` not needed if identical to preset) |

package/gsp/skills/gsp-brand-identity/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: brand-identity
+name: gsp-brand-identity
 description: Create your visual identity — logo, color, typography
 user-invocable: true
 model: opus
@@ -22,13 +22,12 @@ Build the brand's visual identity.
 
 **Input:** Strategy chunks + BRIEF.md + discover/mood-board-direction.md
 **Output:** `.design/branding/{brand}/identity/` (6 chunks + palettes.json + INDEX.md)
-**Agent:** `gsp-identity-designer`
+**Agent:** `gsp-creative-director`
 </objective>
 
 <execution_context>
-@${CLAUDE_SKILL_DIR}/../../prompts/02-brand-identity-creator.md
 @${CLAUDE_SKILL_DIR}/../../templates/phases/identity.md
-@${CLAUDE_SKILL_DIR}/../../references/color-composition.md
+@${CLAUDE_SKILL_DIR}/../gsp-color/references/color-composition.md
 </execution_context>
 
 <rules>
@@ -43,12 +42,12 @@ Build the brand's visual identity.
 ## Step 0: Resolve brand
 
 Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `BRAND_PATH`.
-If missing, tell user to run `/gsp:start` first.
+If missing, tell user to run `/gsp-start` first.
 
 ## Step 1: Validate prerequisites
 
 Read `{BRAND_PATH}/STATE.md`. Strategy (Phase 2) must be complete.
-If not: "Strategy isn't done yet. Run `/gsp:brand-strategy` first."
+If not: "Strategy isn't done yet. Run `/gsp-brand-strategy` first."
 
 Load:
 - `{BRAND_PATH}/BRIEF.md`
@@ -59,10 +58,10 @@ Load:
 ### Style base presets
 
 If `style_base` is a non-empty array, load each preset's files from `${CLAUDE_SKILL_DIR}/../gsp-style/styles/`:
-- `{preset-name}.yml` — structured tokens (palette, typography, spacing)
-- `{preset-name}.md` — design philosophy and AI prompt
+- `{preset-name}.yml` — tokens + intensity + patterns + constraints + effects (structural scaffold)
+- `{preset-name}.md` — design philosophy, signature techniques, implementation patterns (creative context)
 
-These will be passed to the identity-designer agent as the aesthetic seed.
+Both files matter: the `.yml` gives the creative-director the aesthetic rules to respect, the `.md` gives the emotional DNA and visual signatures to channel. The creative-director adapts the brand within the preset's structure — respecting intensity dials, patterns, and constraints while bringing the brand's unique personality.
 
 ## Step 2: Visual direction
 
@@ -85,28 +84,38 @@ After visual direction is confirmed, ask as a separate `AskUserQuestion`:
 - **No constraints** — "Go ahead with this direction"
 - **Add constraints** — "I have specific requirements (colors to avoid, accessibility needs, existing assets to match)"
 
-## Step 3: Spawn identity designer
+## Step 3: Spawn creative director
 
-Spawn the `gsp-identity-designer` agent. **Inline all content** — the agent should not need to read any input files.
+Spawn the `gsp-creative-director` agent. **Inline all content** — the agent should not need to read any input files.
 
 Pass in the agent prompt:
 - **Content of** BRIEF.md (loaded in Step 1)
 - **Content of** strategy chunks: archetype.md, positioning.md, brand-platform.md, voice-and-tone.md (loaded in Step 1)
 - **Content of** discover/mood-board-direction.md (loaded in Step 1)
-- **Content of** style base preset files `.yml` + `.md` (when loaded in Step 1)
+- **Content of** style base preset `.yml` + `.md` (when loaded in Step 1) — `.yml` as structural scaffold, `.md` as design philosophy and signature techniques
 - **Content of** audit/brand-inventory.md (when loaded in Step 2)
-- Brand Identity Creator prompt (02), identity output template, color composition reference (from execution_context)
+- Identity output template, color composition reference (from execution_context)
 - User-confirmed visual direction + constraints
 - **Output path:** `{BRAND_PATH}/identity/`
 
-The agent writes 5 chunks + palettes.json + INDEX.md:
+The agent writes 5 chunks + INDEX.md (creative decisions only — no technical execution):
 1. `logo-directions.md`
-2. `color-system.md`
-3. `typography.md`
-4. `imagery-style.md`
+2. `color-system.md` (chosen colors + rationale, no OKLCH/contrast math)
+3. `typography.md` (chosen typefaces + rationale, no scale math)
+4. `imagery-style.md` (creative direction, no icon library specifics)
 5. `brand-applications.md`
-6. `palettes.json`
-7. `INDEX.md`
+6. `INDEX.md`
+
+## Step 3.5: Enrich with domain skills
+
+After the creative-director finishes, invoke domain skills to add technical precision to the creative decisions. Each skill reads the chunk the agent wrote, enriches it, and overwrites.
+
+1. **Invoke `/gsp-logo --enrich`** — reads `logo-directions.md`, enriches each direction with detailed construction geometry, complete variation specs, clear space rules, and minimum size calculations.
+2. **Invoke `/gsp-color --enrich`** — reads `color-system.md`, generates OKLCH palettes via tints.dev, calculates WCAG contrast, writes `palettes.json`, enriches with contrast ratios and semantic mapping.
+3. **Invoke `/gsp-typography --enrich`** — reads `typography.md`, generates mathematical type scale, adds fluid type formulas, enriches with font loading instructions.
+4. **Invoke `/gsp-visuals --imagery --enrich`** — reads `imagery-style.md`, adds icon library specifics, CSS texture/treatment recipes, enriches with technical implementation details.
+
+Each skill loads its own domain references on-demand — no upfront context cost.
 
 ## Step 4: Perspective check
 
@@ -128,5 +137,5 @@ Use `AskUserQuestion`:
 
 Update `{BRAND_PATH}/STATE.md`: set Phase 3 (Identity) to `complete`, Prettiness Level to 80%.
 
-Render phase transition (see `references/phase-transitions.md`).
+Invoke `/gsp-phase-transition` with phase `identity` and output directory `{BRAND_PATH}/identity/`.
 </process>