get-shit-pretty 0.8.2 → 0.9.1

package/README.md

@@ -12,7 +12,9 @@
 <br>
 
 ```bash
-npx get-shit-pretty
+pnpm dlx get-shit-pretty
+# or with bun
+bunx get-shit-pretty
 ```
 
 **Works on Mac, Windows, and Linux.**
@@ -50,8 +52,9 @@ Both disciplines. Same pipeline. Same environment. The missing half of the bridg
 ## Quick Start
 
 ```bash
-# 1. Install
-npx get-shit-pretty
+# 1. Install (pnpm or bun)
+pnpm dlx get-shit-pretty
+# bunx get-shit-pretty
 
 # 2. Define your brand — or skip with a style preset
 /gsp-brand-brief                    # guided brand definition
@@ -418,7 +421,9 @@ GSP works across all major AI coding tools. The installer converts Claude Code's
 ## Install
 
 ```bash
-npx get-shit-pretty
+pnpm dlx get-shit-pretty
+# or with bun
+bunx get-shit-pretty
 ```
 
 The installer prompts you to choose:
@@ -430,32 +435,34 @@ The installer prompts you to choose:
 
 ```bash
 # Claude Code
-npx get-shit-pretty --claude --global
-npx get-shit-pretty --claude --local
+pnpm dlx get-shit-pretty --claude --global
+pnpm dlx get-shit-pretty --claude --local
 
 # OpenCode
-npx get-shit-pretty --opencode --global
+pnpm dlx get-shit-pretty --opencode --global
 
 # Gemini CLI
-npx get-shit-pretty --gemini --global
+pnpm dlx get-shit-pretty --gemini --global
 
 # Codex CLI
-npx get-shit-pretty --codex --global
+pnpm dlx get-shit-pretty --codex --global
 
 # All runtimes
-npx get-shit-pretty --all --global
+pnpm dlx get-shit-pretty --all --global
 ```
 
+> Substitute `bunx` for `pnpm dlx` if you prefer bun.
+
 </details>
 
 <details>
 <summary><strong>Uninstall</strong></summary>
 
 ```bash
-npx get-shit-pretty --claude --global --uninstall
-npx get-shit-pretty --opencode --global --uninstall
-npx get-shit-pretty --gemini --global --uninstall
-npx get-shit-pretty --codex --global --uninstall
+pnpm dlx get-shit-pretty --claude --global --uninstall
+pnpm dlx get-shit-pretty --opencode --global --uninstall
+pnpm dlx get-shit-pretty --gemini --global --uninstall
+pnpm dlx get-shit-pretty --codex --global --uninstall
 ```
 
 </details>

package/bin/install.js

@@ -204,7 +204,7 @@ console.log(banner);
 
 // Help
 if (hasHelp) {
-  console.log(`  ${yellow}Usage:${reset} npx get-shit-pretty [options]\n
+  console.log(`  ${yellow}Usage:${reset} pnpm dlx get-shit-pretty [options]   ${dim}# or: bunx get-shit-pretty [options]${reset}\n
   ${yellow}Options:${reset}
     ${cyan}-g, --global${reset}              Install globally (to config directory)
     ${cyan}-l, --local${reset}               Install locally (to current directory)
@@ -221,19 +221,19 @@ if (hasHelp) {
 
   ${yellow}Examples:${reset}
     ${dim}# Interactive install (prompts for runtime and location)${reset}
-    npx get-shit-pretty
+    pnpm dlx get-shit-pretty
 
     ${dim}# Install for Claude Code globally${reset}
-    npx get-shit-pretty --claude --global
+    pnpm dlx get-shit-pretty --claude --global
 
     ${dim}# Install for all runtimes globally${reset}
-    npx get-shit-pretty --all --global
+    pnpm dlx get-shit-pretty --all --global
 
     ${dim}# Install to current project only${reset}
-    npx get-shit-pretty --claude --local
+    pnpm dlx get-shit-pretty --claude --local
 
     ${dim}# Uninstall GSP from Claude Code globally${reset}
-    npx get-shit-pretty --claude --global --uninstall
+    pnpm dlx get-shit-pretty --claude --global --uninstall
 `);
   process.exit(0);
 }
