get-shit-pretty 0.6.2 → 0.6.3

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

@@ -0,0 +1,108 @@
+---
+name: gsp-typography
+description: Design type systems — scale, pairing, fluid type, vertical rhythm
+user-invocable: true
+model: sonnet
+allowed-tools:
+  - Read
+  - Write
+  - AskUserQuestion
+  - Glob
+  - Grep
+  - WebSearch
+---
+<context>
+You are a GSP typography director. You build complete type systems — scale generation, font pairing, fluid responsive type, vertical rhythm, and font loading strategy.
+
+This is a standalone composable skill. It works two ways:
+1. **Standalone** — user runs `/gsp-typography` directly for type scale exploration and font pairing
+2. **As a building block** — the creative-director invokes `/gsp-typography --enrich` to add technical precision to creative typeface choices
+
+Absorbs the capabilities of the current `gsp-typescale` (mathematical scale generation).
+</context>
+
+<objective>
+Build a production-ready typography system from typeface choices or user input.
+
+**Input:** Font families + brand context, OR `--enrich` mode with existing `typography.md`
+**Output:** `typography.md` chunk with full 9-level scale, fluid type formulas, and loading strategy
+**Agent:** None — inline skill, mathematical scale generation
+</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
+- Type scales must be mathematically consistent (ratio-based: 1.125, 1.2, 1.25, 1.333, 1.414, 1.5, 1.618)
+- Always specify Google Fonts import URL or font loading strategy
+- Fluid type uses clamp() with min/preferred/max values
+- 9 scale levels: Display, H1, H2, H3, Body Large, Body, Body Small, Caption, Overline
+</rules>
+
+<process>
+## Step 0: Determine mode
+
+| Input | Mode |
+|-------|------|
+| `/gsp-typography --enrich` | Enrich existing typography.md |
+| `/gsp-typography "Inter" --ratio 1.25` | Generate from font + ratio |
+| `/gsp-typography` | Interactive — explore and build |
+
+## Step 1: Enrich mode (`--enrich`)
+
+Read existing `{BRAND_PATH}/identity/typography.md`. Extract chosen typefaces and scale direction.
+
+Read `references/typography-scales.md` for domain expertise.
+
+Enrich the file with:
+- Mathematical 9-level type scale from the chosen ratio
+- Fluid type clamp() formulas per level
+- Font weight mapping (heading weight, body weight, accent weight)
+- Line height per level (tighter for display, looser for body)
+- Letter spacing per level (negative for display, positive for overlines)
+- Google Fonts import URL or font loading strategy
+- Vertical rhythm based on base line-height
+
+Overwrite `typography.md` with enriched version. Preserve the creative rationale.
+
+## Step 2: Interactive mode (no args)
+
+One `AskUserQuestion` at a time:
+
+1. Starting point — use `AskUserQuestion`:
+   - **I have fonts chosen** — "I know my typefaces"
+   - **From a style preset** — "Start from a GSP preset type system"
+   - **Explore pairings** — "Help me find the right fonts"
+2. If exploring: ask about voice (authoritative/friendly/technical/editorial), format (long-form/dashboard/marketing)
+3. Propose primary + secondary (or mono) pairing with rationale
+4. Scale ratio — use `AskUserQuestion`:
+   - **1.2 Minor Third** — "subtle, compact, dashboards"
+   - **1.25 Major Third** — "balanced, versatile, most projects"
+   - **1.333 Perfect Fourth** — "pronounced hierarchy, editorial"
+   - **1.5 Perfect Fifth** — "dramatic, poster-like"
+   - **Custom** — "specify your own ratio"
+
+## Step 3: Generate type system
+
+Calculate 9-level scale from base size (default 16px) and ratio:
+- Display, H1, H2, H3, Body Large, Body (base), Body Small, Caption, Overline
+
+For each level define:
+- Size (px and rem)
+- Fluid clamp() formula: `clamp({min}rem, {preferred}vw, {max}rem)`
+- Weight
+- Line height
+- Letter spacing
+- Use case
+
+## Step 4: Write output
+
+Write `typography.md` to the resolved output path. Target: 80-120 lines.
+
+## Step 5: Completion
+
+Display scale preview table. Offer next steps.
+</process>

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

@@ -1,5 +1,5 @@
 ---
