get-shit-pretty 0.6.2 → 0.6.3

package/gsp/references/design-trends.md

@@ -1,6 +1,6 @@
 # Design Trends Reference — Index
 
-Production-ready style presets and deep engineering references for current design trends. Consolidated in the `/gsp:style` skill.
+Production-ready style presets and deep engineering references for current design trends. Consolidated in the `/gsp-style` skill.
 
 Last updated: 2026-03-14
 
@@ -8,13 +8,13 @@ Last updated: 2026-03-14
 
 ## Style Presets (34)
 
-Style presets with structured tokens live in the `/gsp:style` skill at `skills/gsp-style/styles/`. Each preset is a YAML file with color, typography, shape, elevation, spacing, and motion tokens ready for W3C Design Token expansion.
+Style presets with structured tokens live in the `/gsp-style` skill at `skills/gsp-style/styles/`. Each preset is a YAML file with color, typography, shape, elevation, spacing, and motion tokens ready for W3C Design Token expansion.
 
-Run `/gsp:style --list` to see all available styles, or read `skills/gsp-style/styles/INDEX.yml` for the full catalog with tags and vibes.
+Run `/gsp-style --list` to see all available styles, or read `skills/gsp-style/styles/INDEX.yml` for the full catalog with tags and vibes.
 
 ## Deep Engineering References (9)
 
-Detailed CSS implementation guides, framework notes, and accessibility analysis live in the `/gsp:style` skill at `skills/gsp-style/trends/`:
+Detailed CSS implementation guides, framework notes, and accessibility analysis live in the `/gsp-style` skill at `skills/gsp-style/trends/`:
 
 | # | Trend | Description | Compat |
 |---|-------|-------------|--------|

package/gsp/references/phase-transitions.md

@@ -70,7 +70,7 @@ Use `AskUserQuestion` with options adapted to context:
 **When in a pipeline flow** (previous phase was completed in this or a recent session):
 1. **Continue to {next}** — "{description of next phase}"
 2. **View progress** — "see the full dashboard"
-3. **Done for now** — "pick up later with /gsp:start"
+3. **Done for now** — "pick up later with /gsp-start"
 
 **When standalone** (user invoked the skill directly, no clear pipeline context):
 1. **View output** — "review what was generated"
@@ -84,22 +84,22 @@ Use judgment — if the user explicitly asked for one skill, don't push them int
 
 | Phase | Completion Message | Next Phase |
 |-------|-------------------|------------|
-| audit | brand assessed | discover — `/gsp:brand-research` |
-| discover | market landscape mapped | strategy — `/gsp:brand-strategy` |
-| strategy | brand platform defined | identity — `/gsp:brand-identity` |
-| identity | visual system designed | patterns — `/gsp:brand-patterns` |
-| patterns | design system built | project setup — `/gsp:start` (scans codebase, gathers brief, creates project) |
+| audit | brand assessed | discover — `/gsp-brand-research` |
+| discover | market landscape mapped | strategy — `/gsp-brand-strategy` |
+| strategy | brand platform defined | identity — `/gsp-brand-identity` |
+| identity | visual system designed | patterns — `/gsp-brand-guidelines` |
+| patterns | design system built | project setup — `/gsp-start` (scans codebase, gathers brief, creates project) |
 
 ### Project Phases
 
 | Phase | Completion Message | Next Phase |
 |-------|-------------------|------------|
-| brief | project scoped | research — `/gsp:project-research` |
-| research | patterns and approaches researched | design — `/gsp:project-design` |
-| design | screens designed | critique — `/gsp:project-critique` |
-| critique | designs critiqued | build — `/gsp:project-build` |
-| build | code implemented | review — `/gsp:project-review` |
-| review | implementation validated | launch — `/gsp:launch` (or done) |
+| brief | project scoped | research — `/gsp-project-research` |
+| research | patterns and approaches researched | design — `/gsp-project-design` |
+| design | screens designed | critique — `/gsp-project-critique` |
+| critique | designs critiqued | build — `/gsp-project-build` |
+| build | code implemented | review — `/gsp-project-review` |
+| review | implementation validated | launch — `/gsp-launch` (or done) |
 | launch | campaign assets created | done |
 
 ### Special cases

package/gsp/references/questioning.md

@@ -1,7 +1,7 @@
 # Brief-Gathering Techniques
 
 ## Purpose
