get-shit-pretty 0.6.2 → 0.7.0

package/gsp/templates/phases/discover.md

@@ -23,7 +23,7 @@
 
 ## Content Reference
 
-Each chunk follows the format in `references/chunk-format.md`.
+Each chunk follows the standard chunk format.
 
 ### market-landscape.md
 - Industry overview and trajectory

package/gsp/templates/phases/identity.md

@@ -31,7 +31,7 @@ Also produces `palettes.json` — machine-readable OKLCH color scales.
 
 ## Content Reference
 
-Each chunk follows the format in `references/chunk-format.md`.
+Each chunk follows the standard chunk format.
 
 ### logo-directions.md
 - 3 directions each with:

package/gsp/templates/phases/launch.md

@@ -20,7 +20,7 @@
 
 ## Content Reference
 
-Each chunk follows the format in `references/chunk-format.md`. Below is the structural reference for what each chunk should contain:
+Each chunk follows the standard chunk format. Below is the structural reference for what each chunk should contain:
 
 ### campaign-strategy.md
 - **Objective:** campaign goal

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 standard chunk format.
+
+### {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

package/gsp/templates/phases/research.md

@@ -24,7 +24,7 @@
 
 ## Content Reference
 
-Each chunk follows the format in `references/chunk-format.md`. Below is the structural reference for what each chunk should contain:
+Each chunk follows the standard chunk format. Below is the structural reference for what each chunk should contain:
 
 ### ux-patterns.md
 - **Product type patterns:** established UX patterns for this category (e.g., dashboard, e-commerce, social, SaaS)

package/gsp/templates/phases/review.md

@@ -19,7 +19,7 @@
 
 ## Content Reference
 
-Each chunk follows the format in `references/chunk-format.md`. Below is the structural reference for what each chunk should contain:
+Each chunk follows the standard chunk format. Below is the structural reference for what each chunk should contain:
 
 ### acceptance-report.md
 - **Overall verdict:** Pass / Conditional Pass / Fail

package/gsp/templates/phases/strategy.md

@@ -27,7 +27,7 @@
 
 ## Content Reference
 
-Each chunk follows the format in `references/chunk-format.md`.
+Each chunk follows the standard chunk format.
 
 ### positioning.md
 - Positioning statement: For {audience} who {need}, {brand} is the {category} that {benefit} because {reason}

package/gsp/templates/phases/style.md

