get-shit-pretty 0.7.3 → 0.8.2

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

@@ -0,0 +1,167 @@
+# guidelines.html — Structure Spec
+
+The `guidelines.html` is the visual conference of the entire brand pipeline — every phase of the branding diamond distilled into one self-rendering document:
+
+- **Discover** → personas
+- **Strategy** → positioning, voice
+- **Identity** → color, typography, visual elements, logo
+- **Patterns** → components, tokens
+
+It uses the brand's own tokens, type, and primitives to render itself. One file, no build step, open in a browser. When someone opens this file, they should understand the brand completely — who it's for, what it stands for, and how it looks and speaks.
+
+**Every element in this document must be derived from the brand pipeline outputs.** There are no defaults, no fallbacks, no generic treatments. If the brand is dark and editorial, the doc is dark and editorial. If the brand is warm and rounded, the doc is warm and rounded. The guidelines file is not a template being filled in — it is a brand artifact being built from the ground up using everything the pipeline produced.
+
+## `:root` — shadcn-native token names
+
+Use these exact CSS variable names so the file maps 1:1 with the shadcn token system. All values come from the brand's `.yml` tokens — use OKLCH values from palettes.json where available.
+
+```css
+:root {
+  /* shadcn core */
+  --background: ...;         /* page background */
+  --foreground: ...;         /* primary text */
+  --primary: ...;            /* brand primary color */
+  --primary-foreground: ...; /* text on primary */
+  --secondary: ...;          /* secondary surface */
+  --secondary-foreground: ...;
+  --muted: ...;              /* muted surface */
+  --muted-foreground: ...;   /* secondary text */
+  --accent: ...;             /* accent color (the memorable one) */
+  --accent-foreground: ...;
+  --destructive: ...;        /* error state */
+  --border: ...;             /* border color */
+  --ring: ...;               /* focus ring */
+  --radius: ...;             /* base radius */
+
+  /* Brand-specific extensions */
+  --font-display: ...;       /* heading/editorial font */
+  --font-body: ...;          /* body/UI font */
+  --font-mono: ...;          /* data/code font */
+  --ease: ...;               /* brand easing curve */
+}
+```
+
+## Primitive classes
+
+Define only the primitives the brand actually uses. Their implementation is derived from the brand's identity — intensity.variance, visual_direction, effects vocabulary. Don't define a class that doesn't serve this brand.
+
+```css
+/* examples — implement only what fits the brand */
+.frosted-glass         /* glass surface — opacity/blur derived from brand intensity */
+.frosted-glass-strong  /* heavier glass — for hero overlays */
+.grain                 /* noise texture — only if brand uses texture */
+.glow                  /* ambient radial glow — only if brand uses glow */
+.atmosphere            /* full-bleed animated gradient — derived from brand palette */
+```
+
+## Layout primitives
+
+```css
+.container      /* max-width wrapper, responsive padding */
+section         /* section spacing — density derived from brand intensity */
+.section-label  /* eyebrow label */
+.section-heading /* large section heading */
+```
+
+## Sections
+
+The template defines a baseline section order. Follow it. If the brand warrants additional sections beyond this list — imagery style, motion principles, iconography, spatial system, co-branding rules, etc. — add them where they fit. Number sections sequentially. Each section gets an `id` for sidebar navigation.
+
+### Navigation — always
+Fixed left sidebar. Table of contents linking to every section. Brand-derived styling — font, color, spacing, all from the pipeline. Hidden on mobile.
+
+**Section ID convention:** every section in the doc must have an `id` attribute that the nav links to:
+
+```html
+<!-- nav -->
+<nav id="toc" style="position: fixed; left: 0; top: 0; height: 100vh; width: 180px; z-index: 50;
+                     overflow-y: auto; display: flex; flex-direction: column;
+                     justify-content: center; padding: 0 28px; gap: 8px;
+                     border-right: 1px solid var(--border); background: var(--background);">
+  <a href="#hero"         class="toc-link">Brand</a>
+  <a href="#logo"         class="toc-link">Logo</a>
+  <a href="#positioning"  class="toc-link">Positioning</a>
+  <a href="#color"        class="toc-link">Color</a>
+  <a href="#typography"   class="toc-link">Typography</a>
+  <a href="#visuals"      class="toc-link">Visual Elements</a>
+  <a href="#components"   class="toc-link">Components</a>
+  <a href="#personas"     class="toc-link">Personas</a>
+  <a href="#voice"        class="toc-link">Voice</a>
+  <!-- add entries for any brand-specific sections -->
+</nav>
+
+<!-- main content offset -->
+<main style="margin-left: 180px;">
+
+  <section id="hero">...</section>
+  <section id="logo">...</section>
+  <!-- each section id matches its toc-link href -->
+
+</main>
+```
+
+`.toc-link` styling: use the brand's body font, `--muted-foreground` at rest, `--foreground` on hover, no underline. Active state via a 10-line scroll listener that adds `.active` (accent color) to the link whose section is in view — include this JS inline at the bottom of `<body>`. Keep it small.
+
+### Hero — always
+Defined entirely by the brand. Visual direction, archetype, and identity outputs determine the background, typography scale, layout density, and supporting content. No default treatment.
+
+**The headline must be the manifesto line from `positioning.md`.** If strategy phase is not complete, fall back to `brand_heartbeat` from `BRIEF.md`. Never generate a generic headline — this line was earned through the pipeline and must appear here.
+
+The hero should feel like opening a brand book. Someone who sees it should understand the brand's energy before reading a single label.
+
+### Logo
+Logo marks (icon, wordmark, lockup) on the brand's background. Composition rules, clear space, forbidden uses. Skip if no logo was defined in identity.
+
+### Positioning
+Brand promise, point of view, manifesto line. Rendered as editorial content using the brand's type hierarchy and visual language.
+
+### Color
+Swatch grid: name, hex, OKLCH per color. Grouped by role. Contrast pairs. Layout derived from the brand.
+
+### Typography
+Show the full type scale rendered live in the actual fonts — not a table, not a screenshot. Each step is a real HTML element styled with the brand's CSS vars.
+
+For each scale step show:
+- The text rendered at its actual size
+- Label: step name + font family + weight + size + line-height
+- A sample sentence or phrase that fits the brand voice (not "The quick brown fox")
+
+Render all steps in sequence from largest to smallest so the scale relationship is visible at a glance. Show each typeface family in its own block — display font, body font, mono font — with the scale steps that use it.
+
+```html
+<!-- example step -->
+<div style="margin-bottom: 48px;">
+  <div class="scale-step" style="font-family: var(--font-display); font-size: 4rem; line-height: 1.05; letter-spacing: -0.03em;">
+    We ship what others pitch.
+  </div>
+  <div class="scale-meta">Display · Instrument Serif · 400 · 64px / 1.05</div>
+</div>
+```
+
+Include pairing notes when the brand uses multiple typefaces: which font handles which role, and what the contrast between them communicates.
+
+### Visual Elements
+The brand's signature motifs: textures, dividers, shapes, glows, atmospheric effects, SVG elements. Each shown with its composition rule — when to use it, how much, what it must never do.
+
+### Components
+Live component previews in brand tokens: buttons, inputs, cards, badges. Include only if the brand has a meaningfully distinctive component style.
+
+### Personas
+Each persona as a branded card: name, role, frustration, aspiration. Styled in the brand's own visual language.
+
+### Voice
+Never / always rules as styled components. Monospace prefix (`x` never, `>` always).
+
+### + Brand-specific sections
+Add sections as needed to fully convey the brand. Examples: Imagery, Motion, Iconography, Spatial System, Co-branding. If the pipeline produced it and it shapes how the brand is applied, it belongs here.
+
+## Mobile
+
+Single `@media (max-width: 768px)` block. Hide sidebar nav. Stack grids. Reduce section padding. Scale type with `clamp()`.
+
+## Quality bar
+
+- Open in browser → immediately recognizable as this brand, not a generic template
+- `:root` token names match shadcn — a dev can paste directly into `globals.css`
+- Every visual decision traces back to a pipeline artifact
+- No placeholder content — if a section has nothing real to show, it's omitted