-Guide brief-gathering conversations — used by `/gsp:start` for both brand briefs and project briefs.
+Guide brief-gathering conversations — used by `/gsp-start` for both brand briefs and project briefs.
 
 ---
 

package/gsp/references/token-mapping.md

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

package/gsp/skills/gsp-3d/SKILL.md

@@ -0,0 +1,112 @@
+---
+name: gsp-3d
+description: Define 3D & WebGL direction — render style, materials, lighting, camera, interactive scenes
+user-invocable: true
+model: sonnet
+allowed-tools:
+  - Read
+  - Write
+  - AskUserQuestion
+  - Glob
+  - Grep
+  - WebSearch
+---
+<context>
+You are a GSP 3D director. You define the brand's 3D and WebGL visual language — render aesthetic, material philosophy, lighting direction, camera behavior, and interactive scene design.
+
+This is a standalone composable skill. It works two ways:
+1. **Standalone** — user runs `/gsp-3d` directly for 3D direction
+2. **As a building block** — invoked during identity or project phases when the brand needs 3D/WebGL content direction
+
+3D is no longer a niche — product configurators, immersive heroes, interactive showcases, and spatial UI are becoming standard. A consistent 3D language ensures renders and scenes feel like the same brand.
+</context>
+
+<objective>
+Define 3D and WebGL visual direction for a brand or project.
+
+**Input:** Brand context or user description, OR `--enrich` mode
+**Output:** `3d-direction.md` chunk with render style, materials, lighting, camera, and interaction specs
+**Agent:** None — inline skill with structured questioning
+</objective>
+
+<execution_context>
+@${CLAUDE_SKILL_DIR}/../../references/chunk-format.md
+</execution_context>
+
+<rules>
+- Always use `AskUserQuestion` for user interaction — never prompt via plain text
+- One decision per question — never batch multiple questions in a single message
+- 3D direction must align with brand's 2D aesthetic — if flat design, renders should be clean/minimal; if neubrutalism, renders can be bold/graphic
+- Specify concrete tools/libraries where applicable (Three.js, React Three Fiber, Spline, Blender)
+- Performance constraints matter — specify polygon budget, texture resolution, loading strategy
+</rules>
+
+<process>
+## Step 0: Determine mode
+
+| Input | Mode |
+|-------|------|
+| `/gsp-3d --enrich` | Enrich existing 3D direction |
+| `/gsp-3d` | Interactive — define 3D language |
+
+## Step 1: Enrich mode (`--enrich`)
+
+Read existing brand context (`.yml` tokens, STYLE.md patterns/constraints). Derive 3D direction that's coherent with the 2D visual language.
+
+## Step 2: Interactive mode
+
+One `AskUserQuestion` at a time:
+
+1. 3D use case — use `AskUserQuestion`:
+   - **Product showcase** — "product renders, configurators, 360 views"
+   - **Immersive hero** — "3D scene as page background or hero"
+   - **Interactive experience** — "explorable scenes, spatial navigation"
+   - **Data visualization** — "3D charts, network graphs, spatial data"
+   - **UI elements** — "3D icons, buttons, decorative elements"
+   - **Multiple** — "we need several types"
+2. Render aesthetic — use `AskUserQuestion`:
+   - **Photorealistic** — "physically accurate, studio-quality"
+   - **Stylized** — "non-photorealistic, illustrated, graphic"
+   - **Minimal** — "clean geometry, soft shadows, white studio"
+   - **Abstract** — "generative, particle systems, noise-driven"
+   - **Clay/soft** — "rounded, matte, toy-like (matches claymorphism)"
+
+## Step 3: Define 3D direction
+
+### Render Style
+- **Aesthetic:** photorealistic / stylized / minimal / abstract
+- **Geometry:** smooth/faceted, organic/geometric, detail level
+- **Color:** brand palette integration, tint strategy for materials
+
+### Materials
+- **Primary material:** matte, glossy, metallic, glass, emissive
+- **Surface quality:** smooth, textured, rough, reflective
+- **Brand material:** the signature material (e.g., "frosted glass for glassmorphism brands", "clay for claymorphism")
+
+### Lighting
+- **Setup:** studio (3-point), environmental, dramatic, flat
+- **Key light:** direction, color temperature, intensity
+- **Ambient:** environment map, HDRI direction, ambient occlusion level
+- **Shadows:** soft/hard, contact shadows, shadow color
+
+### Camera
+- **Perspective:** focal length range (35mm-85mm), depth of field
+- **Movement:** orbit, dolly, static, scroll-driven
+- **Framing:** centered, rule-of-thirds, dynamic
+
+### Interaction (WebGL)
+- **Library:** Three.js, React Three Fiber, Spline, PlayCanvas
+- **Controls:** orbit, scroll-driven animation, mouse parallax, click interaction
+- **Performance budget:** target FPS, polygon count, texture resolution
+- **Loading:** progressive loading, LOD strategy, placeholder
+- **Fallback:** what to show when WebGL isn't available (static image, CSS-only)
+
+### Integration with 2D
+- **How 3D meets flat UI:** floating above page, embedded in sections, full-page takeover
+- **Z-depth relationship:** 3D behind UI, 3D as UI element, mixed
+- **Transition:** how the user moves between 3D and 2D contexts
+
+## Step 4: Write output + completion
+
+Write `3d-direction.md` chunk. Target: 80-120 lines.
+</process>

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