@@ -0,0 +1,158 @@
+# Style
+
+## Brand: {BRAND_NAME}
+**Style:** {STYLE_NAME} | **Generated:** {DATE}
+
+> STYLE.md is the single document designer and builder agents consume. It merges the structured rules from the `.yml` preset with the implementation knowledge from the `.md` companion. Both `/gsp-style` (quick) and the branding diamond (full) produce this same format.
+
+---
+
+## Intensity
+
+| Dial | Value | Meaning |
+|------|-------|---------|
+| Variance | {1-10} | {1=symmetric grid, 10=artsy chaos} |
+| Motion | {1-10} | {1=static, 10=cinematic choreography} |
+| Density | {1-10} | {1=gallery airy, 10=cockpit packed} |
+
+---
+
+## Philosophy
+
+{2-4 sentences from the `.md` companion's Design Philosophy section. The emotional DNA — not what the tokens ARE, but what the design FEELS like. Cultural references, analogies, the "vibe in a sentence." For branded styles, this comes from brand strategy (archetype, positioning, voice).}
+
+---
+
+## Patterns
+
+### Card
+| Property | Rule |
+|----------|------|
+| border | {value or token ref} |
+| shadow | {value or token ref} |
+| radius | {value or token ref} |
+| background | {value or token ref} |
+| {style-specific} | {value — only if this style has unique card properties} |
+
+### Button (primary)
+| Property | Rule |
+|----------|------|
+| background | {value or token ref} |
+| border | {value or token ref} |
+| text | {casing, weight, tracking} |
+| radius | {value or token ref} |
+| {style-specific} | {value} |
+
+### Button (secondary)
+| Property | Rule |
+|----------|------|
+| background | {value or token ref} |
+| border | {value or token ref} |
+| text | {casing, weight, tracking} |
+| radius | {value or token ref} |
+
+### Input
+| Property | Rule |
+|----------|------|
+| border | {value or token ref} |
+| radius | {value or token ref} |
+| background | {value or token ref} |
+| focus | {focus behavior} |
+
+### Badge
+| Property | Rule |
+|----------|------|
+| shape | {value} |
+| text | {styling} |
+
+### Navigation
+| Property | Rule |
+|----------|------|
+| style | {description} |
+| {style-specific} | {value} |
+
+### Layout
+| Property | Rule |
+|----------|------|
+| archetype | **{named-archetype}** |
+| max-width | {value} |
+| section-spacing | {value} |
+| grid-gap | {value} |
+| surfaces | {texture/grain/clean strategy} |
+| {style-specific} | {decoration, backgrounds, depth, etc.} |
+
+---
+
+## Constraints
+
+### Never
+- {forbidden thing} — {why it breaks this aesthetic}
+
+### Always
+- {required thing}
+
+---
+
+## Effects
+
+**Interaction vocabulary:** {comma-separated list of allowed technique names}
+
+### Hover
+| Element | Technique | Description |
+|---------|-----------|-------------|
+| card | {technique-name} | {brief} |
+| button | {technique-name} | {brief} |
+| link | {technique-name} | {brief} |
+
+### Active
+| Element | Technique | Description |
+|---------|-----------|-------------|
+| button | {technique-name} | {brief} |
+
+### Focus
+| Element | Rule |
+|---------|------|
+| general | {focus behavior} |
+| {specific} | {if different from general} |
+
+### Transition
+{duration range}, {easing function}
+
+### Ambient
+{Optional. Only for styles with always-on animations.}
+
+- {technique-name} — {what it does}
+
+---
+
+## Bold Bets
+
+{3-5 specific visual techniques that make this style unmistakable. Extracted from the `.md` companion's signature techniques and non-genericness sections. Each must be specific enough for a builder to implement.}
+
+1. **{Technique name}** — {What it is and how to implement it.}
+2. **{Technique name}** — {Description}
+3. **{Technique name}** — {Description}
+
+---
+
+## Implementation
+
+{Extracted from the `.md` companion's component stylings and CSS code hints. This section gives builders the concrete code patterns to implement the style. Only include what's specific to THIS style — skip universal patterns.}
+
+### Component Code Hints
+{Per-component CSS/Tailwind patterns from the `.md` companion. Only components with style-specific implementations beyond the Patterns tables above.}
+
+### Textures & Surfaces
+{CSS code for style-specific textures: noise SVGs, halftone gradients, grain overlays, scanlines, etc. Skip if the style has no texture requirements.}
+
+### Typography Treatments
+{Style-specific type treatments: text-stroke, tracking overrides, display type techniques. Skip if standard.}
+
+### Animation Recipes
+{CSS/Tailwind for style-specific animations: keyframes, transition definitions, interaction implementations. Skip if effects vocabulary + agent training is sufficient.}
+
+---
+
+## Related
+
+- [{brand-name}.yml](./{brand-name}.yml) — Source of truth (tokens, intensity, patterns, constraints, effects)

package/gsp/templates/projects/config.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.2",
+  "version": "0.7.0",
   "project_type": "design",
   "project": {
     "name": "",

package/gsp/templates/projects/roadmap.md

@@ -10,42 +10,42 @@
 
 ## Phase 1: Brief
 **Status:** pending
-**Command:** `/gsp:project-brief`
+**Command:** `/gsp-project-brief`
 **Input:** Brand system + BRIEF.md
 **Output:** `brief/` (scope, adaptations, conditionals)
 **Goal:** Scope the project — screen list, priorities, component adaptations, gap analysis.
 
 ## Phase 2: Research
 **Status:** pending
-**Command:** `/gsp:project-research`
+**Command:** `/gsp-project-research`
 **Input:** Brief scope + brand system + BRIEF.md
 **Output:** `research/` (UX patterns, competitor UX, technical research, accessibility patterns)
 **Goal:** Deep project-level research — UX patterns, competitor analysis, technical approaches, accessibility strategies.
 
 ## Phase 3: Design
 **Status:** pending
-**Command:** `/gsp:project-design`
+**Command:** `/gsp-project-design`
 **Input:** Research + brief + brand system + BRIEF.md
 **Output:** `design/` (screen chunks + shared/)
 **Goal:** Design core screens, flows, and interaction patterns.
 
 ## Phase 4: Critique
 **Status:** pending
-**Command:** `/gsp:project-critique`
+**Command:** `/gsp-project-critique`
 **Input:** All prior artifacts
 **Output:** `critique/` (critique + accessibility chunks)
 **Goal:** Critique design quality and audit accessibility compliance.
 
 ## Phase 5: Build
 **Status:** pending
-**Command:** `/gsp:project-build`
+**Command:** `/gsp-project-build`
 **Input:** Design + brief + brand system
 **Output:** `build/CODE.md` + `build/components/`
 **Goal:** Translate design into production-ready frontend code.
 
 ## Phase 6: Review
 **Status:** pending
-**Command:** `/gsp:project-review`
+**Command:** `/gsp-project-review`
 **Input:** Built deliverables + design intent
 **Output:** `review/` (acceptance report + issues)
 **Goal:** Validate built deliverables against design intent — token compliance, screen coverage, accessibility.
@@ -53,7 +53,7 @@
 ---
 
 ## Optional: Launch
-**Command:** `/gsp:launch`
+**Command:** `/gsp-launch`
 **Input:** Brand identity + strategy + design
 **Output:** `launch/` (campaign chunks)
 **Goal:** Create marketing campaign assets for launch. Run when needed.

package/gsp/templates/projects/state.md

@@ -45,7 +45,7 @@
 <!-- pending | in-progress | complete | needs-revision | skipped -->
 
 ## Launch
-<!-- Optional — run /gsp:launch when needed -->
+<!-- Optional — run /gsp-launch when needed -->
 <!-- Status: not started -->
 
 ## Decisions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "get-shit-pretty",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Design engineering system for AI coding agents. Brand identity + design projects, from strategy to code.",
   "bin": {
     "get-shit-pretty": "bin/install.js"
@@ -11,7 +11,6 @@
     "start": "next start"
   },
   "files": [
-    ".claude-plugin",
     ".mcp.json",
     "bin",
     "scripts",

package/.claude-plugin/plugin.json

@@ -1,24 +0,0 @@
-{
-  "name": "gsp",
-  "version": "0.6.2",
-  "description": "Design engineering system for AI coding agents. Brand identity + design projects, from strategy to code.",
-  "author": {
-    "name": "jubscodes",
-    "url": "https://github.com/jubscodes"
-  },
-  "homepage": "https://github.com/jubscodes/get-shit-pretty",
-  "repository": "https://github.com/jubscodes/get-shit-pretty",
-  "license": "MIT",
-  "keywords": [
-    "design",
-    "design-system",
-    "brand",
-    "ui-ux",
-    "design-engineering",
-    "shadcn",
-    "figma",
-    "apple-hig",
-    "wcag",
-    "accessibility"
-  ]
-}

package/gsp/agents/gsp-identity-designer.md

@@ -1,74 +0,0 @@
----
-name: gsp-identity-designer
-description: Creates visual identity — logo, color, typography, imagery. Spawned by /gsp:brand-identity.
-tools: Read, Write, Edit, Bash, Grep, Glob, WebFetch
-maxTurns: 30
-permissionMode: acceptEdits
-color: magenta
----
-
-<role>
-You are a GSP identity designer spawned by `/gsp:brand-identity`.
-
-Act as Creative Director at Pentagram. Create the visual identity — logo system, color, typography, imagery — grounded in the brand strategy and voice that precede you.
-
-You do NOT create strategy or voice. You receive those as input and translate them into visual form.
-</role>
-
-<inputs>
-- BRIEF.md content (personas, constraints)
-- discover/mood-board-direction.md — starting point for color and typography
-- Strategy chunks: archetype.md, positioning.md, brand-platform.md, voice-and-tone.md
-- User-confirmed visual direction
-- Style base preset files: `.yml` (tokens) + `.md` (philosophy/prompt) — may be absent
-- Audit brand-inventory.md + evolution-map.md (if exist)
-- Brand Identity Creator prompt (02)
-- Output path
-</inputs>
-
-<methodology>
-1. **Absorb inputs** — strategy chunks for strategic grounding, voice-and-tone for verbal-visual alignment, mood board for visual starting point
-1.5. **Seed from style base** — if style base preset files are provided, read the `.yml` for token values (palette, typography, spacing) and the `.md` for design philosophy. Use these as vocabulary, not constraint — adapt freely where the brand demands it. The preset is a starting palette and type direction, not a rulebook.
-2. **Design logo system** — 3 distinct directions, each expressing strategy differently. For each: concept, rationale (connects to archetype + positioning), variations, usage rules
-3. **Build color system** — primary, secondary, accent, neutral, semantic. Each color needs strategic rationale. Include Hex and RGB. Map dark mode. Calculate WCAG AA contrast. Semantic colors (success, warning, error, info) are standard values — define them in color-system.md but do NOT generate tints.dev palettes for them.
-4. **Generate palettes** — use tints.dev API: `https://tints.dev/api/{colorName}/{hexWithout#}`. **Only for brand colors (primary, secondary, accent) and neutrals.** Store in `identity/palettes.json`
-5. **Define typography** — primary + secondary typefaces. Connect choices to voice: "We chose X because our voice is Y"
-6. **Specify imagery** — photography, illustration, iconography. Connected to archetype and brand essence
-7. **Show applications** — brand in context across key touchpoints
-
-## Quality Standards
-- Every visual decision traces to strategy: "We chose X because [archetype/positioning/voice]"
-- Color system must pass WCAG AA contrast
-- Logo must work at all sizes (favicon to billboard)
-</methodology>
-
-<output>
-Write 5 chunks + palettes.json + INDEX.md to the identity directory (path provided by the skill that spawned you).
-
-Each chunk follows `references/chunk-format.md`.
-
-1. **`logo-directions.md`** (~100-120 lines) — 3 directions with concept, rationale, variations, usage rules
-2. **`color-system.md`** (~100-150 lines) — full palette table, semantic colors, dark mode mapping, contrast ratios. Reference `./palettes.json`
-3. **`typography.md`** (~60-80 lines) — primary + secondary typefaces with rationale, type scale, responsive behavior
-4. **`imagery-style.md`** (~50-70 lines) — photography, illustration, iconography guidelines
-5. **`brand-applications.md`** (~50-70 lines) — key touchpoints showing brand in use
-
-### palettes.json
-tints.dev OKLCH palettes in the identity directory.
-
-### INDEX.md
-
-```markdown
-# Identity
-> Phase: identity | Brand: {name} | Generated: {DATE}
-
-| Chunk | File | ~Lines |
-|-------|------|--------|
-| Logo Directions | [logo-directions.md](./logo-directions.md) | ~{N} |
-| Color System | [color-system.md](./color-system.md) | ~{N} |
-| Typography | [typography.md](./typography.md) | ~{N} |
-| Imagery Style | [imagery-style.md](./imagery-style.md) | ~{N} |
-| Brand Applications | [brand-applications.md](./brand-applications.md) | ~{N} |
-| Palettes | [palettes.json](./palettes.json) | — |
-```
-</output>