get-shit-pretty 0.7.4 → 0.8.3

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/bin/theme-css.js

@@ -0,0 +1,331 @@
+#!/usr/bin/env node
+/**
+ * theme-css.js — GSP deterministic token-to-CSS generator
+ *
+ * Reads a GSP style preset `.yml` file and outputs a shadcn/ui-compatible
+ * CSS variables block for `:root` and `.dark`.
+ *
+ * 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
+ *
+ * Token → CSS var mapping is 1:1. No derivation, no LLM guesswork.
+ * Hex values are converted to OKLCH. Alpha values (oklch with /) pass through.
+ * Sidebar vars are output verbatim. Extras (success/warning/info) become custom props.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+// ---------------------------------------------------------------------------
+// YAML parser (zero-dependency, handles the subset GSP uses)
+// ---------------------------------------------------------------------------
+
+function parseYaml(text) {
+  const lines = text.split('\n');
+  const root = {};
+  const stack = [{ indent: -1, obj: root }];
+
+  for (let i = 0; i < lines.length; i++) {
+    const raw = lines[i];
+    const trimmed = raw.trimEnd();
+    if (!trimmed || trimmed.trimStart().startsWith('#')) continue;
+
+    const indent = raw.length - raw.trimStart().length;
+    const content = trimmed.trimStart();
+
+    // Handle inline arrays: key: [a, b, c]
+    const colonIdx = content.indexOf(':');
+    if (colonIdx === -1) continue;
+
+    const key = content.slice(0, colonIdx).trim();
+    const rest = content.slice(colonIdx + 1).trim();
+
+    // Pop stack to correct parent
+    while (stack.length > 1 && stack[stack.length - 1].indent >= indent) {
+      stack.pop();
+    }
+    const parent = stack[stack.length - 1].obj;
+
+    if (rest === '' || rest.startsWith('#')) {
+      // Nested object
+      parent[key] = {};
+      stack.push({ indent, obj: parent[key] });
+    } else if (rest.startsWith('[')) {
+      // Inline array — parse as string, not needed for color extraction
+      parent[key] = rest;
+    } else {
+      // Scalar — strip inline comments and quotes
+      let val = rest.split(' #')[0].trim();
+      if ((val.startsWith('"') && val.endsWith('"')) ||
+          (val.startsWith("'") && val.endsWith("'"))) {
+        val = val.slice(1, -1);
+      }
+      // Numbers
+      if (/^-?\d+(\.\d+)?$/.test(val)) {
+        parent[key] = parseFloat(val);
+      } else if (val === 'true') {
+        parent[key] = true;
+      } else if (val === 'false') {
+        parent[key] = false;
+      } else {
+        parent[key] = val;
+      }
+    }
+  }
+
+  return root;
+}
+
+// ---------------------------------------------------------------------------
+// Color conversion: hex → OKLCH
+// ---------------------------------------------------------------------------
+
+function hexToRgb(hex) {
+  const h = hex.replace('#', '');
+  const len = h.length;
+  if (len === 3) {
+    return [
+      parseInt(h[0] + h[0], 16),
+      parseInt(h[1] + h[1], 16),
+      parseInt(h[2] + h[2], 16),
+    ];
+  }
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16),
+  ];
+}
+
+// sRGB → linear
+function toLinear(c) {
+  c = c / 255;
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+// Linear RGB → XYZ (D65)
+function linearToXyz(r, g, b) {
+  return [
+    r * 0.4124564 + g * 0.3575761 + b * 0.1804375,
+    r * 0.2126729 + g * 0.7151522 + b * 0.0721750,
+    r * 0.0193339 + g * 0.1191920 + b * 0.9503041,
+  ];
+}
+
+// XYZ → OKLab
+function xyzToOklab(x, y, z) {
+  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
+  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
+  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
+  return [
+    0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_,
+    1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_,
+    0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_,
+  ];
+}
+
+// OKLab → OKLCH
+function oklabToOklch(L, a, b) {
+  const C = Math.sqrt(a * a + b * b);
+  let H = Math.atan2(b, a) * (180 / Math.PI);
+  if (H < 0) H += 360;
+  return [L, C, H];
+}
+
+function hexToOklch(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  const lr = toLinear(r);
+  const lg = toLinear(g);
+  const lb = toLinear(b);
+  const [x, y, z] = linearToXyz(lr, lg, lb);
+  const [L, a, bk] = xyzToOklab(x, y, z);
+  const [Lch, C, H] = oklabToOklch(L, a, bk);
+  // Format: oklch(L% C H)
+  const Lpct = (Lch * 100).toFixed(2);
+  const Cfmt = C.toFixed(4);
+  const Hfmt = H.toFixed(2);
+  return `oklch(${Lpct}% ${Cfmt} ${Hfmt})`;
+}
+
+// ---------------------------------------------------------------------------
+// Value formatter: hex → oklch, alpha values pass through
+// ---------------------------------------------------------------------------
+
+function formatValue(val) {
+  if (typeof val !== 'string') return String(val);
+  const v = val.trim();
+
+  // Already oklch (alpha or not) — pass through
+  if (v.startsWith('oklch(')) return v;
+
+  // Hex color
+  if (/^#[0-9a-fA-F]{3,6}$/.test(v)) {
+    return hexToOklch(v);
+  }
+
+  // Everything else (rgba, named colors, etc.) — pass through
+  return v;
+}
+
+// ---------------------------------------------------------------------------
+// CSS var name mapping (1:1 to shadcn/ui)
+// ---------------------------------------------------------------------------
+
+// Core color tokens → CSS var names
+const CORE_VARS = [
+  'background', 'foreground',
+  'card', 'card-foreground',
+  'popover', 'popover-foreground',
+  'primary', 'primary-foreground',
+  'secondary', 'secondary-foreground',
+  'accent', 'accent-foreground',
+  'muted', 'muted-foreground',
+  'destructive',
+  'border', 'input', 'ring',
+];
+
+// NOTE: 'sidebar' (not 'sidebar-background') matches shadcn's CSS var --sidebar
+const SIDEBAR_VARS = [
+  'sidebar', 'sidebar-foreground',
+  'sidebar-primary', 'sidebar-primary-foreground',
+  'sidebar-accent', 'sidebar-accent-foreground',
+  'sidebar-border', 'sidebar-ring',
+];
+
+const EXTRA_VARS = ['success', 'warning', 'info'];
+
+// Shape tokens → CSS vars
+const SHAPE_VARS = {
+  'border-radius-lg': '--radius',
+};
+
+// ---------------------------------------------------------------------------
+// CSS block generator
+// ---------------------------------------------------------------------------
+
+function generateBlock(colorObj, shapeObj, typographyObj, selector) {
+  if (!colorObj) return '';
+  const lines = [];
+
+  // Core vars
+  for (const key of CORE_VARS) {
+    if (colorObj[key] !== undefined) {
+      lines.push(`  --${key}: ${formatValue(colorObj[key])};`);
+    }
+  }
+
+  // Sidebar vars
+  for (const key of SIDEBAR_VARS) {
+    if (colorObj[key] !== undefined) {
+      lines.push(`  --${key}: ${formatValue(colorObj[key])};`);
+    }
+  }
+
+  // Chart vars — emit in both :root and .dark (dark falls back to light values if not set)
+  {
+    // For :root use light palette; for .dark use dark overrides falling back to light
+    const chartColors = [
+      colorObj['chart-1'] || colorObj.primary,
+      colorObj['chart-2'] || colorObj.secondary,
+      colorObj['chart-3'] || colorObj.accent,
+      colorObj['chart-4'] || colorObj.info || colorObj.primary,
+      colorObj['chart-5'] || colorObj.success || colorObj.secondary || colorObj.primary,
+    ];
+    chartColors.forEach((c, i) => {
+      if (c) lines.push(`  --chart-${i + 1}: ${formatValue(c)};`);
+    });
+  }
+
+  // Shape → radius (only in :root)
+  if (selector === ':root' && shapeObj) {
+    const lg = shapeObj['border-radius-lg'];
+    if (lg !== undefined) {
+      lines.push(`  --radius: ${lg};`);
+    }
+  }
+
+  // Typography → font CSS vars (only in :root)
+  if (selector === ':root' && typographyObj) {
+    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, cssVar] of fontMappings) {
+      if (typographyObj[ymlKey] !== undefined) {
+        lines.push(`  ${cssVar}: ${typographyObj[ymlKey]};`);
+      }
+    }
+  }
+
+  // Extras as custom properties
+  for (const key of EXTRA_VARS) {
+    if (colorObj[key] !== undefined) {
+      lines.push(`  --${key}: ${formatValue(colorObj[key])};`);
+    }
+  }
+
+  if (!lines.length) return '';
+  return `${selector} {\n${lines.join('\n')}\n}`;
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+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`);
+    process.exit(0);
+  }
+
+  const inputPath = path.resolve(args[0]);
+  if (!fs.existsSync(inputPath)) {
+    console.error(`Error: File not found: ${inputPath}`);
+    process.exit(1);
+  }
+
+  const outputIdx = args.indexOf('--output');
+  const outputPath = outputIdx !== -1 ? path.resolve(args[outputIdx + 1]) : null;
+  const toStdout = args.includes('--stdout') || !outputPath;
+
+  const raw = fs.readFileSync(inputPath, 'utf8');
+  const preset = parseYaml(raw);
+
+  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) || null;
+
+  const rootBlock = generateBlock(colorLight, shape, typography, ':root');
+  const darkBlock = generateBlock(colorDark, null, null, '.dark');
+
+  const presetName = preset.name || path.basename(inputPath, '.yml');
+  const presetDesc = preset.description || '';
+
+  const header = [
+    `/* GSP theme: ${presetName} */`,
+    presetDesc ? `/* ${presetDesc} */` : null,
+    `/* Generated by bin/theme-css.js from ${path.basename(inputPath)} */`,
+    `/* Edit the .yml file, not this output */`,
+    '',
+  ].filter(Boolean).join('\n');
+
+  const output = [header, rootBlock, darkBlock ? '' : null, darkBlock].filter(s => s !== null).join('\n');
+
+  if (toStdout) {
+    process.stdout.write(output + '\n');
+  } else {
+    fs.writeFileSync(outputPath, output + '\n', 'utf8');
+    console.log(`Written to ${outputPath}`);
+  }
+}
+
+main();

package/gsp/agents/gsp-brand-coherence.md

@@ -0,0 +1,7 @@
+---
+name: gsp-brand-coherence
+description: Brand coherence auditor — scores intensity dials against archetype and surfaces tensions between declared values and expressed output
+tools:
+  - Read
+---
+Coherence auditor for gsp-brand-guidelines. Spawned by the skill after Pass 1 to evaluate the generated artifacts before user review.

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-brief/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: gsp-brand-brief
-description: Define your brand — who, why, and what it should feel like
+description: Define your brand — who, why, and what it should feel like — use when: create a brand, define our brand identity, who are we, what's our brand
 user-invocable: true
 allowed-tools:
   - Read
@@ -86,23 +86,35 @@ Before presenting personality options, **internally synthesize** promise (what s
     - Note: this is a high-level direction only. Brand strategy phase will deepen this into archetype + voice — don't over-refine here.
 8. What should the brand NEVER feel like? (use `AskUserQuestion` with 2-3 anti-directions inferred from their personality pick, plus open-ended option)
 9. Brands admired or styles to avoid? (open-ended `AskUserQuestion`)
+10. Visual direction — raw aesthetic feeling. Use `AskUserQuestion` (open-ended):
+    > "What should it look and feel like visually? You can share image or website links, describe a mood ('editorial and dark', 'warm brutalist', 'cinematographic with beautiful stills'), drop adjective clusters ('rounded, clean, airy'), or even describe a scene or texture. The weirder and more specific the better — this is what prevents a bland brand."
+    - Synthesize the answer into a `visual_direction` block in the brief: mood words, reference aesthetics, texture/atmosphere descriptors, any specific anti-patterns (e.g., "never stock-photo corporate"). This block directly informs color, typography, and imagery choices downstream.
 
 ## Step 4: Constraints & confirmation
 
-10. Any non-negotiables or constraints? (timeline, budget, must-haves) — open-ended `AskUserQuestion`
-11. State your understanding back: "Here's what I'm hearing: [summary]." Use `AskUserQuestion`:
+11. Any non-negotiables or constraints? (timeline, budget, must-haves) — open-ended `AskUserQuestion`
+12. State your understanding back — but lead with *feeling*, not facts. Format:
+
+    > "Here's what I'm hearing: [2-sentence factual summary].
+    > The feeling this brand should leave: **[emotional compass — one evocative sentence capturing the brand's energy, not its category]**."
+
+    The emotional compass is the hardest line to write and the most important. It should make the user feel something when they read it. Not "a fintech tool that simplifies investing" but "the brand that makes financial confidence feel earned, not given." Synthesize it from the personality direction, the persona aspiration, the brand POV, and the visual direction. It should be specific enough to be wrong — vague sentences aren't compasses.
+
+    Use `AskUserQuestion`:
     - **Looks good** — "That's accurate, let's go"
-    - **Adjust something** — "I want to change or add something"
+    - **Adjust the feeling** — "The compass is off — let me reframe it"
+    - **Adjust something else** — "Facts are right but I want to change something"
 
 If "Adjust" — ask what to change, update your understanding, re-confirm. Don't re-ask everything.
 
-## Step 5: Write artifacts
+## Step 5: Write artifacts and register brand
 
 Read templates at write time from `${CLAUDE_SKILL_DIR}/../../templates/branding/` and write:
 
 1. `.design/branding/{name}/BRIEF.md` from `brief.md` template
    - Populate all sections from conversation answers
    - Synthesize brand promise, POV, and personality (these are inferred, not asked directly)
+   - Write the confirmed emotional compass as `brand_heartbeat` in the Emotional Compass section
    - Set `brand_mode` to `new`
    - Set evolve-only sections (Existing Brand State, Evolution Scope) to "N/A — new brand"
 
@@ -117,6 +129,14 @@ Read templates at write time from `${CLAUDE_SKILL_DIR}/../../templates/branding/
 
 4. `.design/branding/{name}/ROADMAP.md` from `roadmap.md` template
 