@@ -1,5 +1,5 @@
 ---
-name: accessibility
+name: gsp-accessibility
 description: Quick contrast checks and token WCAG audits — inline, no agent
 user-invocable: true
 model: sonnet
@@ -13,12 +13,12 @@ allowed-tools:
 ---
 <context>
 Standalone composable accessibility skill. Works two ways:
-1. **Standalone** — user runs `/gsp:accessibility` directly for quick contrast checks or token audits
+1. **Standalone** — user runs `/gsp-accessibility` directly for quick contrast checks or token audits
 2. **As a building block** — critique and review phases detect prior accessibility output and reuse it
 
 Follows the composable pattern: deterministic modes, predictable output paths, filesystem as integration layer.
 
-For full design audits, code audits, or statement generation, use `/gsp:accessibility-audit`.
+For full design audits, code audits, or statement generation, use `/gsp-accessibility-audit`.
 </context>
 
 <objective>
@@ -59,10 +59,10 @@ If no arguments provided, use `AskUserQuestion`:
 
 **"What would you like to do?"**
 - **Quick contrast check** — "check specific color pairs for WCAG contrast compliance"
-- **Token audit** — "audit tokens.json for WCAG compliance"
-- **Full design/code audit** — "run `/gsp:accessibility-audit` for full WCAG audits, code audits, or statement generation"
+- **Token audit** — "audit brand `.yml` tokens for WCAG compliance"
+- **Full design/code audit** — "run `/gsp-accessibility-audit` for full WCAG audits, code audits, or statement generation"
 
-If user picks "Full design/code audit", tell them to run `/gsp:accessibility-audit` and stop.
+If user picks "Full design/code audit", tell them to run `/gsp-accessibility-audit` and stop.
 
 ### Quick check mode (`--check`)
 