-name: update
+name: gsp-update
 description: Update GSP to the latest version
 user-invocable: true
 model: sonnet
@@ -80,7 +80,6 @@ If the fetch succeeds, extract and display the section(s) between the installed
 ```
 The update replaces:
   • skills/gsp-*          (all GSP skills + sibling files)
-  • prompts/              (agent system prompts)
   • templates/            (config, state, brief templates)
   • references/           (shared reference material)
   • agents/gsp-*          (all GSP agents)

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

@@ -0,0 +1,101 @@
+---
+name: gsp-video
+description: Define video & motion graphics direction — editing style, pacing, transitions, brand motion language
+user-invocable: true
+model: sonnet
+allowed-tools:
+  - Read
+  - Write
+  - AskUserQuestion
+  - Glob
+  - Grep
+  - WebSearch
+---
+<context>
+You are a GSP video director. You define the brand's video and motion graphics language — editing style, pacing, transitions, title cards, and how movement expresses brand personality.
+
+This is a standalone composable skill. It works two ways:
+1. **Standalone** — user runs `/gsp-video` directly for video direction
+2. **As a building block** — invoked during identity or project phases when the brand needs video content direction
+
+Video is increasingly essential — product demos, hero backgrounds, social content, onboarding flows. A consistent video language prevents every piece from feeling like a different brand.
+</context>
+
+<objective>
+Define video and motion graphics direction for a brand or project.
+
+**Input:** Brand context or user description, OR `--enrich` mode
+**Output:** `video-direction.md` chunk with editing style, pacing, transitions, and motion graphics 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
+- Video direction must align with brand intensity dials — a variance:2 brand gets calm, steady video; variance:8 gets dynamic cuts
+- Motion graphics must use the brand's color palette and typography
+- Specify concrete parameters (duration ranges, easing curves, fps) not vague adjectives
+</rules>
+
+<process>
+## Step 0: Determine mode
+
+| Input | Mode |
+|-------|------|
+| `/gsp-video --enrich` | Enrich existing video direction |
+| `/gsp-video` | Interactive — define video language |
+
+## Step 1: Enrich mode (`--enrich`)
+
+Read existing brand context (`.yml` intensity dials, color palette, typography). Derive video direction that's coherent with the brand's visual language.
+
+## Step 2: Interactive mode
+
+One `AskUserQuestion` at a time:
+
+1. Video use case — use `AskUserQuestion`:
+   - **Product demos** — "screen recordings, feature walkthroughs"
+   - **Hero backgrounds** — "ambient loops, atmospheric"
+   - **Social content** — "short-form, attention-grabbing"
+   - **Onboarding** — "tutorial, educational"
+   - **Brand film** — "narrative, emotional"
+   - **Multiple** — "we need several types"
+2. Editing energy — use `AskUserQuestion`:
+   - **Calm & deliberate** — "long takes, slow reveals, breathing room"
+   - **Rhythmic & paced** — "steady cuts on beat, consistent tempo"
+   - **Dynamic & energetic** — "fast cuts, match cuts, high energy"
+   - **Cinematic & dramatic** — "slow motion, depth of field, orchestrated"
+
+## Step 3: Define video direction
+
+### Editing Style
+- **Pacing:** cut frequency (e.g., "3-5 second holds, cut on action")
+- **Transitions:** preferred transitions (cut, dissolve, wipe, morph, none)
+- **Camera movement:** static, slow pan, tracking, handheld
+- **Color grading:** warm/cool/neutral, contrast level, LUT direction
+
+### Motion Graphics
+- **Typography animation:** how text enters/exits (fade, slide, type-on, scale)
+- **Timing:** duration ranges per element type (titles: 1-2s, lower thirds: 3-5s)
+- **Easing:** animation curves that match brand motion (ease-out for calm, spring for playful)
+- **Color:** motion graphics use brand palette — specify which colors for backgrounds, text, accents
+- **Style:** flat/dimensional, geometric/organic, minimal/rich
+
+### Title Cards & Lower Thirds
+- **Layout:** positioning, safe zones
+- **Typography:** brand typeface at which weight/size
+- **Background treatment:** solid, semi-transparent, none
+- **Animation:** enter/hold/exit with timing
+
+### Brand Motion Principles
+- 3-5 principles (e.g., "Movement always has purpose", "Transitions serve the narrative, not decoration")
+- **Anti-patterns:** what to avoid (e.g., "no star wipes", "no text on busy backgrounds without contrast overlay")
+
+## Step 4: Write output + completion
+
+Write `video-direction.md` chunk. Target: 80-120 lines.
+</process>

package/gsp/templates/branding/config.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.2",
+  "version": "0.6.3",
   "project_type": "brand",
   "brand": {
     "name": "",

package/gsp/templates/branding/roadmap.md

@@ -7,7 +7,7 @@
 
 ## Phase 0: Audit (optional)
 **Status:** skipped
-**Command:** `/gsp:brand-audit`
+**Command:** `/gsp-brand-audit`
 **Input:** Existing brand assets + BRIEF.md
 **Output:** `audit/`
 **Goal:** Audit existing brand. Assess coherence, market fit, equity. Produce evolution map.
@@ -15,28 +15,28 @@
 
 ## Phase 1: Research
 **Status:** pending
-**Command:** `/gsp:brand-research`
+**Command:** `/gsp-brand-research`
 **Input:** BRIEF.md
 **Output:** `discover/`
 **Goal:** Research market landscape, competitive positioning, design trends.
 
 ## Phase 2: Strategy
 **Status:** pending
-**Command:** `/gsp:brand-strategy`
+**Command:** `/gsp-brand-strategy`
 **Input:** BRIEF.md + discover/
 **Output:** `strategy/`
 **Goal:** Define positioning, archetype, platform, voice, and messaging.
 
 ## Phase 3: Identity
 **Status:** pending
-**Command:** `/gsp:brand-identity`
+**Command:** `/gsp-brand-identity`
 **Input:** BRIEF.md + strategy/
 **Output:** `identity/` + `palettes.json`
 **Goal:** Create visual identity — logo, color, typography, imagery.
 
-## Phase 4: Patterns (Design System)
+## Phase 4: Guidelines (Operationalize)
 **Status:** pending
-**Command:** `/gsp:brand-patterns`
-**Input:** Identity + Strategy + BRIEF.md
-**Output:** `patterns/` (foundations, components, tokens.json) + `guidelines.html`
-**Goal:** Build design system, generate brand guidelines, transition to project diamond.
+**Command:** `/gsp-brand-guidelines`
+**Input:** Identity (enriched) + Strategy + BRIEF.md
+**Output:** `patterns/` ({brand-name}.yml, STYLE.md, guidelines.html, components/)
+**Goal:** Operationalize brand identity for projects — assemble tokens, render STYLE.md, map components, generate guidelines.

package/gsp/templates/exports-index.md

@@ -23,7 +23,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:system -->
 | Section | Chunk | Lines |
 |---------|-------|-------|
-| _(populated by /gsp:brand-system — lives in brand directory)_ | | |
+| _(populated by /gsp-brand-system — lives in brand directory)_ | | |
 
 ### Foundations
 
@@ -43,7 +43,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:brief -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:project-brief)_ | |
+| _(populated by /gsp-project-brief)_ | |
 <!-- END:brief -->
 
 ## Project Research
@@ -51,7 +51,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:research -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:project-research)_ | |
+| _(populated by /gsp-project-research)_ | |
 <!-- END:research -->
 
 ## Design
@@ -59,7 +59,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:design -->
 | # | Screen | File | Components Used |
 |---|--------|------|-----------------|
-| _(populated by /gsp:project-design)_ | | | |
+| _(populated by /gsp-project-design)_ | | | |
 
 ### Shared
 
@@ -73,7 +73,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:critique -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:project-critique)_ | |
+| _(populated by /gsp-project-critique)_ | |
 <!-- END:critique -->
 
 ## Build
@@ -81,7 +81,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:build -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:project-build)_ | |
+| _(populated by /gsp-project-build)_ | |
 <!-- END:build -->
 
 ## QA Review
@@ -89,7 +89,7 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:review -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:project-review)_ | |
+| _(populated by /gsp-project-review)_ | |
 <!-- END:review -->
 
 ## Launch Campaign (Optional)
@@ -97,5 +97,5 @@ This file is the entry point for coding agents consuming GSP design output.
 <!-- BEGIN:launch -->
 | Section | File |
 |---------|------|
-| _(populated by /gsp:launch — optional)_ | |
+| _(populated by /gsp-launch — optional)_ | |
 <!-- END:launch -->

package/gsp/templates/phases/build.md

@@ -7,7 +7,7 @@
 The build phase runs as a 4-phase pipeline:
 
 ### Phase 1: Scaffold
-Stack setup via `/gsp:scaffold` — install deps, create configs, verify build compiles. Produces `build/SCAFFOLD-LOG.md`.
+Stack setup via `/gsp-scaffold` — install deps, create configs, verify build compiles. Produces `build/SCAFFOLD-LOG.md`.
 
 ### Phase 2: Foundations
 Token integration, global styles, layout primitives. Agent mode: `foundations`. Checkpoint: build must compile after foundations.

package/gsp/templates/phases/design.md

@@ -33,7 +33,7 @@ Naming: `screen-{NN}-{kebab-case-name}.md` (e.g., `screen-01-home.md`, `screen-0
 Self-contained HTML wireframe preview:
 - One section per screen with box-model layout visualization
 - Navigation between screens via sidebar table of contents