package/gsp/skills/gsp-brand-guidelines/methodology/gsp-brand-coherence.md

@@ -0,0 +1,86 @@
+<role>
+You are a brand coherence auditor spawned by `/gsp-brand-guidelines` after the brand-engineer produces its first-pass artifacts.
+
+Your only job is to evaluate whether the output is coherent with the brand's archetype and intensity intentions — and return a structured report. You do not make changes. You do not ask questions. You return one report.
+</role>
+
+<inputs>
+You receive inlined:
+- `{brand-name}.yml` — the generated preset (intensity dials, tokens, patterns, constraints)
+- `guidelines.html` — the generated visual guide (use for component-level verification)
+- `archetype` — the brand's chosen archetype
+- `brand_heartbeat` — the emotional compass confirmed in the brief
+</inputs>
+
+<methodology>
+## Step 1: Archetype gate
+
+Each archetype has a signature tension it must express. Answer this question first — it is the primary check. Intensity dials are secondary.
+
+| Archetype | Signature question |
+|-----------|-------------------|
+| Jester | What specific rule is being broken in the visual system? If nothing is broken, it's not Jester enough. |
+| Rebel | What visual convention is explicitly rejected? |
+| Creator | What is distinctively crafted that couldn't come from a default template? |
+| Sage | Is the restraint active (every reduction intentional) or passive (just plain)? |
+| Explorer | Where is the sense of movement, discovery, or possibility? |
+| Hero | Does the visual language communicate strength and achievement? |
+| Caregiver | Does it feel warm and trustworthy without being corporate? |
+| Lover | Is there sensuality, richness, or beauty in the material choices? |
+| Ruler | Does it command authority through precision and restraint? |
+| Magician | Is there a sense of transformation or the unexpected? |
+| Innocent | Is the simplicity purposeful and delightful, not just empty? |
+| Everyman | Does it feel accessible and genuine, not dumbed-down? |
+
+If the archetype's signature tension is absent from the output, that is the primary tension to flag — regardless of what the dials say.
+
+## Step 2: Intensity dial scoring
+
+Read the declared dial values from `intensity:` in the `.yml`. Then infer what the token values actually express visually.
+
+Work primarily from the `.yml` tokens — they are the source of truth:
+- `variance` — expressed by: radius values, shadow complexity, unexpected color usage, spacing irregularity
+- `motion` — expressed by: transition durations, animation presence in effects, interaction vocabulary richness
+- `density` — expressed by: spacing scale, font size range, information layer count
+
+Cross-check against `guidelines.html` for specific component implementations (button styles, card treatments, border-radius in practice).
+
+Score each dial: **declared N/10 → expressed N/10**. A gap of ±2 or more is a coherence miss worth flagging.
+
+## Step 3: Bold bet
+
+Identify the single most distinctive choice in the output — the thing that would be hardest to achieve with a default template. One line.
+
+## Step 4: Surface tensions
+
+Rank all gaps found. Return the top 2 — specific and actionable:
+- Not "could be bolder"
+- Yes: "border-radius is 4px across all components — that reads as variance 3/10, declared dial is 8/10"
+- Yes: "button uses standard padding and default shape — no Jester rule broken in the primary interactive element"
+
+If no gaps ≥ 2 points and the archetype tension is present, there are no tensions to surface.
+</methodology>
+
+<output>
+Return exactly this format — nothing else:
+
+```
+{brand-name}  ·  {archetype}  ·  {brand_heartbeat}
+
+  intensity dials
+    variance   declared {N}/10  →  reads {N}/10  {✓ or ⚠}
+    motion     declared {N}/10  →  reads {N}/10  {✓ or ⚠}
+    density    declared {N}/10  →  reads {N}/10  {✓ or ⚠}
+
+  archetype    {✓ tension present: one-line description} or {⚠ tension absent: one-line description}
+
+  tensions
+    1. {specific gap — or "none" if coherent}
+    2. {specific gap — or omit if only one}
+
+  bold bet
+    {one-line description of most distinctive choice}
+```
+
+No preamble. No explanation. Just the report.
+</output>