+5. Write/update `.design/CLAUDE.md` — register the brand as started. If the file doesn't exist, read `${CLAUDE_SKILL_DIR}/../../templates/design-claude.md` first. Append under `## Brands`:
+
+```markdown
+### {brand-name} · in progress · {DATE}
+"{brand_heartbeat}"
+next: gsp-brand-research · .design/branding/{brand-name}/
+```
+
 ## Step 6: Route
 
 Use `AskUserQuestion` — always offer Continue / Stop here / What happens next:
@@ -126,4 +146,29 @@ Use `AskUserQuestion` — always offer Continue / Stop here / What happens next:
 - **What happens next?** — "Explain the research phase" → explain what brand-research does (market landscape, competitive audit, trend analysis, mood board direction) and how it uses the brief
 
 If `e2e: true`, mention that after the full branding diamond completes, it will auto-transition to project setup.
+
+## Step 7: e2e transition (only when `e2e: true` and branding diamond is complete)
+
+After all four brand phases complete (brand-research → brand-strategy → brand-identity → brand-guidelines), scaffold the project directory before invoking `/gsp-project-brief`:
+
+1. Derive `{project-slug}` from the brand name: lowercase, spaces and underscores replaced with hyphens.
+
+2. Create the project directory:
+```bash
+mkdir -p .design/projects/{project-slug}/
+```
+
+3. Read templates at write time from `${CLAUDE_SKILL_DIR}/../../templates/projects/` and write:
+   - `.design/projects/{project-slug}/config.json` from `config.json` template — set `project.name` (title-cased from project-slug) and `project.created` (ISO date)
+   - `.design/projects/{project-slug}/STATE.md` from `state.md` template — fill in project name and brand name
+
+4. Write `.design/projects/{project-slug}/brand.ref` containing the brand directory name (e.g. `{brand-name}`), so the project knows which brand it belongs to.
+
+5. Display:
+```
+  brand complete — {brand-name}
+  now let's scope your project.
+```
+
+6. Invoke `/gsp-project-brief` via Skill tool, passing `{project-slug}` so Step 0 resolves the existing directory rather than prompting for one.
 </process>