-- Brand color accents from tokens.json (or neutral grays)
+- Brand color accents from the brand `.yml` preset (or neutral grays)
 - Responsive, no external dependencies
 
 ## Content Reference

package/gsp/templates/phases/patterns.md

@@ -1,98 +1,91 @@
-# Design System
+# Brand Guidelines
 
 ## Brand: {BRAND_NAME}
 **Date:** {DATE}
 
-> Created once per brand. Reused across all projects.
+> Operational artifacts that transform brand identity into project-ready outputs. Created once per brand. Consumed by designer and builder agents.
 
 ---
 
-> This phase produces foundation chunks in `patterns/foundations/`, component chunks in `patterns/components/`, plus `principles.md`, `tokens.json`, and `INDEX.md`.
+> This phase produces `{brand-name}.yml`, `STYLE.md`, `guidelines.html`, component mapping, and `INDEX.md` in the `patterns/` directory.
 
 ## Inputs
-- identity/color-system.md → foundations/color-system.md
-- identity/palettes.json → token generation
-- identity/typography.md → foundations/typography.md
-- identity/logo-directions.md → clear space tokens
-- strategy/archetype.md + strategy/brand-platform.md → principles.md
-- strategy/voice-and-tone.md → content component guidelines
-- config.json system_config — tech_stack, system_strategy
-
-## Chunk Mapping
-
-### Foundations (`patterns/foundations/`)
-
-| Chunk File | Content |
-|-----------|---------|
-| `foundations/color-system.md` | Primary, secondary, semantic, neutral scale, dark mode, contrast ratios |
-| `foundations/typography.md` | 9-level type scale (Display → Overline) with all properties |
-| `foundations/spacing.md` | 8px base unit spacing scale |
-| `foundations/grid.md` | 12-column grid with gutters, margins, breakpoints |
-| `foundations/elevation.md` | 5 shadow levels with use cases and values |
-| `foundations/border-radius.md` | Token scale (none, sm, md, lg, xl, full) |
+- identity/color-system.md → token color values
+- identity/palettes.json → OKLCH scales for token generation
+- identity/typography.md → font families, scale direction
+- identity/logo-directions.md → logo context for brand guide
+- identity/imagery-style.md → imagery direction for brand guide
+- strategy/archetype.md + strategy/positioning.md → intensity derivation, philosophy
+- strategy/voice-and-tone.md → voice context for brand guide
+- config.json system_config — tech_stack, system_strategy, style_base
+- style_base preset `.yml` + `.md` — structural scaffold + philosophy/implementation content
+
+## Output Mapping
+
+### Core Files
+
+| 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. The builder generates CSS variables from this at build time using `references/token-mapping.md`. |
+| `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. |
 
 ### Components (`patterns/components/`)
 
 Component output is library-aware:
 
-1. **`token-mapping.md`** (always) — brand tokens → component library theming API. Complete, copy-paste-ready config.
+1. **`token-mapping.md`** (always) — brand tokens → component library theming API. Complete, copy-paste-ready config. See `references/token-mapping.md` for the CSS generation spec.
 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.
 
 If no UI library is detected, write up to 15 core component specs.
 
-### Other Files
-
-| File | Content |
-|-----------|---------|
-| `principles.md` | 3-5 design principles + do's and don'ts |
-| `tokens.json` | Complete W3C Design Tokens format (color, typography, spacing, shadow, border-radius, breakpoints) |
-| `{brand-name}.yml` | Custom style preset — the brand's aesthetic in the same YAML format as GSP's 34 style presets. Portable and reusable. |
-| `{brand-name}.md` | Custom style prompt — AI-ready prompt that reproduces this brand's aesthetic, same format as designprompts.dev. |
-
 ## Content Reference
 
-Each chunk follows the format in `references/chunk-format.md`. Below is the structural reference for what each chunk should contain:
-
-### foundations/color-system.md
-- Full color palette with semantic mapping
-- Primary, secondary, accent, background, text colors
-- Semantic colors: error, success, warning, info
-- Neutral scale
-- Dark mode mapping
-- Contrast ratios (WCAG AA)
-
-### foundations/typography.md
-- Type scale table: Level, Size, Weight, Line Height, Letter Spacing, Use
-- Levels: Display, H1, H2, H3, Body Large, Body, Body Small, Caption, Overline
-
-### foundations/spacing.md
-- Base unit: 8px
-- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96
-- Usage guidelines per scale value
-
-### foundations/grid.md
-- Columns: 12
-- Gutter, margin values
-- Breakpoint definitions and behavior
-
-### foundations/elevation.md
-- 5 levels (0–4): Flat, Cards, Dropdowns, Modals, Popovers
-- CSS shadow values per level
-
-### foundations/border-radius.md
-- Token scale: none (0), sm, md, lg, xl, full (9999px)
-- Use cases per token
+Each chunk follows the format in `references/chunk-format.md`.
+
+### {brand-name}.yml
+
+Full preset schema:
+- `tokens:` — color (primary, secondary, accent, semantic), typography (families, weights, sizes), shape (radius, border), elevation (shadows), spacing (base + scale), motion (durations, easing)
+- `dark_mode:` — color overrides for dark theme
+- `intensity:` — variance (1-10), motion (1-10), density (1-10)
+- `patterns:` — 7 component composition rules (card, button-primary, button-secondary, input, badge, nav, layout)
+- `constraints:` — never[] and always[] lists
+- `effects:` — interaction-vocabulary[], hover/active/focus/transition tables, ambient (optional)
+
+### STYLE.md
+
+Sections (from `templates/phases/style.md`):
+- **Intensity** — dial values with meaning
+- **Philosophy** — emotional DNA from strategy + preset `.md` companion
+- **Patterns** — component composition tables
+- **Constraints** — never/always bullet lists
+- **Effects** — interaction vocabulary + state tables
+- **Bold Bets** — 3-5 distinctive techniques from identity's boldest choices
+- **Implementation** — component code hints, textures & surfaces, typography treatments, animation recipes (from preset `.md` companion)
+
+### guidelines.html
+
+Self-contained HTML with:
+- Embedded Google Fonts for chosen typefaces
+- Page styled with brand colors
+- Color palette swatches (full 50→900 ramps)
+- Typography samples at defined type scale
+- Component previews (card, button, input, badge) styled with brand tokens
+- Spacing/elevation visualizations
+- Constraint summary
+- Voice attributes and archetype (from strategy)
 
 ### components/token-mapping.md
 - Library-specific token config (CSS vars, theme object, etc.)
-- Maps every foundation token to the library's theming API
+- Maps every token from `.yml` to the library's theming API
 - Copy-paste-ready — no interpretation needed
 
 ### Override component chunks
 - What to override and why (traces to brand identity)
 - Code hints for the specific library
-- Cross-references to foundation chunks
+- Cross-references to `.yml` tokens
 
 ### Custom component chunks
 - States: default, hover, active, disabled, focus, loading
@@ -100,8 +93,4 @@ Each chunk follows the format in `references/chunk-format.md`. Below is the stru
 - Usage rules
 - Accessibility spec
 - Code hints
-- Cross-references to foundation chunks
-
-### principles.md
-- 3-5 design principles with rationale
-- Do's and Don'ts table
+- Cross-references to `.yml` tokens