@@ -84,7 +84,7 @@ Convert hex to relative luminance (sRGB linearization), then:
 ### Display results
 
 ```
-  /gsp:accessibility — contrast check
+  /gsp-accessibility — contrast check
   ═══════════════════════════════════════
 
   Foreground: {FG_HEX}   Background: {BG_HEX}
@@ -126,7 +126,7 @@ Determine final conformance level:
 Read from the brand/project:
 - `{BRAND_PATH}/identity/palettes.json`
 - `{BRAND_PATH}/identity/color-system.md`
-- `{BRAND_PATH}/patterns/tokens.json`
+- `{BRAND_PATH}/patterns/*.yml` (brand style preset)
 - `{BRAND_PATH}/identity/typography.md`
 
 If files don't exist, report which are missing and stop.
@@ -134,7 +134,7 @@ If files don't exist, report which are missing and stop.
 ### Token checks
 
 **4.1 Contrast Pairs:**
-- Extract every semantic foreground/background pair from tokens.json
+- Extract every semantic foreground/background pair from the brand `.yml` preset
 - Calculate WCAG 2.x contrast ratio for each pair
 - Flag failures: normal text < 4.5:1, large text < 3:1, non-text < 3:1
 
@@ -202,8 +202,8 @@ Conformance target: {level}
 ### Completion
 
 Display result and use `AskUserQuestion`:
-- **Run full design audit** — "run `/gsp:accessibility-audit` for full WCAG design audit"
-- **Run code audit** — "run `/gsp:accessibility-audit --code` to check the codebase"
+- **Run full design audit** — "run `/gsp-accessibility-audit` for full WCAG design audit"
+- **Run code audit** — "run `/gsp-accessibility-audit --code` to check the codebase"
 - **Done** — "that's all for now"
 
 ## Step 5: Update STATE.md

package/gsp/skills/gsp-accessibility-audit/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: accessibility-audit
+name: gsp-accessibility-audit
 description: Full WCAG accessibility audit — design screens, codebase, or generate compliance statement
 user-invocable: true
 model: opus
@@ -16,10 +16,10 @@ allowed-tools:
 ---
 <context>
 Full accessibility audit skill that spawns the `gsp-accessibility-auditor` agent for deep WCAG analysis. Works two ways:
-1. **Standalone** — user runs `/gsp:accessibility-audit` directly for design, code, or statement generation
+1. **Standalone** — user runs `/gsp-accessibility-audit` directly for design, code, or statement generation
 2. **As a building block** — critique and review phases detect prior accessibility output and reuse it
 
-For quick contrast checks or token audits, use `/gsp:accessibility` instead.
+For quick contrast checks or token audits, use `/gsp-accessibility` instead.
 
 Follows the composable pattern: deterministic modes, predictable output paths, filesystem as integration layer.
 </context>
@@ -33,7 +33,6 @@ Run full accessibility audits — design screen reviews, codebase ARIA/keyboard/
 </objective>
 
 <execution_context>
-@${CLAUDE_SKILL_DIR}/../../prompts/08-accessibility-auditor.md
 @${CLAUDE_SKILL_DIR}/../../references/wcag-checklist.md
 </execution_context>
 
@@ -96,7 +95,7 @@ Spawn `gsp-accessibility-auditor` with:
 Display result:
 
 ```
-  /gsp:accessibility-audit — design audit complete
+  /gsp-accessibility-audit — design audit complete
   ═══════════════════════════════════════
 
   {PROJECT_PATH}/critique/
@@ -107,7 +106,7 @@ Display result:
 ```
 
 Use `AskUserQuestion`:
-- **Run token audit** — "run `/gsp:accessibility --tokens` to check design token contrast pairs"
+- **Run token audit** — "run `/gsp-accessibility --tokens` to check design token contrast pairs"
 - **Continue to build** — "implement designs in the codebase"
 - **View audit** — "read the accessibility report"
 - **Done** — "that's all for now"
@@ -134,7 +133,7 @@ Spawn `gsp-accessibility-auditor` with:
 Display result:
 
 ```
-  /gsp:accessibility-audit --code — code audit complete
+  /gsp-accessibility-audit --code — code audit complete
   ═══════════════════════════════════════
 
   {PROJECT_PATH}/review/

package/gsp/skills/gsp-add-reference/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: add-reference
+name: gsp-add-reference
 description: Add reference material to a project
 user-invocable: true
 model: sonnet

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

@@ -1,5 +1,5 @@
 ---
-name: art
+name: gsp-art
 description: "Craft ASCII art interactively — you direct, the artist creates"
 user-invocable: true
 model: sonnet

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

@@ -1,5 +1,5 @@
 ---
-name: brand-audit
+name: gsp-brand-audit
 description: Audit an existing brand before evolving it
 user-invocable: true
 model: opus
@@ -44,11 +44,11 @@ Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `
 Read `{BRAND_PATH}/BRIEF.md` for aspirational direction.
 Read `{BRAND_PATH}/config.json` to confirm `brand_mode` is `evolve`.
 
-If missing, tell user to run `/gsp:start` first.
+If missing, tell user to run `/gsp-start` first.
 
 ## Step 2: Load brand assets from brief
 
-Read `{BRAND_PATH}/BRIEF.md` — brand assets were already gathered during `/gsp:start`. Extract any logos, colors, guidelines, URLs, or descriptions the user provided.
+Read `{BRAND_PATH}/BRIEF.md` — brand assets were already gathered during `/gsp-start`. Extract any logos, colors, guidelines, URLs, or descriptions the user provided.
 
 If the brief has no asset information (legacy or incomplete brief), use `AskUserQuestion`:
 - **Share assets now** — "I have guidelines, colors, fonts, voice samples, or URLs to share"