package/gsp/skills/gsp-brand-guidelines/methodology/gsp-brand-engineer.md

@@ -9,8 +9,8 @@ The identity phase produced: logo directions, color system (with OKLCH palettes)
 <inputs>
 - Identity chunks: color-system.md, typography.md, logo-directions.md, imagery-style.md (all enriched by domain skills)
 - Identity palettes.json (OKLCH scales)
-- BRIEF.md
-- Strategy chunks: voice-and-tone.md, archetype.md, positioning.md
+- BRIEF.md — including `brand_heartbeat` (the emotional compass sentence confirmed in the brief phase)
+- Strategy chunks: voice-and-tone.md, archetype.md, positioning.md — `manifesto_line` from positioning.md is the hero headline; fall back to `brand_heartbeat` if not present
 - system_strategy and tech_stack from config.json
 - `.design/system/STACK.md`, `COMPONENTS.md`, `TOKENS.md` (if exist)
 - style_base from config.json + preset `.yml` (if set) — the starting scaffold
@@ -42,7 +42,15 @@ The identity phase produced: logo directions, color system (with OKLCH palettes)
 
 4. **Component overrides + custom specs** — only for components that need treatment beyond tokens.
 
-5. **`guidelines.html`** — self-contained visual brand guide. This is the primary artifact users see. Single HTML file with embedded CSS, no external dependencies. Shows: brand colors as swatches with hex/OKLCH values, type scale rendered in the actual fonts, component previews (cards, buttons, inputs, badges) styled with the brand tokens, spacing/elevation visualizations, constraint summary. Design it to feel like the brand — use the brand's own colors, type, and patterns to present itself.
+5. **`guidelines.html`** — the visual conference of the entire brand pipeline. Every phase distilled into one self-rendering document: personas (discover), positioning + voice (strategy), color + type + visual elements + logo (identity), components (patterns). Follow the structure spec passed in the prompt exactly. The file IS the brand — it renders itself using the brand's own tokens, type, and primitives. Key requirements:
+   - `:root` uses shadcn-native CSS variable names (from spec) — a dev can paste these directly into `globals.css`
+   - Define only the primitive classes the brand actually uses — don't add `.frosted-glass` to a brand that has no glass aesthetic
+   - Hero is always required; all other sections are conditional — include only what the brand actually has. Sections in order when present: Hero (metric strip) → Logo → Positioning → Color → Typography → Visual Elements → Components → Personas → Voice → Custom Components
+   - Hero must feel alive: use a CSS animated gradient atmosphere (or embed a video link if one was referenced in the brief), frosted glass nav, large typographic headline in brand voice, 3-4 KPIs from the brief in the metric strip
+   - Voice section renders brand rules as `.never-list` / `.always-list` components
+   - Mobile responsive via a single `@media (max-width: 768px)` block
+   - No external dependencies except Google Fonts `@import`
+   - The brand's aesthetic sets the tone: dark brand → dark doc; light brand → light doc; match intensity.variance
 
 ## Inheritance from style_base
 
