get-shit-pretty 0.6.2 → 0.7.0

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

@@ -1,240 +0,0 @@
----
-name: brand-patterns
-description: Build your design system — tokens, components, brand guidelines
-user-invocable: true
-model: opus
-effort: high
-allowed-tools:
-  - Read
-  - Write
-  - Bash
-  - Agent
-  - Grep
-  - Glob
----
-<context>
-Phase 4 of the GSP branding diamond. Builds the design system (foundations, components, tokens), generates a self-contained brand guidelines HTML, and transitions the user from the branding diamond to the project diamond.
-
-Adapts strategy based on codebase context — generates from scratch, extends an existing system, or redesigns with migration mapping.
-</context>
-
-<objective>
-Build the design system, generate brand guidelines, and complete the branding diamond.
-
-**Input:** Brand identity + strategy + BRIEF.md
-**Output:** `{brand}/patterns/` (foundations/, components/, principles.md, tokens.json, {brand-name}.yml, {brand-name}.md, INDEX.md) + `{brand}/guidelines.html`
-**Agent:** `gsp-pattern-architect`
-</objective>
-
-<execution_context>
-@${CLAUDE_SKILL_DIR}/../../prompts/01-design-system-architect.md
-@${CLAUDE_SKILL_DIR}/../../templates/phases/patterns.md
-@${CLAUDE_SKILL_DIR}/../../references/design-tokens.md
-</execution_context>
-
-<rules>
-- Always use `AskUserQuestion` for user-facing questions — never raw text prompts
-- One decision per question — never batch multiple questions in a single message
-</rules>
-
-<process>
-## Step 0: Resolve brand
-
-Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `BRAND_PATH`.
-If BRAND_PATH doesn't exist, tell the user to run `/gsp:start` first.
-
-## Step 1: Load context
-
-### Identity (chunk-first)
-
-Read `{BRAND_PATH}/identity/INDEX.md`. If it exists, load all identity chunks + `palettes.json`.
-
-If INDEX.md doesn't exist, check if identity phase is complete in brand STATE.md. If not, tell the user to complete brand identity first (run `/gsp:brand-identity`).
-
-### Strategy (selective, chunk-first)
-
-Read `{BRAND_PATH}/strategy/INDEX.md`. If it exists, load selective chunks (voice-and-tone.md, brand-platform.md).
-
-### Brand context
-
-Read:
-- `{BRAND_PATH}/BRIEF.md` — business, personas, goals
-- `{BRAND_PATH}/config.json` — get `system_config.system_strategy`, `system_config.tech_stack`, `system_config.style_base`
-
-### Style base presets (format reference)
-
-If `style_base` is a non-empty array, load each preset's files from `${CLAUDE_SKILL_DIR}/../gsp-style/styles/`:
-- `{preset-name}.yml` — format reference for custom style output
-- `{preset-name}.md` — format reference for custom style prompt
-
-If `style_base` is empty or missing, load `${CLAUDE_SKILL_DIR}/../gsp-style/styles/professional.yml` and `${CLAUDE_SKILL_DIR}/../gsp-style/styles/professional.md` as the default format reference. The agent always needs at least one example to produce the custom style output.
-
-## Step 1.5: Codebase awareness
-
-**Always scan:** If `.design/system/` docs don't exist, invoke `/gsp:design-system` via Skill tool to scan the codebase. If they already exist, read them. Either way, load STACK.md, COMPONENTS.md, and TOKENS.md before continuing.
-
-Then ask the user (each as its own `AskUserQuestion`):
-
-1. Tech stack — if the scan detected a stack, use `AskUserQuestion`:
-   - **Yes, build on {framework} + {styling}** — "Use what's already here"
-   - **Different stack** — "I want to target a different tech stack"
-   If no stack detected, use open-ended `AskUserQuestion`: "What tech stack will this brand target?"
-   Store answer in `{BRAND_PATH}/config.json` → `system_config.tech_stack`
-
-2. System strategy — only ask if scan found existing tokens/components. Use `AskUserQuestion`:
-   - **Evolve** — "Extend the existing design system"
-   - **Rethink** — "Redesign from scratch, informed by what exists"
-   - **Ignore** — "Start fresh, don't reference the existing system"
-   Store strategy in `{BRAND_PATH}/config.json` → `system_config.system_strategy`
-   If scan found no tokens/components (greenfield/boilerplate): default to `generate`, skip this question
-
-## Step 2: Determine system strategy
-
-Read `system_config.system_strategy` from config.json (defaults to `generate` if missing).
-
-Three strategies:
-
-**GENERATE** (when `system_strategy` is `generate` or missing):
-Full system from scratch. For `boilerplate` codebases, respect existing config structure (extend tailwind.config, not replace) and output tokens in the format the existing config uses (Tailwind extend, CSS custom properties, etc).
-
-**EXTEND** (when `system_strategy` is `extend`):
-Evolve the existing system rather than replacing it.
-1. Audit existing tokens against the brand identity — keep what works, adjust what doesn't, fill gaps
-2. Classify each existing component: KEEP / RESTYLE / REFACTOR / REPLACE
-3. Design only net-new components not covered by existing ones
-4. Output delta tokens — only new and changed values
-5. Preserve existing naming conventions from `.design/system/CONVENTIONS.md`
-
-**REFACTOR** (when `system_strategy` is `refactor`):
-Redesign the system from the ground up, informed by what exists.
-1. Read and understand existing tokens, components, patterns from `.design/system/` docs
-2. Design a complete new system — same scope as GENERATE
-3. Produce a migration mapping for every change
-4. Preserve conventions unless the brand requires changes
-5. Flag breaking changes explicitly
-
-## Step 3: Spawn pattern architect — Pass 1: Foundations
-
-Spawn the `gsp-pattern-architect` agent with:
-- All identity chunks + palettes.json
-- The BRIEF.md content
-- The Design System Architect prompt (01)
-- The patterns output template
-- The design tokens reference
-- The `system_strategy` and `tech_stack` values
-- The `style_base` value + preset `.yml`/`.md` files (if loaded)
-- The `.design/system/STACK.md`, `COMPONENTS.md`, `TOKENS.md` content (when exist)
-- **Execution mode:** `"foundations"`
-- **Output path:** `{BRAND_PATH}/patterns/`
-
-The agent writes foundations only:
-- `patterns/foundations/` (6 foundation chunks)
-- `patterns/principles.md`
-- `patterns/tokens.json` (foundations-only)
-
-## Step 3.5: Foundation review (interactive)
-
-Read the foundation outputs and present a compact summary:
-
-"Design system foundations:
- Color: {semantic mapping summary from foundations/color-system.md}
- Typography: {type scale summary from foundations/typography.md}
- Spacing: 8px base → {scale from foundations/spacing.md}
- Design principles: {list from principles.md}"
-
-Use `AskUserQuestion`:
-- **Looks good** — "Build components on these foundations"
-- **Adjust colors** — "I want to tweak the color system"
-- **Adjust typography** — "I want to tweak the type scale"
-- **Adjust other** — "I want to change spacing, principles, or other foundations"
-
-If adjustments needed, update the relevant foundation chunks, then re-present.
-
-## Step 3.75: Perspective check
-
-Before building components, load persona profiles from `{BRAND_PATH}/BRIEF.md` and present stakeholder reactions:
-
-"Before we build the component library:
-
- {primary persona name}: {would they recognize this as {brand}? Does it feel right?}
- Skeptic: {are the tokens flexible enough? Are the principles actionable?}
- {top competitor}: {how does this compare to industry standards?}"
-
-Use `AskUserQuestion`:
-- **Build components** — "These foundations are solid, let's go"
-- **Adjust** — "One of these concerns resonates — I want to change something"
-
-If adjust → update foundations and re-present. If confirmed → proceed to components pass.
-
-## Step 4: Spawn pattern architect — Pass 2: Components
-
-Spawn the `gsp-pattern-architect` agent with:
-- The existing foundations from Pass 1
-- All identity chunks + palettes.json
-- Strategy chunks: voice-and-tone.md, archetype.md, positioning.md (needed for custom style output)
-- `.design/system/STACK.md`, `COMPONENTS.md`, `TOKENS.md` (if exist — component library detection for token mapping)
-- The `style_base` value + preset `.yml`/`.md` files (if loaded)
-- **Execution mode:** `"components"`
-- Confirmed component scope from Step 1.5
-- **Output path:** `{BRAND_PATH}/patterns/`
-
-The agent writes components + custom style:
-- `patterns/components/` (one per component)
-- Updates `patterns/tokens.json` (adds component tokens)
-- `patterns/{brand-name}.yml` (custom style preset — portable, reusable)
-- `patterns/{brand-name}.md` (custom style prompt — AI-ready)
-- `patterns/INDEX.md`
-
-## Step 4.5: Update state
-
-Update `{BRAND_PATH}/STATE.md`:
-- Set Phase 4 (Patterns) status to `complete`
-- Record completion date
-- Set Prettiness Level to 100%
-
-## Step 4.75: Generate brand guidelines
-
-Create a self-contained HTML file at `{BRAND_PATH}/guidelines.html`.
-
-Read all available brand outputs:
-- `{BRAND_PATH}/identity/palettes.json` — color palette data
-- `{BRAND_PATH}/identity/color-system.md` — color roles and usage
-- `{BRAND_PATH}/identity/typography.md` — type scale and families
-- `{BRAND_PATH}/strategy/voice-and-tone.md` — voice attributes (means / doesn't mean)
-- `{BRAND_PATH}/strategy/messaging.md` — tagline directions
-- `{BRAND_PATH}/identity/logo-directions.md` — logo direction descriptions
-- `{BRAND_PATH}/strategy/archetype.md` — brand archetype
-
-Generate a single self-contained HTML file with:
-- **Embedded Google Fonts** `<link>` for the chosen typefaces
-- **Page styled with brand colors** — background, text, and accent colors from palettes.json
-- **Color palette swatches** — full ramp from 50→900 stops for each palette
-- **Typography samples** — headings and body text at the defined type scale, using the chosen font families
-- **Voice attributes** — each attribute with "means / doesn't mean" columns
-- **Tagline directions** — listed with descriptions
-- **Logo direction descriptions** — each direction with rationale
-- **Archetype summary** — the selected archetype and its expression
-
-Tell the user: "Brand kit saved to `guidelines.html` — open it in your browser to see your colors, typography, voice, and messaging in one page. You can also print or export to PDF as a shareable brand guide."
-
-## Step 5: Phase transition output
-
-Render phase transition (see `references/phase-transitions.md`).
-
-**E2E mode:** Read `{BRAND_PATH}/config.json`. If `e2e` is `true`, auto-invoke `/gsp:start` via Skill tool — it will detect the completed brand and route directly to project setup (Step 4). No need to ask the user.
-
-**Non-E2E:** When the user chooses "Start a project", invoke `/gsp:start` via the Skill tool. Do NOT attempt to handle project setup inline — `/gsp:start` has the codebase scanning, questioning rounds, and brief-writing logic needed for a proper project setup. The branding agent's context is spent on brand work and lacks the project setup methodology.
-
-Also display a brand summary after the standard transition — this is the final branding phase:
-
-```
-  brand complete — {brand-name}
-
-    discover       {key finding}
-    strategy       {archetype}, {positioning}, {top voice attributes}
-    identity       {colors}, {typefaces}
-    patterns       {N} foundations, {N} components
-
-    guidelines: {BRAND_PATH}/guidelines.html
-```
-</process>

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

@@ -1,234 +0,0 @@
----
-name: typescale
-description: Generate a mathematical type scale — standalone or as a building block for identity
-user-invocable: true
-model: sonnet
-allowed-tools:
-  - Read
-  - Write
-  - Bash
-  - AskUserQuestion
-  - WebSearch
----
-<context>
-You are a GSP type scale generator. You produce a complete typography system from a base size, ratio, and font family — including fluid responsive sizing, vertical rhythm, Tailwind/shadcn integration, and accessibility-compliant defaults. Downstream agents (identity-designer, system-architect, builder) consume the output files.
-
-This is a standalone composable skill. It works two ways:
-1. **Standalone** — user runs `/gsp:typescale "Inter" --ratio 1.25` directly, gets a production-ready type system
-2. **As a building block** — identity phase detects existing typography files and reuses them
-
-Visual companion: https://typescale.com/ — users can preview ratios interactively there, then feed the values here.
-</context>
-
-<objective>
-Generate a production-ready typography system with fluid responsive sizing, vertical rhythm, and framework-native output.
-
-**Input:** Font family, ratio, and options (args or interactive)
-**Output:** `typography.md` foundation chunk + `tailwind.typography.css` (Tailwind/shadcn) or `typescale.css` (vanilla) in the target directory
-**Agent:** None — mathematical scale generation, handled inline
-</objective>
-
-<execution_context>
-@${CLAUDE_SKILL_DIR}/../../references/chunk-format.md
-@${CLAUDE_SKILL_DIR}/../../references/typography-scales.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
-- Foundation chunks follow `references/chunk-format.md` format exactly
-- All sizes include px, rem, AND fluid clamp() values for headings
-- Line heights snap to a 4px grid for vertical rhythm (body 24px = 6 × 4px)
-- Letter spacing follows the size-dependent curve: negative for large type, positive for small type, wide for all-caps (see reference)
-- CSS output defaults to Tailwind v4 / shadcn format unless `--vanilla` is passed
-- WCAG 2.2 AA compliance: body line-height ≥ 1.5, layout must survive SC 1.4.12 text spacing overrides
-</rules>
-
-<process>
-## Step 0: Parse invocation
-
-Read the user's input to determine the mode:
-
-| Input | Mode |
-|-------|------|
-| `/gsp:typescale "Inter" --ratio 1.25` | Direct — font and ratio from args |
-| `/gsp:typescale --from-style cyberpunk` | From style — extract typography from a preset |
-| `/gsp:typescale` | Interactive — ask for inputs |
-| `/gsp:typescale --list-ratios` | List — show available ratios |
-| `/gsp:typescale --preview "Inter" --ratio 1.25` | Preview — show scale without writing files |
-
-Additional flags (combinable with any mode):
-- **--vanilla** — output plain CSS custom properties instead of Tailwind format
-- **--fluid** — use clamp()-based fluid sizing instead of breakpoint steps (default: fluid)
-- **--no-fluid** — use breakpoint steps only, no clamp()
-- **--grid 4** — vertical rhythm grid unit in px (default: 4)
-
-## Step 1: List ratios mode (`--list-ratios`)
-
-If `--list-ratios`, display the built-in ratios with practical context:
-
-```
-  /gsp:typescale — ratios
-  ═══════════════════════════════════════
-
-  Name                Ratio    Character                Best for
-  ──────────────────────────────────────────────────────────────────
-  minor-second        1.067    Nearly invisible steps   Dense data UIs, admin panels
-  major-second        1.125    Gentle, functional       Documentation, dashboards
-  minor-third         1.200    Balanced, versatile      Most product UIs (Polaris uses this)
-  major-third         1.250    Clear hierarchy          Marketing + product hybrid
-  perfect-fourth      1.333    Strong contrast          Content-heavy sites, blogs
-  augmented-fourth    1.414    Dramatic                 Editorial, magazine layouts
-  perfect-fifth       1.500    Very dramatic            Landing pages, hero sections
-  golden-ratio        1.618    Maximum drama            Art, luxury, display-heavy
-
-  ──────────────────────────────────────────────────────────────────
-  Usage: /gsp:typescale "Inter" --ratio 1.25
-  Preview interactively: https://typescale.com/
-```
-
-Stop here. Do not write any files.
-
-## Step 2: Collect inputs
-
-### Direct mode (args provided)
-
-Parse from the invocation:
-- **Font family** — quoted string (e.g., `"Inter"`)
-- **--ratio** — scale ratio (e.g., `1.25`)
-- **--secondary** — optional secondary font (e.g., `--secondary "Merriweather"`)
-- **--mono** — optional monospace font (e.g., `--mono "Geist Mono"`)
-- **--base** — optional base size in px (default: `16`)
-- **--weights** — optional weight list (e.g., `--weights 400,500,700`)
-- **--line-height** — optional base line-height override (default: `1.5`)
-- **--letter-spacing** — optional base letter-spacing override (default: `0`)
-
-### From-style mode (`--from-style`)
-
-Read the style preset YAML from `../gsp-style/styles/{name}.yml`. Extract:
-- `typography.font-family-primary` → primary font
-- `typography.font-family-mono` → mono font
-- `typography.font-size-base` → base size
-- `typography.font-weight-heading` → heading weight
-- `typography.font-weight-body` → body weight
-- `typography.line-height-base` → base line height
-
-Calculate the implied ratio from the preset's type scale if present, or default to major-third (1.25).
-
-### Interactive mode (no args)
-
-Use `AskUserQuestion` for each input:
-
-1. **Primary font** — offer: Inter, Geist Sans, Plus Jakarta Sans, DM Sans, Space Grotesk, Instrument Serif, Custom
-2. **Scale ratio** — offer: minor-third (1.2), major-third (1.25), perfect-fourth (1.333), augmented-fourth (1.414), Custom. Link https://typescale.com/ for preview.
-3. **Base size** — default 16px unless specified
-
-## Step 3: Calculate type scale
-
-Generate a 9-level scale: `size = base × ratio^n`. Round px to nearest 0.5px, rem = `px / 16`.
-
-| Level | Exponent | Tailwind | Purpose |
-|-------|----------|----------|---------|
-| Display | 5 | `text-6xl`–`text-7xl` | Hero headlines |
-| H1 | 4 | `text-4xl` | Page titles |
-| H2 | 3 | `text-3xl` | Section headings |
-| H3 | 2 | `text-2xl` | Subsection headings |
-| H4 | 1 | `text-xl` | Minor headings |
-| body-large | 0.5* | `text-lg` | Lead paragraphs |
-| body | 0 | `text-base` | Default body (= base) |
-| body-small | -1 | `text-sm` | Secondary text |
-| caption | -2 | `text-xs` | Labels, helper text |
-| overline | -2 | `text-xs` | All-caps labels (= caption size) |
-
-*body-large uses half-step exponent to bridge body → H4 gap.
-
-### Line height per level (snapped to 4px grid)
-
-Formula: `ceil(fontSize * targetRatio / 4) * 4` — every line-height is a multiple of 4px.
-
-| Level | Target ratio |
-|-------|-------------|
-| Display | 1.1 |
-| H1 | 1.15 |
-| H2 | 1.2 |
-| H3 | 1.25 |
-| H4 | 1.3 |
-| body-large | 1.5 |
-| body | 1.5 (anchor: e.g. 24px = 6 × 4px) |
-| body-small | 1.5 |
-| caption | 1.4 |
-| overline | 1.5 |
-
-If user provided `--line-height`, use it as the body target ratio and adjust proportionally.
-
-### Letter spacing per level (size-dependent curve)
-
-Based on the principle: small text needs more space, large text needs less. Reference: Apple SF Pro tracking, Tailwind defaults.
-
-| Level | Letter spacing | Tailwind token | Rationale |
-|-------|---------------|----------------|-----------|
-| Display | -0.025em | `tracking-tighter` | Tighten large type |
-| H1 | -0.025em | `tracking-tight` | |
-| H2 | -0.025em | `tracking-tight` | |
-| H3 | -0.015em | `tracking-tight` | |
-| H4 | -0.01em | `tracking-tight` | |
-| body-large | 0 | `tracking-normal` | Neutral |
-| body | 0 | `tracking-normal` | |
-| body-small | 0.01em | `tracking-normal` | Slightly open small text |
-| caption | 0.015em | `tracking-wide` | |
-| overline | 0.1em | `tracking-wider` | Wide-tracked for all-caps |
-
-## Step 3.5: Calculate fluid type values
-
-For headings (Display → H4), generate `clamp()` values scaling between 375px (mobile) and 1280px (desktop). Mobile uses a ratio two steps down from the chosen ratio. Body and below stay fixed.
-
-**Ratio step-down map:**
-
-```
-golden-ratio     → perfect-fifth    → augmented-fourth
-perfect-fifth    → augmented-fourth → perfect-fourth
-augmented-fourth → perfect-fourth   → major-third
-perfect-fourth   → major-third      → minor-third
-major-third      → minor-third      → major-second
-minor-third      → major-second     → minor-second
-major-second     → minor-second     → minor-second
-minor-second     → minor-second     → minor-second (floor)
-```
-
-If `--no-fluid` is passed, skip clamp() and use breakpoint-only `@media` rules instead.
-
-## Step 4: Preview mode (`--preview`)
-
-If `--preview`, display all 10 levels in a table with columns: Level, Mobile px, Desktop px, Fluid clamp(), Weight, LH, LS. Show base/ratio/fluid range header. Footer: grid unit, body line-height anchor, usage hint to write files. Stop here — do not write any files.
-
-## Step 5: Resolve output path
-
-Determine where to write the typography output:
-
-### Within a brand identity
-If a brand context exists (`.design/branding/{brand}/`):
-- Write to `{BRAND_PATH}/identity/`
-- Typography files sit alongside other identity artifacts
-
-### Standalone (no brand context)
-- Write to `.design/branding/_typescale/`
-- Create minimal directory structure
-
-## Step 6: Write typography.md
-
-Write `{OUTPUT_PATH}/typography.md` as a foundation chunk per `references/chunk-format.md`. Required sections: Font Families (with Google Fonts URL), Type Scale (all 10 levels — px, rem, clamp, weight, LH, LS, Tailwind class), shadcn/ui Typography Classes, Vertical Rhythm (grid unit + spacing tokens), Weights, Accessibility (WCAG 2.2 AA), Variable Font Notes (conditional), Modern CSS (`text-wrap: balance/pretty`), Related.
-
-## Step 7: Write CSS output
-
-### Tailwind / shadcn mode (default)
-
-Write `{OUTPUT_PATH}/tailwind.typography.css` — Tailwind v4 `@theme` extension. Include: header comment, Google Fonts `@import`, `--font-sans`/`--font-mono` + custom `--text-{level}` tokens (with `--line-height`, `--letter-spacing`, `--font-weight` sub-tokens), `:root` fluid clamp() properties (rem-based min/max only — never pure vw per WCAG 1.4.4), utility classes (`.text-display` through `.text-overline`), optical sizing + dark mode antialiasing, `text-wrap: balance` headings / `pretty` paragraphs.
-
-### Vanilla mode (`--vanilla`)
-
-Write `{OUTPUT_PATH}/typescale.css` instead — plain CSS custom properties (no Tailwind syntax). Include: Google Fonts import, `:root` with font families, weights, fluid font sizes (clamp, rem-based), 4px grid-snapped line heights, letter spacing, vertical rhythm tokens.
-
-## Step 8: Completion output
-
-Show: header (`/gsp:typescale — {font} @ {ratio}`), file tree (typography.md + CSS file), scale summary (ratio, range, levels, fluid, grid). Then `AskUserQuestion`: Generate palette → `/gsp:palette`, Apply a full style → `/gsp:style`, Continue to identity → `/gsp:brand-identity`, Done.
-</process>