@@ -1817,8 +1817,8 @@ function promptRuntime(callback) {
 
 function promptLocation(runtimes) {
   if (!process.stdin.isTTY) {
-    console.log(`  ${yellow}Non-interactive terminal detected, defaulting to global install${reset}\n`);
-    installAllRuntimes(runtimes, true, false);
+    console.log(`  ${yellow}Non-interactive terminal detected, defaulting to local (project) install${reset}\n`);
+    installAllRuntimes(runtimes, false, false);
     return;
   }
 
@@ -1898,8 +1898,8 @@ if (require.main === module) {
     installAllRuntimes(['claude'], hasGlobal, false);
   } else {
     if (!process.stdin.isTTY) {
-      console.log(`  ${yellow}Non-interactive terminal detected, defaulting to Claude Code global install${reset}\n`);
-      installAllRuntimes(['claude'], true, false);
+      console.log(`  ${yellow}Non-interactive terminal detected, defaulting to Claude Code local (project) install${reset}\n`);
+      installAllRuntimes(['claude'], false, false);
     } else {
       promptRuntime((runtimes) => {
         promptLocation(runtimes);

package/gsp/skills/get-shit-pretty/SKILL.md

@@ -11,7 +11,9 @@ Design engineering system for AI coding tools. Brand identity + design projects,
 ## Install
 
 ```bash
-npx get-shit-pretty
+pnpm dlx get-shit-pretty
+# or with bun
+bunx get-shit-pretty
 ```
 
 Pick your runtime (Claude Code, OpenCode, Gemini CLI, or Codex CLI), choose global or local install, and you're set.

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

@@ -0,0 +1,213 @@
+---
+name: gsp-brand-apply
+description: Install a brand theme into a shadcn codebase — use when: apply the brand to the code, install the theme, switch to brand X, refresh the theme
+user-invocable: true
+allowed-tools:
+  - Read
+  - Write
+  - Bash
+  - Glob
+  - Grep
+  - AskUserQuestion
+---
+<context>
+The universal theme-install primitive. Reads a `{brand}.theme.json` (registry:theme) artifact and installs it into a shadcn codebase via `shadcn apply --only theme`. Surgical — only cssVars (and optionally fonts) change; components are untouched.
+
+Spawns an ephemeral localhost HTTP server (`serve-preset.js`, colocated in this skill's `bin/`) because shadcn CLI's `--preset` flag accepts HTTP URLs only (`file://` and bare paths are rejected).
+
+Called explicitly by the user, or invoked by `/gsp-brand-guidelines` (after generation, with consent) and `/gsp-brand-refine` (after token regen).
+</context>
+
+<objective>
+Install a brand's `{brand}.theme.json` into a target shadcn project's `globals.css`.
+
+**Input:** brand name (positional arg) + optional `--target <path>`
+**Output:** Updated CSS file (path declared in `{target}/components.json` → `tailwind.css`) — cssVars only — plus log entry in `{BRAND_PATH}/STATE.md`
+**Agent:** None — inline Bash
+</objective>
+
+<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
+
+Parse the user's argument:
+- If a brand name was passed (e.g. `/gsp-brand-apply lyra`) → `BRAND={arg}`.
+- If no name was given → scan `.design/branding/` for brand directories.
+  - If exactly one → use it.
+  - If multiple → use `AskUserQuestion`: "Which brand should I apply?" — list names as options.
+  - If zero → error: "No brand found. Run `/gsp-brand-guidelines` first." Stop.
+
+Set `BRAND_PATH=.design/branding/{BRAND}`.
+Set `THEME_JSON={BRAND_PATH}/patterns/{BRAND}.theme.json`.
+
+If `THEME_JSON` does not exist → error: "Brand '{BRAND}' has no theme.json. Run `/gsp-brand-guidelines {BRAND}` to generate it." Stop.
+
+## Step 0.5: Pre-flight — preserve user work
+
+`shadcn apply --only theme` is not strictly cssVars-only. Its preflight may also bump dependency versions in `package.json` (notably `shadcn` itself and `@base-ui/react`), regenerate `package-lock.json`, and rewrite `components.json`. We don't suppress this — there's no upstream flag (see issue tracker) — but we refuse to run when those files have uncommitted work, so the user can review the dep changes via `git diff` afterward.
+
+If `{TARGET}` is inside a git repository, run:
+
+```bash
+git -C {TARGET} diff --quiet -- package.json package-lock.json components.json 2>/dev/null
+```
+
+If the exit code is non-zero (uncommitted changes exist in any of those three files), use `AskUserQuestion`:
+
+- Question: "`{TARGET}` has uncommitted changes in `package.json`, `package-lock.json`, or `components.json`. `shadcn apply` may modify these (preflight bumps versions). Continue anyway?"
+- Options:
+  - A: "Cancel — I'll commit/stash first"
+  - B: "Proceed anyway — I accept potential conflicts with my pending work"
+
+If A → exit cleanly. If B → continue.
+
+If `{TARGET}` is not a git repo, skip this check silently — there's nothing to compare against.
+
+## Step 1: Resolve target
+
+Parse `--target` flag if present.
+
+If no flag:
+- Read project config at `.design/projects/*/config.json` and find `app_path`.
+  - If exactly one project config → use that `app_path`.
+  - If multiple → use `AskUserQuestion`: "Which project's codebase?" — list project names + paths.
+  - If zero project configs → error: "No project found. Pass `--target <path>` explicitly." Stop.
+
+Set `TARGET={app_path}` (default `.` if empty).
+
+Verify `{TARGET}/components.json` exists. If not → error: "{TARGET} is not a shadcn project (no components.json). Run `/gsp-scaffold` first." Stop.
+
+## Step 2: Detect currently-installed brand (informational)
+
+Resolve the CSS path: read `{TARGET}/components.json` and extract the value at `.tailwind.css` (a relative path from `{TARGET}`). Open `{TARGET}/{cssPath}`. Look for OKLCH cssVars in `:root`. Compare the `--background` light value against `.design/branding/*/patterns/*.theme.json` files in the workspace.
+
+- If a match is found → `CURRENT={matched-brand-name}`.
+- If file exists but no match → `CURRENT="custom or shadcn defaults"`.
+- If file missing → `CURRENT="(none — fresh project)"`.
+
+This is informational only — surfaced in the confirmation message in Step 3.
+
+## Step 2.5: Detect custom token indirection
+
+Scan the cssVars sections of `{TARGET}/{cssPath}` (`:root` and `.dark` blocks) for declarations of the form `--<name>: var(--<other>);` — these are custom indirection layers (e.g. `--background: var(--brand-bg);`).
+
+`shadcn apply --only theme` will REPLACE those `var()` references with literal OKLCH values from the theme.json. The custom indirection is lost — the upstream tokens (e.g. `--brand-bg`) remain defined elsewhere in the file, but the shadcn cssVars no longer reference them.
+
+If any `var(--*)` declarations are found in the cssVars blocks, use `AskUserQuestion`:
+- Question: "`{cssPath}` has **{N} cssVar(s) using `var(--*)` indirection** (e.g. `{first-example}`). `shadcn apply` will replace these with literal OKLCH values, breaking the indirection layer. Continue?"
+- Options:
+  - A: "Yes, replace with literal values"
+  - B: "No, cancel — preserve the indirection"
+
+If B → append `- {ISO-8601 timestamp}: apply cancelled — would have broken indirection in {cssPath}` to `{BRAND_PATH}/STATE.md` under `## Apply log`. Output "Apply cancelled — preserve your indirection layer manually if needed." Exit cleanly.
+If A → continue.
+
+If no `var(--*)` indirection is found, skip this confirmation silently.
+
+## Step 3: Confirm (when overwriting a different installed brand)
+
+If `CURRENT` is a recognized brand name AND it differs from `BRAND`:
+
+Use `AskUserQuestion`:
+- Question: "Currently installed: **{CURRENT}**. Replace with **{BRAND}**?"
+- Options:
+  - A: "Yes, replace"
+  - B: "No, cancel"
+
+If B → append `- {ISO-8601 timestamp}: apply cancelled by user (target: {TARGET})` to `{BRAND_PATH}/STATE.md` under `## Apply log`. Output "Apply cancelled" and exit cleanly.
+If A → continue.
+
+If `CURRENT` is unrecognized or fresh, skip this confirmation and proceed silently.
+
+## Steps 4–6: Spawn preset server, run apply, kill server
+
+**Run Steps 4 through 6 as a single Bash call.** `SERVER_PID`, `PRESET_URL`, and `APPLY_EXIT` are shell variables — they do not survive across separate Bash tool invocations.
+
+```bash
+# Step 4: spawn preset server, capture URL
+node ${CLAUDE_SKILL_DIR}/bin/serve-preset.js {THEME_JSON} > /tmp/preset-server-url-$$.txt 2>/dev/null &
+SERVER_PID=$!
+# Wait up to 2s for the URL to be written
+for i in 1 2 3 4 5 6 7 8 9 10; do sleep 0.2; [ -s /tmp/preset-server-url-$$.txt ] && break; done
+PRESET_URL=$(head -1 /tmp/preset-server-url-$$.txt 2>/dev/null)
+rm -f /tmp/preset-server-url-$$.txt
+
+# Bail if the server didn't print a URL
+if [[ -z "$PRESET_URL" || "$PRESET_URL" != http* ]]; then
+  kill "$SERVER_PID" 2>/dev/null
+  wait "$SERVER_PID" 2>/dev/null
+  echo "ERROR: preset server failed to start — serve-preset.js executable? Node available?"
+  exit 1
+fi
+
+# Step 5: run apply (quote {TARGET} — paths may contain spaces)
+cd "{TARGET}" && npx shadcn@latest apply --only theme --preset "$PRESET_URL" --yes 2>&1
+APPLY_EXIT=$?
+
+# Step 6: kill preset server unconditionally
+kill "$SERVER_PID" 2>/dev/null
+wait "$SERVER_PID" 2>/dev/null
+
+# Surface APPLY_EXIT for the verification step
+echo "APPLY_EXIT=$APPLY_EXIT"
+```
+
+Capture the bash output (especially the `APPLY_EXIT=N` line and any shadcn stderr) to use in Step 7.
+
+## Step 7: Verify or report failure
+
+If `APPLY_EXIT != 0`:
+- Surface the captured shadcn output to the user (concise — full stderr, plus a single-line summary).
+- Append to `{BRAND_PATH}/STATE.md` under `## Apply log`: `- {ISO-timestamp}: apply FAILED — exit {code} on {TARGET}`.
+- Stop. Do NOT auto-retry. Do NOT manually paste tokens as a fallback.
+
+If `APPLY_EXIT == 0`:
+- Resolve the CSS path: read `{TARGET}/components.json` and extract the value at `.tailwind.css` (a relative path from `{TARGET}`).
+- Read `{BRAND_PATH}/patterns/{BRAND}.theme.json` and extract `cssVars.light.background` (the brand's signature OKLCH value).
+- Open `{TARGET}/{cssPath}`. Verify:
+  - Contains `oklch(`
+  - Has both `:root {` and `.dark {` blocks
+  - Declares `--background`, `--foreground`, `--primary`, `--radius`
+  - **Contains the exact `cssVars.light.background` value from the theme.json** (this distinguishes a successful brand apply from shadcn's own nova defaults, which also satisfy the structural checks above)
+- If any check fails → warn (do not error): "Apply reported success but expected tokens not found in `{cssPath}` — the apply may have fallen back to defaults. Inspect manually." Continue to Step 8.
+- If all checks pass → continue to Step 8.
+
+## Step 8: Log success
+
+Append to `{BRAND_PATH}/STATE.md` under a `## Apply log` section. If the file or section doesn't exist, create it.
+
+```
+## Apply log
+
+- {ISO-8601 timestamp}: applied to `{TARGET}` (replaced: {CURRENT})
+```
+
+## Step 9: Output
+
+After apply, check whether `package.json`, `package-lock.json`, or `components.json` were modified by shadcn's preflight:
+
+```bash
+cd {TARGET} && git diff --name-only -- package.json package-lock.json components.json 2>/dev/null
+```
+
+If the output is non-empty, list those files in the success block under a "Review" line so the user knows to inspect them. If empty (or the target is not a git repo), omit the Review line.
+
+```
+  ◆ brand applied — {BRAND} → {TARGET}
+
+    {cssPath} updated
+    Re-apply: /gsp-brand-apply {BRAND}
+    Refine:   /gsp-brand-refine
+
+    [if dep files changed]
+    Review:   git diff {file1} {file2} ...
+              (shadcn preflight may have bumped dep versions —
+               commit or revert as you prefer)
+
+  ──────────────────────────────
+```
+</process>

package/gsp/skills/gsp-brand-apply/bin/serve-preset.js

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+/**
+ * serve-preset.js — ephemeral HTTP server for shadcn --preset URL fetch.
+ *
+ * Usage (from repo root):
+ *   node gsp/skills/gsp-brand-apply/bin/serve-preset.js <path-to-registry-item.json>
+ *
+ * Behavior:
+ *   - Listens on a random free port on 127.0.0.1.
+ *   - Prints the URL ("http://127.0.0.1:<port>/<basename>") to stdout.
+ *   - Serves the file as application/json on any request path.
+ *   - Exits cleanly on SIGTERM/SIGINT.
+ *   - Self-exits after 60s as a safety net.
+ */
+
+'use strict';
+
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const TIMEOUT_MS = 60_000;
+
+function main() {
+  const filePath = process.argv[2];
+  if (!filePath) {
+    console.error('Usage: node gsp/skills/gsp-brand-apply/bin/serve-preset.js <path-to-json>');
+    process.exit(1);
+  }
+  const abs = path.resolve(filePath);
+  if (!fs.existsSync(abs)) {
+    console.error(`File not found: ${abs}`);
+    process.exit(1);
+  }
+  const body = fs.readFileSync(abs, 'utf8');
+  const basename = path.basename(abs);
+
+  const server = http.createServer((req, res) => {
+    res.setHeader('Content-Type', 'application/json');
+    res.setHeader('Cache-Control', 'no-store');
+    res.end(body);
+  });
+
+  server.on('error', (err) => {
+    console.error(`Server error: ${err.message}`);
+    process.exit(1);
+  });
+
+  server.listen(0, '127.0.0.1', () => {
+    const { port } = server.address();
+    const url = `http://127.0.0.1:${port}/${basename}`;
+    process.stdout.write(url + '\n');
+  });
+
+  let shuttingDown = false;
+  const shutdown = () => {
+    if (shuttingDown) return;
+    shuttingDown = true;
+    server.close(() => process.exit(0));
+    setTimeout(() => process.exit(0), 1000).unref();
+  };
+
+  process.on('SIGTERM', shutdown);
+  process.on('SIGINT', shutdown);
+  setTimeout(() => {
+    console.error('serve-preset: 60s safety timeout reached, exiting');
+    shutdown();
+  }, TIMEOUT_MS).unref();
+}
+
+main();

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

@@ -20,7 +20,7 @@ Identity made the creative decisions. This phase makes them work in code.
 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)
+**Output:** `{brand}/patterns/` ({brand-name}.yml, {brand-name}.theme.json, STYLE.md, guidelines.html, components/, INDEX.md)
 **Agent:** `gsp-brand-engineer`
 </objective>
 
@@ -216,6 +216,57 @@ Spawn the `gsp-brand-engineer` agent with (reuse **Agent methodology** loaded in
 >
 > 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.75: Emit shadcn theme registry artifact
+
+Generate `{brand-name}.theme.json` (registry:theme) alongside the existing patterns. This is the artifact `/gsp-brand-apply` installs into shadcn codebases.
+
+```bash
+node ${CLAUDE_SKILL_DIR}/bin/theme-css.js \
+  {BRAND_PATH}/patterns/{brand-name}.yml \
+  --registry \
+  --output {BRAND_PATH}/patterns/{brand-name}.theme.json
+```
+
+Verify the file was written and contains valid JSON:
+
+```bash
+node -e "JSON.parse(require('fs').readFileSync('{BRAND_PATH}/patterns/{brand-name}.theme.json', 'utf8'))" \
+  && echo "✓ theme.json emitted"
+```
+
+If either command fails, surface the error and stop — the brand pipeline is incomplete without this artifact.
+
+## Step 4.8: Offer to apply theme to codebase
+
+Detect installable target. Read project config (`.design/projects/*/config.json`) and look for `preferences.app_path`:
+
+- If no project config exists, or `app_path` is empty/missing → skip this step. Output a one-line note: `Apply later with /gsp-brand-apply {brand-name}`. Continue to Step 4.5.
+- If `app_path` exists, check `{app_path}/components.json`:
+  - If missing → skip (no shadcn project to install into). Same one-line note.
+  - If present → continue.
+
+Detect currently-installed brand (informational):
+- Resolve the CSS path from `{app_path}/components.json` → `.tailwind.css` (a relative path).
+- Read `{app_path}/{cssPath}` if it exists.
+- Look for OKLCH `:root` declarations.
+- Compare `--background` light value against other `.design/branding/*/patterns/*.theme.json` files in the workspace.
+- Set `CURRENT={matched-brand-name}` or `CURRENT="shadcn defaults"` or `CURRENT="(none)"`.
+
+Use `AskUserQuestion`:
+- Question: "Apply **{brand-name}** to `{app_path}`? Currently installed: **{CURRENT}**. This replaces cssVars in the CSS file; components stay as-is."
+- Options:
+  - A: "Apply now"
+  - B: "Skip — I'll apply later"
+  - C: "Apply to a different project"
+
+On A: output `Run /gsp-brand-apply {brand-name}` as the next step the user should take.
+
+On B: output `Skipped. Apply later with /gsp-brand-apply {brand-name}.`
+
+On C: use `AskUserQuestion` to ask for the target path. Then output `Run /gsp-brand-apply {brand-name} --target {chosen-path}` as the next step.
+
+Continue to Step 4.5 regardless of choice.
+
 ## Step 4.5: Update state
 
 Update `{BRAND_PATH}/STATE.md`:
@@ -228,7 +279,7 @@ Update `.design/CLAUDE.md` — replace the existing `### {brand-name}` entry (wr
 ```markdown
 ### {brand-name} · complete · {DATE}
 "{brand_heartbeat}"
-.design/branding/{brand-name}/patterns/ — guidelines.html · STYLE.md · {brand-name}.yml
+.design/branding/{brand-name}/patterns/ — guidelines.html · STYLE.md · {brand-name}.yml · {brand-name}.theme.json
 ```
 
 ## Step 5: Phase transition output

package/{bin → gsp/skills/gsp-brand-guidelines/bin}/theme-css.js

@@ -1,14 +1,16 @@
 #!/usr/bin/env node
 /**
- * theme-css.js — GSP deterministic token-to-CSS generator
+ * theme-css.js — GSP deterministic token generator
  *
- * Reads a GSP style preset `.yml` file and outputs a shadcn/ui-compatible
- * CSS variables block for `:root` and `.dark`.
+ * Reads a GSP style preset `.yml` file and emits either a shadcn-compatible
+ * CSS variables block (`:root` and `.dark`) or a `registry:theme`
+ * registry-item.json artifact for use with `shadcn apply --only theme`.
  *
- * Usage:
- *   node bin/theme-css.js <path-to-preset.yml>
- *   node bin/theme-css.js <path-to-preset.yml> --output globals.css
- *   node bin/theme-css.js <path-to-preset.yml> --stdout
+ * Usage (from repo root):
+ *   node gsp/skills/gsp-brand-guidelines/bin/theme-css.js <preset.yml>                                # CSS to stdout
+ *   node gsp/skills/gsp-brand-guidelines/bin/theme-css.js <preset.yml> --output globals.css           # CSS to file
+ *   node gsp/skills/gsp-brand-guidelines/bin/theme-css.js <preset.yml> --stdout                       # CSS to stdout (explicit)
+ *   node gsp/skills/gsp-brand-guidelines/bin/theme-css.js <preset.yml> --registry --output theme.json # registry-item.json
  *
  * Token → CSS var mapping is 1:1. No derivation, no LLM guesswork.
  * Hex values are converted to OKLCH. Alpha values (oklch with /) pass through.
@@ -274,6 +276,103 @@ function generateBlock(colorObj, shapeObj, typographyObj, selector) {
   return `${selector} {\n${lines.join('\n')}\n}`;
 }
 
+// ---------------------------------------------------------------------------
+// Registry-item.json builder
+// ---------------------------------------------------------------------------
+
+/**
+ * Walk a flat color object (e.g. preset.tokens.color) and convert every value
+ * through formatValue, returning a flat key→value map for cssVars.
+ * Keys are the same as in the YAML (background, primary, etc.) — NOT prefixed
+ * with "--" because shadcn's registry-item.json schema uses bare names.
+ */
+// Note: unlike generateBlock (CSS path), this does NOT synthesize chart-1..5
+// from primary/secondary/etc. when not explicitly defined in the YAML. All
+// current GSP presets define all five chart vars explicitly, so the paths
+// stay symmetric in practice; if a future preset omits chart vars, add the
+// fallback logic here too.
+function colorObjToCssVars(colorObj) {
+  if (!colorObj) return {};
+  const out = {};
+  // Walk all known CSS var groups: core, sidebar, chart, extras
+  const allKeys = [...CORE_VARS, ...SIDEBAR_VARS, ...EXTRA_VARS];
+  for (const key of allKeys) {
+    if (colorObj[key] !== undefined) {
+      out[key] = formatValue(colorObj[key]);
+    }
+  }
+  // Chart vars
+  const chartSources = [
+    colorObj['chart-1'],
+    colorObj['chart-2'],
+    colorObj['chart-3'],
+    colorObj['chart-4'],
+    colorObj['chart-5'],
+  ];
+  chartSources.forEach((c, i) => {
+    if (c !== undefined) {
+      out[`chart-${i + 1}`] = formatValue(c);
+    }
+  });
+  return out;
+}
+
+/**
+ * Build a shadcn registry-item.json object from a parsed preset.
+ */
+function buildRegistryItem(preset, inputPath) {
+  const name = preset.name || path.basename(inputPath, '.yml');
+  const title = preset.title || name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+  const description = preset.description || '';
+
+  const colorLight = (preset.tokens && preset.tokens.color) || {};
+  const colorDark = (preset.dark_mode && preset.dark_mode.color) || {};
+  const shape = (preset.tokens && preset.tokens.shape) || {};
+  const typography = (preset.tokens && preset.tokens.typography) || {};
+
+  // Build cssVars.theme from typography font mappings
+  const theme = {};
+  const fontMappings = [
+    ['font-family-primary', 'font-sans'],
+    ['font-family-mono', 'font-mono'],
+    ['font-family-display', 'font-display'],
+    ['font-family-secondary', 'font-secondary'],
+  ];
+  for (const [ymlKey, cssKey] of fontMappings) {
+    if (typography[ymlKey] !== undefined) {
+      theme[cssKey] = typography[ymlKey];
+    }
+  }
+
+  // Build cssVars.light — colors + radius
+  const light = colorObjToCssVars(colorLight);
+  const lg = shape['border-radius-lg'];
+  if (lg !== undefined) {
+    light['radius'] = String(lg);
+  }
+
+  // Build cssVars.dark — dark_mode color overrides
+  const dark = colorObjToCssVars(colorDark);
+
+  const registryItem = {
+    $schema: 'https://ui.shadcn.com/schema/registry-item.json',
+    name,
+    type: 'registry:theme',
+    title,
+    cssVars: {
+      ...(Object.keys(theme).length ? { theme } : {}),
+      light,
+      dark,
+    },
+  };
+
+  if (description) {
+    registryItem.description = description;
+  }
+
+  return registryItem;
+}
+
 // ---------------------------------------------------------------------------
 // Main
 // ---------------------------------------------------------------------------
@@ -281,8 +380,10 @@ function generateBlock(colorObj, shapeObj, typographyObj, selector) {
 function main() {
   const args = process.argv.slice(2);
   if (!args.length || args.includes('--help') || args.includes('-h')) {
-    console.log(`Usage: node bin/theme-css.js <preset.yml> [--output <file>] [--stdout]`);
-    console.log(`       node bin/theme-css.js gsp/skills/gsp-style/styles/saas.yml`);
+    const cmd = 'node gsp/skills/gsp-brand-guidelines/bin/theme-css.js';
+    console.log(`Usage: ${cmd} <preset.yml> [--output <file>] [--stdout] [--registry]`);
+    console.log(`       ${cmd} gsp/skills/gsp-style/styles/saas.yml`);
+    console.log(`       ${cmd} gsp/skills/gsp-style/styles/saas.yml --registry --output saas.theme.json`);
     process.exit(0);
   }
 
@@ -295,10 +396,23 @@ function main() {
   const outputIdx = args.indexOf('--output');
   const outputPath = outputIdx !== -1 ? path.resolve(args[outputIdx + 1]) : null;
   const toStdout = args.includes('--stdout') || !outputPath;
+  const asRegistry = args.includes('--registry');
 
   const raw = fs.readFileSync(inputPath, 'utf8');
   const preset = parseYaml(raw);
 
+  if (asRegistry) {
+    const registryItem = buildRegistryItem(preset, inputPath);
+    const output = JSON.stringify(registryItem, null, 2);
+    if (toStdout) {
+      process.stdout.write(output + '\n');
+    } else {
+      fs.writeFileSync(outputPath, output + '\n', 'utf8');
+      console.log(`Written to ${outputPath}`);
+    }
+    return;
+  }
+
   const colorLight = (preset.tokens && preset.tokens.color) || {};
   const colorDark = (preset.dark_mode && preset.dark_mode.color) || {};
   const shape = (preset.tokens && preset.tokens.shape) || {};
@@ -313,7 +427,7 @@ function main() {
   const header = [
     `/* GSP theme: ${presetName} */`,
     presetDesc ? `/* ${presetDesc} */` : null,
-    `/* Generated by bin/theme-css.js from ${path.basename(inputPath)} */`,
+    `/* Generated by theme-css.js from ${path.basename(inputPath)} */`,
     `/* Edit the .yml file, not this output */`,
     '',
   ].filter(Boolean).join('\n');

package/gsp/skills/gsp-brand-guidelines/design-tokens.md

@@ -1,6 +1,6 @@
 # Design Token Standards
 
-> **GSP approach (v0.8.0+):** GSP presets use **shadcn/ui-native token names** directly — keys in `.yml` files map 1:1 to shadcn CSS variables (`background`, `foreground`, `primary`, `accent`, etc.). The W3C format below is background context on token standards in general; it does not reflect GSP's flat, shadcn-native schema. See `bin/theme-css.js` for how GSP converts `.yml` tokens to CSS.
+> **GSP approach (v0.8.0+):** GSP presets use **shadcn/ui-native token names** directly — keys in `.yml` files map 1:1 to shadcn CSS variables (`background`, `foreground`, `primary`, `accent`, etc.). The W3C format below is background context on token standards in general; it does not reflect GSP's flat, shadcn-native schema. See `theme-css.js` (colocated with this skill) for how GSP converts `.yml` tokens to CSS.
 
 **Format:** W3C Design Tokens Community Group specification
 

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

@@ -74,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. 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 1: Token mapping** (always) — `components/token-mapping.md`. Maps brand tokens to library's theming API. Documents the OKLCH values generated by `theme-css.js` — these are installed into `globals.css` via `/gsp-brand-apply` (not manually pasted). 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.
 

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

@@ -1,4 +1,4 @@
-# Token Mapping → bin/theme-css.js
+# Token Mapping → theme-css.js
 
 > **Superseded in v0.8.0.** The static mapping table has been replaced by a deterministic script.
 
@@ -7,7 +7,7 @@ GSP presets use shadcn/ui-native token names directly. The `.yml` token keys mat
 ## Generating CSS from a preset
 
 ```bash
-node bin/theme-css.js gsp/skills/gsp-style/styles/professional.yml --stdout
+node gsp/skills/gsp-brand-guidelines/bin/theme-css.js gsp/skills/gsp-style/styles/professional.yml --stdout
 ```
 
 Output is `:root { }` + `.dark { }` blocks ready to paste into `globals.css`.

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

@@ -21,7 +21,7 @@ This skill modifies **`{brand-name}.yml`** — the single source of truth for br
 Accept natural language feedback about brand visuals, identify which `.yml` values are affected, apply targeted changes, and regenerate `STYLE.md` if it exists.
 
 **Input:** Natural language feedback (e.g., "accent is too muted", "make buttons rounder", "more motion")
-**Output:** Updated `{brand-name}.yml` + regenerated `STYLE.md` (if exists) + `REFINE-LOG.md`
+**Output:** Updated `{brand-name}.yml` + regenerated `STYLE.md` (if exists) + `{brand-name}.theme.json` (regenerated) + `REFINE-LOG.md`
 **Agent:** None — inline skill, surgical edits
 </objective>
 
@@ -123,7 +123,38 @@ Apply confirmed changes:
 1. **`{brand-name}.yml`** — edit values in place with `Edit`. Preserve structure.
 2. **`STYLE.md`** — if it exists, regenerate the affected sections (Patterns tables, Constraints lists, Effects tables, or Intensity dials) to reflect the `.yml` changes. Read the template from `${CLAUDE_SKILL_DIR}/../../templates/phases/style.md` for format reference.
 
-## Step 4: Log and finish
+## Step 4: Regenerate theme.json and offer to apply
+
+After updating `{brand-name}.yml` and (if applicable) regenerating `STYLE.md`, regenerate the shadcn registry artifact:
+
+```bash
+node ${CLAUDE_SKILL_DIR}/../gsp-brand-guidelines/bin/theme-css.js \
+  {BRAND_PATH}/patterns/{brand-name}.yml \
+  --registry \
+  --output {BRAND_PATH}/patterns/{brand-name}.theme.json
+```
+
+Verify the file is valid JSON:
+
+```bash
+node -e "JSON.parse(require('fs').readFileSync('{BRAND_PATH}/patterns/{brand-name}.theme.json', 'utf8'))" \
+  && echo "✓ theme.json refreshed"
+```
+
+If a project config exists (`.design/projects/*/config.json` with a non-empty `app_path`) AND `{app_path}/components.json` exists (a shadcn target), use `AskUserQuestion`:
+
+- Question: "Theme refreshed. Apply changes to `{app_path}` now?"
+- Options:
+  - A: "Yes — apply now"
+  - B: "Skip — apply later"
+
+On A: output `Run /gsp-brand-apply {brand-name}` as the next user step.
+
+On B: output `Refreshed. Apply later with /gsp-brand-apply {brand-name}.`
+
+If no shadcn target is detected, skip the prompt and output a passive note: `Theme refreshed. No shadcn target detected — apply later with /gsp-brand-apply {brand-name} once a shadcn project is set up.`
+
+## Step 5: Log and finish
 
 Append to `{BRAND_PATH}/REFINE-LOG.md`:
 

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

@@ -245,12 +245,12 @@ Glob for all SKILL.md files in the skills directory (`{runtime-dir}/skills/*/SKI
 **Check I2: Skill directories are complete (not just SKILL.md)**
 For each gsp-* skill directory, check if `SKILL.md` references sibling files via `${CLAUDE_SKILL_DIR}/` paths (e.g. `styles/INDEX.yml`). If it does, verify those files/dirs exist in the installed skill directory.
 - All referenced siblings present → PASS
-- Missing siblings → FAIL: "Skill {name} references {path} but it's missing. Re-run the installer: `npx get-shit-pretty`"
+- Missing siblings → FAIL: "Skill {name} references {path} but it's missing. Re-run the installer: `pnpm dlx get-shit-pretty` (or `bunx get-shit-pretty`)"
 
 **Check I3: Bundle directories accessible**
 Check that the runtime bundle directories exist (`{runtime-dir}/templates/`, `{runtime-dir}/references/`). Skills reference these via `${CLAUDE_SKILL_DIR}/../../`.
 - All present → PASS
-- Missing → FAIL: "Bundle directory {dir} missing. Re-run the installer: `npx get-shit-pretty`"
+- Missing → FAIL: "Bundle directory {dir} missing. Re-run the installer: `pnpm dlx get-shit-pretty` (or `bunx get-shit-pretty`)"
 
 **Check I4: VERSION file present**
 Check `{runtime-dir}/VERSION` exists and contains a valid semver string.
@@ -262,7 +262,7 @@ Check `{runtime-dir}/VERSION` exists and contains a valid semver string.
 Check if `~/.claude/skills/` contains `gsp-*` directories when running from a local install. These cause duplicates between global and local.
 - Run: `ls ~/.claude/skills/ | grep '^gsp-'`
 - No matches → PASS
-- Matches found → FAIL: "Found {N} stale GSP skills in ~/.claude/skills/. Fix: run `npx get-shit-pretty --claude --local` to reinstall (the installer cleans stale globals automatically), or manually remove: `rm -rf ~/.claude/skills/gsp-*`"
+- Matches found → FAIL: "Found {N} stale GSP skills in ~/.claude/skills/. Fix: run `pnpm dlx get-shit-pretty --claude --local` (or `bunx get-shit-pretty --claude --local`) to reinstall (the installer cleans stale globals automatically), or manually remove: `rm -rf ~/.claude/skills/gsp-*`"
 
 ### Stack Compliance Checks (shadcn targets)
 

package/gsp/skills/gsp-project-build/SKILL.md

@@ -142,6 +142,30 @@ Hold their content for inlining into agent prompts in Steps 3, 4.5, 5, 7, and 8.
 
 > **Note:** Anti-patterns are distilled into the `gsp-project-builder` agent prompt. Full ref remains on disk for edge-case agent lookup.
 
+## Step 2.7: Theme apply gate
+
+Verify brand tokens are installed in the codebase before spawning foundations. Foundations no longer pastes tokens — `/gsp-brand-apply` is the install primitive.
+
+1. If `{APP_PATH}/components.json` does not exist, skip this gate silently — the target is non-shadcn (scaffold's failure gate at end of Step 2 already covers a broken shadcn scaffold).
+2. Resolve the CSS path: read `{APP_PATH}/components.json` and extract the value at `.tailwind.css` (a relative path from `APP_PATH`).
+3. Open `{APP_PATH}/{cssPath}`. Verify:
+   - Contains `oklch(`
+   - Has both `:root {` and `.dark {` blocks
+   - Declares `--background`, `--foreground`, `--primary`, `--radius`
+   - **If** `{BRAND_PATH}/patterns/{brand-name}.theme.json` exists: contains the brand's signature `cssVars.light.background` value from that file (this distinguishes the applied brand from shadcn's nova defaults). If `{brand-name}.theme.json` does NOT exist (older brand from before Task 4 landed), skip the brand-signature check and rely on the structural checks only — log `⚠ Brand theme.json not found — skipping brand-signature check.`
+
+If any required check fails, brand tokens are not applied (or the wrong brand is applied). Use `AskUserQuestion`:
+- Question: "Brand tokens for **{brand-name}** not detected in `{APP_PATH}/{cssPath}`. Run `/gsp-brand-apply {brand-name}` now?"
+- Options:
+  - A: "Yes — I'll run /gsp-brand-apply {brand-name}, then re-run /gsp-project-build"
+  - B: "No, abort the build"
+
+On A: output `Next: run /gsp-brand-apply {brand-name}, then re-invoke /gsp-project-build` and exit this skill. The build does not auto-continue — the apply runs out-of-band and you re-invoke when ready.
+
+On B: stop the build phase. Output: `Build aborted — apply brand tokens with /gsp-brand-apply {brand-name} and re-run /gsp-project-build.`
+
+If all checks pass, log `✓ Brand tokens verified` and continue to Step 3.
+
 ## Step 3: Phase 2 — FOUNDATIONS
 
 Spawn `gsp-project-builder` agent with **execution_mode: foundations**.
@@ -169,8 +193,8 @@ Spawn `gsp-project-builder` agent with **execution_mode: foundations**.
 >
 > Build token integration, global styles, and layout primitives ONLY.
 >
-> 1. Integrate design tokens into the codebase: run `node bin/theme-css.js {brand-name}.yml --stdout` and paste the OKLCH `:root`/`.dark` output into `globals.css`. For shadcn targets, follow the `@theme inline` pattern from `shadcn-rules.md`. Map ALL variables — background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, sidebar-*, chart-1 through chart-5, and --radius.
-> 2. Create global CSS (resets, base styles, font imports, dark mode setup)
+> 1. **Verify** brand tokens are already installed in `globals.css`. The orchestrator gates this — by the time you run, tokens MUST be present (installed via `/gsp-brand-apply` either directly or through the brand-guidelines prompt). If you find tokens missing, abort with a clear error pointing at `/gsp-brand-apply {brand-name}`. Do NOT manually paste tokens.
+> 2. Add base styles, dark mode setup, and any font imports that `apply` did not handle. (Note: `cssVars.theme.font-sans` may set the CSS variable but not generate the `next/font/google` import in `layout.tsx`. If the import is missing, add it. If present, leave it alone.)
 > 3. Create root layout with nav shell and footer shell (structure only — no page content)
 > 4. Create shared utilities (cn helper, theme provider if needed)
 > 5. Apply the STYLE.md bold bets and effects vocabulary — create CSS utilities or Tailwind extensions for the brand's signature effects. Validate against constraints (never/always rules are non-negotiable).

package/gsp/skills/gsp-project-build/methodology/gsp-project-builder.md

@@ -17,8 +17,8 @@ You are spawned with an `execution_mode` parameter. Follow the mode strictly:
 
 ### `foundations`
 Build token integration, global styles, and layout primitives ONLY. Stop after foundations.
-- Design tokens → CSS variables / Tailwind config. Run `node bin/theme-css.js <preset.yml> --stdout` to generate a ready-to-paste `:root` and `.dark` block in OKLCH format. If `bin/theme-css.js` is unavailable, convert hex to OKLCH manually. Write ALL variables in `:root` and `.dark` scopes (background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, sidebar-*, chart-1 through chart-5, --radius). Write only **global tokens**: brand colors, font families, spacing scale, base radius, base shadows. Do NOT write screen-specific tokens yet.
-- Global CSS (resets, base styles, dark mode)
+- **Verify** brand tokens are already installed in the CSS file (path declared in `components.json` → `.tailwind.css`). The orchestrator has already gated this — by the time you run, tokens MUST be present (installed via `/gsp-brand-apply` either directly or through the brand-guidelines prompt). If you find tokens missing, abort with a clear error pointing at `/gsp-brand-apply {brand-name}`. **Do NOT manually paste tokens or run `theme-css.js`.**
+- Base styles, dark mode setup, and any font imports that `apply` did not handle (`cssVars.theme.font-sans` may set the CSS variable but not generate the `next/font/google` import in `layout.tsx` — add it if missing, leave it alone if present)
 - Layout components (root layout, nav shell, footer shell)
 - Shared utilities (cn helper, theme provider)
 - **Do NOT build individual screens or page content**

package/gsp/skills/gsp-scaffold/shadcn-rules.md

@@ -94,11 +94,11 @@ Key fields from the JSON:
 }
 
 :root {
-  /* Insert OKLCH custom properties from bin/theme-css.js output here */
+  /* Brand tokens installed here by /gsp-brand-apply (runs `shadcn apply --only theme`) */
 }
 
 .dark {
-  /* Insert .dark overrides from bin/theme-css.js output here */
+  /* Dark-mode overrides installed here by /gsp-brand-apply */
 }
 
 @layer base {
@@ -136,7 +136,7 @@ Then set font vars with literal values in `@theme inline` (not `var()` self-refe
 }
 ```
 
-`bin/theme-css.js` emits `--font-sans` / `--font-mono` / `--font-display` from the preset's `typography` block — paste those values (not the var declarations) into `@theme inline`.
+`theme-css.js` emits `--font-sans` / `--font-mono` / `--font-display` from the preset's `typography` block. These values are wired into `@theme inline` when the theme is installed via `/gsp-brand-apply`.
 
 ### Tailwind v3
 
@@ -159,7 +159,7 @@ Then set font vars with literal values in `@theme inline` (not `var()` self-refe
 
 ## Token injection
 
-**Order matters** — run component installs first, then overwrite tokens. This prevents `shadcn add` from appending its own `cssVars` after your custom OKLCH values.
+**Order matters** — run component installs first, then apply the brand theme. This prevents `shadcn add` from appending its own `cssVars` after your custom OKLCH values.
 
 **Step 1 — Install all components first:**
 
@@ -167,13 +167,9 @@ Then set font vars with literal values in `@theme inline` (not `var()` self-refe
 npx shadcn@latest add button card dialog popover select tooltip ...
 ```
 
-**Step 2 — Generate and inject brand tokens:**
+**Step 2 — Apply the brand theme:**
 
-```bash
-node bin/theme-css.js .design/branding/{brand}/patterns/{brand}.yml --stdout
-```
-
-Paste the `:root { }` and `.dark { }` output into `globals.css`, replacing any `:root`/`.dark` blocks the shadcn CLI wrote. The `@theme inline` block stays untouched — it only contains `var()` aliases and radius/font values, not actual color values.
+Brand tokens are installed via `/gsp-brand-apply`, which runs `shadcn apply --only theme` against the `{brand}.theme.json` registry artifact produced by `gsp-brand-guidelines`. This replaces any `:root`/`.dark` blocks the shadcn CLI wrote with OKLCH brand values. The `@theme inline` block stays untouched — it only contains `var()` aliases and radius/font values, not actual color values.
 
 **Format:** OKLCH (`oklch(L C H)`). shadcn/ui v2+ accepts OKLCH natively. No `hsl()` wrapper needed.
 
@@ -402,7 +398,7 @@ Check `base` from `npx shadcn@latest info` before writing any component code. Th
 <DialogTrigger render={<Button />}>Open</DialogTrigger>
 ```
 
-For full API differences with code examples, read `${CLAUDE_SKILL_DIR}/../../gsp-scaffold/shadcn-theming.md` or run `npx shadcn@latest docs <component>`.
+For full API differences with code examples, read `${CLAUDE_SKILL_DIR}/shadcn-theming.md` or run `npx shadcn@latest docs <component>`.
 
 ---
 
@@ -413,7 +409,7 @@ For full API differences with code examples, read `${CLAUDE_SKILL_DIR}/../../gsp
 3. **Tailwind v4 source scoping** — if the repo has non-source files with CSS class names (`.design/`, `gsp/`), add `source("../")` to the `@import "tailwindcss"` line to limit scanning
 4. **Import alias consistency** — all generated code must use the alias from `shadcn info` (`@/` or `~/`), never relative paths to component files
 5. **Never hardcode colors** — use `bg-primary`, `text-muted-foreground`, `border-border`, etc. — never `bg-blue-500`
-6. **Install components before writing tokens** — run `shadcn add` first; then overwrite `:root`/`.dark` with `bin/theme-css.js` output. Reversing this order risks shadcn appending its own vars after yours
+6. **Install components before applying the brand theme** — run `shadcn add` first; then install the brand theme via `/gsp-brand-apply`. Reversing this order risks shadcn appending its own vars after yours
 
 ---
 

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

@@ -127,7 +127,7 @@ Copy the preset `.yml` to the output path as the brand's style source:
 
 If a `.yml` already exists at the output path, use `AskUserQuestion`: "A style preset already exists — overwrite?" with options **Overwrite** and **Cancel**. If cancelled, skip and proceed.
 
-The `.yml` IS the token source of truth — no separate `tokens.json` needed. Token names in `.yml` map 1:1 to shadcn/ui CSS variable names. Run `node bin/theme-css.js {preset-name}.yml` to generate a ready-to-paste `:root`/`.dark` CSS block.
+The `.yml` IS the token source of truth — no separate `tokens.json` needed. Token names in `.yml` map 1:1 to shadcn/ui CSS variable names. Run `node gsp/skills/gsp-brand-guidelines/bin/theme-css.js {preset-name}.yml` to generate a ready-to-paste `:root`/`.dark` CSS block.
 
 ## Step 7: Write STYLE.md
 

package/gsp/skills/gsp-style/style-preset-schema.md

@@ -2,7 +2,7 @@
 
 Template for brand-derived style preset files (`{brand-name}.yml`). All token values must trace to foundation chunks. See any preset in `styles/` for a complete example.
 
-Token names map 1:1 to shadcn/ui CSS variables — no translation layer. `bin/theme-css.js` reads this file and outputs a ready-to-paste `:root`/`.dark` block.
+Token names map 1:1 to shadcn/ui CSS variables — no translation layer. `theme-css.js` (in `gsp-brand-guidelines/bin/`) reads this file and outputs a ready-to-paste `:root`/`.dark` block.
 
 **Value formats:**
 - Solid colors: `"#RRGGBB"` hex — theme-css.js converts to OKLCH

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

@@ -39,7 +39,9 @@ Record which runtime(s) and install type (local/global) were found.
 
 If no VERSION file exists anywhere, tell the user GSP doesn't appear to be installed and suggest:
 ```
-npx get-shit-pretty
+pnpm dlx get-shit-pretty
+# or with bun
+bunx get-shit-pretty
 ```
 Then stop.
 
@@ -103,14 +105,15 @@ Build the installer command based on what was detected in Step 1:
 **Scope flag:** `--local` if local install was detected, `--global` if global.
 
 ```bash
-npx get-shit-pretty@latest {runtime-flag} {scope-flag}
+pnpm dlx get-shit-pretty@latest {runtime-flag} {scope-flag}
+# or: bunx get-shit-pretty@latest {runtime-flag} {scope-flag}
 ```
 
 Examples:
-- Local Claude: `npx get-shit-pretty@latest --claude --local`
-- Global Claude: `npx get-shit-pretty@latest --claude --global`
-- Global OpenCode: `npx get-shit-pretty@latest --opencode --global`
-- Multiple runtimes: `npx get-shit-pretty@latest --all --global`
+- Local Claude: `pnpm dlx get-shit-pretty@latest --claude --local`
+- Global Claude: `pnpm dlx get-shit-pretty@latest --claude --global`
+- Global OpenCode: `pnpm dlx get-shit-pretty@latest --opencode --global`
+- Multiple runtimes: `pnpm dlx get-shit-pretty@latest --all --global`
 
 Show the output to the user.
 

package/gsp/templates/branding/config.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.2",
+  "version": "0.9.1",
   "project_type": "brand",
   "brand": {
     "name": "",

package/gsp/templates/phases/patterns.md

@@ -26,7 +26,7 @@
 
 | File | Content |
 |------|---------|
-| `{brand-name}.yml` | **Single source of truth.** The brand's aesthetic in GSP preset format: tokens + intensity + patterns + constraints + effects + dark_mode. Inherits from `style_base` preset, overrides brand-specific values. Token names map 1:1 to shadcn/ui CSS vars. Run `node bin/theme-css.js {brand-name}.yml` to generate the `:root`/`.dark` CSS block. |
+| `{brand-name}.yml` | **Single source of truth.** The brand's aesthetic in GSP preset format: tokens + intensity + patterns + constraints + effects + dark_mode. Inherits from `style_base` preset, overrides brand-specific values. Token names map 1:1 to shadcn/ui CSS vars. Generation runs through the brand pipeline — see `/gsp-brand-guidelines` and `/gsp-brand-apply`. |
 | `STYLE.md` | **Agent contract.** The single document designer and builder agents consume. Rendered from the `.yml` + brand philosophy (from strategy) + bold bets (from identity's most distinctive choices) + implementation patterns (from preset `.md` companion). Follows `templates/phases/style.md` format. |
 | `guidelines.html` | **User-visible brand guide.** Self-contained HTML with embedded CSS. Shows the brand using its own tokens: color swatches, type scale in actual fonts, component previews, spacing/elevation vis, constraints. Open in browser. |
 
@@ -34,7 +34,7 @@
 
 Component output is library-aware:
 
-1. **`token-mapping.md`** (always) — brand tokens → component library theming API. Complete, copy-paste-ready config. Generate the CSS block with `node bin/theme-css.js {brand-name}.yml` — outputs OKLCH `:root`/`.dark` with all shadcn vars.
+1. **`token-mapping.md`** (always) — brand tokens → component library theming API. Complete, copy-paste-ready config. The CSS block is generated by the `theme-css.js` script the brand pipeline invokes — outputs OKLCH `:root`/`.dark` with all shadcn vars.
 2. **Override specs** (selective) — one file per library component needing treatment beyond tokens. Singular kebab-case naming.
 3. **Custom component specs** (selective) — one file per brand-distinctive component with no library equivalent. Includes: states, anatomy, usage rules, accessibility spec, code hints.
 

package/gsp/templates/projects/config.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.2",
+  "version": "0.9.1",
   "project_type": "design",
   "project": {
     "name": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "get-shit-pretty",
-  "version": "0.8.2",
+  "version": "0.9.1",
   "description": "Design engineering system for AI coding agents. Brand identity + design projects, from strategy to code.",
   "bin": {
     "get-shit-pretty": "bin/install.js"