@@ -66,7 +74,7 @@ Read `system_strategy` from brand config:
 
 Leverage existing UI libraries — don't rewrite from scratch.
 
-**Tier 1: Token mapping** (always) — `components/token-mapping.md`. Maps brand tokens to library's theming API. Copy-paste-ready. See `references/token-mapping.md` for the CSS generation spec.
+**Tier 1: Token mapping** (always) — `components/token-mapping.md`. Maps brand tokens to library's theming API. Copy-paste-ready. Generate the CSS variables block by running `node bin/theme-css.js {brand-name}.yml` — it outputs a ready-to-paste `:root`/`.dark` block with OKLCH values. Token names in `.yml` are 1:1 with shadcn/ui CSS var names — no translation needed.
 
 **Tier 2: Override specs** (selective) — one file per component needing treatment beyond tokens. Why it's overridden, code hints.
 
@@ -88,7 +96,7 @@ Write operational artifacts to the brand's guidelines directory (path provided b
 
 - **`{brand-name}.yml`** — Single source of truth. Full preset schema: tokens, intensity, patterns, constraints, effects, dark_mode.
 - **`STYLE.md`** — Agent-readable contract rendered from `.yml` + philosophy + bold bets. Follows `templates/phases/style.md`.
-- **`guidelines.html`** — Self-contained visual brand guide. Single HTML file with embedded CSS — no external deps. Renders the brand using its own tokens: color swatches, type scale in actual fonts, component previews (card, button, input, badge), spacing/elevation vis, constraints. This is what the user sees.
+- **`guidelines.html`** — Self-rendering visual brand guide. Single HTML file with embedded CSS — no external deps except Google Fonts. `:root` uses shadcn-native CSS var names. Section order: Navigation (sidebar) → Hero (manifesto line as headline) → Logo → Positioning → Color → Typography → Visual Elements → Components → Personas → Voice → any brand-specific additions. Define only the primitive classes the brand actually uses. This is what the user sees — make it feel like the brand.
 
 ### Components
 

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

@@ -1,329 +1,26 @@
-# Token Mapping Reference
+# Token Mapping → bin/theme-css.js
 
-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.
+> **Superseded in v0.8.0.** The static mapping table has been replaced by a deterministic script.
 
-## Source: `.yml` Token Structure
+GSP presets use shadcn/ui-native token names directly. The `.yml` token keys match shadcn CSS variable names 1:1 — no translation layer is needed.
 
-Every preset (and every brand `.yml`) has this structure:
+## Generating CSS from a preset
 
-```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%"
+```bash
+node bin/theme-css.js gsp/skills/gsp-style/styles/professional.yml --stdout
 ```
 
-### 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):
+Output is `:root { }` + `.dark { }` blocks ready to paste into `globals.css`.
 
-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
+## How it works
 
-If only a preset exists (quick project), step 2 is skipped. The builder generates CSS from whatever `.yml` it receives.
+- Hex `#RRGGBB` values → converted to OKLCH (full color math: sRGB → linear → XYZ → OKLab → OKLCh)
+- Values containing `oklch(` → passed through as-is (handles alpha variants)
+- All other values (font stacks, shadows, etc.) → passed through verbatim
+- `--radius` derived from `shape.border-radius-lg`
+- `--chart-1` through `--chart-5` derived from palette colors
+- Sidebar vars written from explicit `color.sidebar-*` tokens in the `.yml`
 
-## When to generate extended files
+## Token structure
 
-| 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) |
+See `${CLAUDE_SKILL_DIR}/../gsp-style/style-preset-schema.md` for the full `.yml` schema — all shadcn variables are first-class token keys.

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

@@ -1,6 +1,6 @@
 ---
 name: gsp-brand-identity
-description: Create your visual identity — logo, color, typography (creative phase — benefits from capable models)
+description: Create visual identity — logo, color, typography (creative phase — benefits from capable models) — use when: design the logo, pick colors, choose fonts, create the visual identity
 user-invocable: true
 allowed-tools:
   - Read