get-shit-pretty 0.6.3 → 0.7.0

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

@@ -1,108 +1,70 @@
 ---
 name: gsp-typography
-description: Design type systems — scale, pairing, fluid type, vertical rhythm
+description: "Design type systems — scale, pairing, fluid type, vertical rhythm"
 user-invocable: true
 model: sonnet
 allowed-tools:
   - Read
   - Write
+  - Bash
   - 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.
+Typography skill — thin router. Domain expertise lives in `domains/` files, reference material in `references/`.
 
 This is a standalone composable skill. It works two ways:
-1. **Standalone** — user runs `/gsp-typography` directly for type scale exploration and font pairing
+1. **Standalone** — user runs `/gsp-typography` directly for type scale generation, font pairing, or full system design
 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).
+Visual companion: https://typescale.com/ — users can preview ratios interactively there, then feed the values here.
 </context>
 
 <objective>
-Build a production-ready typography system from typeface choices or user input.
+Build a production-ready typography system — scale, pairing, fluid type, vertical rhythm, and font loading strategy.
 
-**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
+**Input:** Font families + ratio, `--enrich`, `--list-ratios`, `--preview`, `--from-style`, or interactive
+**Output:** `typography.md` foundation chunk + CSS file (Tailwind or vanilla)
 **Agent:** None — inline skill, mathematical scale generation
 </objective>
 
 <execution_context>
-@${CLAUDE_SKILL_DIR}/../../references/chunk-format.md
+@${CLAUDE_SKILL_DIR}/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
+- All sizes include px, rem, AND fluid clamp() values for headings
+- CSS output defaults to Tailwind v4 / shadcn format unless `--vanilla` is passed
+- Foundation chunks follow `chunk-format.md` format exactly
 </rules>
 
 <process>
-## Step 0: Determine mode
+## Step 0: Parse 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 |
+| Input | Mode | Domain |
+|-------|------|--------|
+| `"Inter" --ratio 1.25` | Direct scale | `domains/scale.md` |
+| `--from-style cyberpunk` | From style preset | `domains/scale.md` |
+| `--list-ratios` | List ratios | `domains/scale.md` |
+| `--preview "Inter" --ratio 1.25` | Preview scale | `domains/scale.md` |
+| `--enrich` | Enrich existing typography | `domains/pairing.md` |
+| *(no args)* | Interactive full system | `domains/system.md` |
 
-## Step 1: Enrich mode (`--enrich`)
+## Step 1: Load domain
 
-Read existing `{BRAND_PATH}/identity/typography.md`. Extract chosen typefaces and scale direction.
+Read the domain file from `${CLAUDE_SKILL_DIR}/domains/{domain}.md`.
 
-Read `references/typography-scales.md` for domain expertise.
+For scale modes, also read `${CLAUDE_SKILL_DIR}/references/typography-scales.md`.
 
-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
+## Step 2: Follow domain framework
 
-Overwrite `typography.md` with enriched version. Preserve the creative rationale.
+Execute the loaded domain's workflow. The domain file contains all rules, formulas, tables, and output specifications.
 
-## Step 2: Interactive mode (no args)
+## Step 3: Write output
 
-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.
+Write `typography.md` + optional CSS file to the resolved output path. Display scale summary and offer next steps.
 </process>

package/gsp/skills/gsp-typography/chunk-format.md

@@ -0,0 +1,79 @@
+# Chunk Format Reference
+
+Standard format for all GSP phase output files. Chunks are the primary output — agents write chunks directly, not monoliths.
+
+## File Format
+
+Every chunk follows this structure:
+
+    # {Section/Component/Screen Name}
+
+    > Phase: {phase} | Brand/Project: {name} | Generated: {DATE}
+
+    ---
+
+    {Content for this chunk}
+
+    ---
+
+    ## Related
+
+    - [{Related chunk name}]({relative-path-to-related-chunk})
+
+## Naming Conventions
+
+- **Singular, kebab-case, lowercase:** "Buttons" → `button.md`, "Date Picker" → `date-picker.md`
+- **Screen files:** `screen-{NN}-{kebab-case-name}.md` (e.g., `screen-01-home.md`)
+
+## INDEX.md Format
+
+Each phase directory gets an INDEX.md manifest:
+
+    # {Phase Name}
+    > Phase: {phase} | Brand/Project: {name} | Generated: {DATE}
+
+    | Chunk | File | ~Lines |
+    |-------|------|--------|
+    | {Section} | [{filename}](./{filename}) | ~{N} |
+
+Lightweight — just a lookup table. No prose.
+
+## Rules
+
+- **Chunks are primary output** — agents write chunks directly to the phase directory
+- **No monoliths** — do not write a single large file then re-chunk it
+- **Size target:** 50-200 lines per chunk
+- **Self-contained:** each chunk must be understandable without loading other chunks
+- **Cross-references:** `## Related` section uses relative paths to related chunks
+- **Idempotent:** re-running a phase regenerates all chunks in that phase directory
+
+## Output Budgets
+
+Context is finite. Every line in a chunk is consumed by downstream agents. Budget accordingly.
+
+### Per-chunk budgets
+
+| Chunk type | Target | Hard max | Notes |
+|-----------|--------|----------|-------|
+| Phase chunk (design, research, etc.) | 50-150 lines | 200 lines | Self-contained, one concept per chunk |
+| INDEX.md | 10-30 lines | 50 lines | Lookup table only, no prose |
+| BUILD-LOG.md | 50-100 lines | 150 lines | Summary + tables, not narrative |
+| Component spec | 30-80 lines | 120 lines | Props, states, behavior — not full implementation |
+| Screen spec | 80-150 lines | 200 lines | Layout, components, interactions, states |
+
+### Per-phase budgets (total across all chunks)
+
+| Phase | Target total | Hard max | Typical chunks |
+|-------|-------------|----------|----------------|
+| Brief | 100-200 lines | 300 lines | 2-4 |
+| Research | 200-400 lines | 600 lines | 5-8 |
+| Design | 300-600 lines | 800 lines | 6-12 |
+| Critique | 100-200 lines | 300 lines | 2-4 |
+| Build log | 50-100 lines | 150 lines | 1 |
+| Review | 100-200 lines | 300 lines | 2-4 |
+
+### Terminal output (inline skills)
+
+- **Diagnostic** (doctor, progress): uncapped — user needs to see it, does not persist in agent context
+- **Greeting/status** (start): 20-40 lines
+- **Phase transitions**: 10-20 lines

package/gsp/skills/gsp-typography/domains/pairing.md

@@ -0,0 +1,109 @@
+# Domain: Font Pairing & Enrichment
+
+Font pairing exploration and enrichment of existing typography files with technical precision.
+
+---
+
+## Enrich Mode (`--enrich`)
+
+Read existing `{BRAND_PATH}/identity/typography.md`. Extract chosen typefaces and scale direction.
+
+Load `${CLAUDE_SKILL_DIR}/references/typography-scales.md` for domain expertise (section 7: Font Pairing Principles).
+
+### What to add
+
+Enrich the file with:
+- Mathematical 9-level type scale from the chosen ratio (delegate calculation to `domains/scale.md` rules)
+- 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 the enriched version. **Preserve the creative rationale** from the original file.
+
+---
+
+## Font Pairing Exploration
+
+When the user wants to explore pairings (interactive mode, "Explore pairings" path):
+
+### Design judgment criteria
+
+Match fonts based on:
+- **Voice** — authoritative, friendly, technical, editorial, playful
+- **Format** — long-form reading, dashboard/data, marketing/landing, documentation
+- **Personality** — the brand's character and how type reinforces it
+
+### Pairing strategies
+
+**1. Contrast** — Pair fonts that differ in classification
+- Serif heading + sans-serif body (most reliable)
+- Geometric sans + humanist sans
+- Slab serif + thin sans
+
+**2. Harmony** — Pair fonts sharing structural characteristics
+- Match x-height, stroke width, overall proportions
+- Different styles from same era or tradition
+
+**3. Superfamily** — Use a designed family spanning classifications
+- IBM Plex: Sans, Serif, Mono
+- Roboto + Roboto Slab + Roboto Mono
+- Source Sans + Source Serif + Source Code
+
+### What to match
+- **x-height** — most important metric; mismatched x-heights look unbalanced
+- **Stroke contrast** — both high-contrast or both low-contrast
+- **Overall proportions** — similar width tendencies
+- **Cap height** — for text set alongside each other
+
+### What to contrast
+- **Weight** — light heading + bold body or vice versa
+- **Classification** — serif vs sans, geometric vs humanist
+- **Mood** — formal vs casual, mechanical vs organic
+
+### Reliable pairings for product UI
+
+| Heading | Body | Mono | Vibe |
+|---------|------|------|------|
+| Inter | Inter | JetBrains Mono | Neutral, flexible |
+| Geist Sans | Geist Sans | Geist Mono | Modern, precise |
+| IBM Plex Sans | IBM Plex Sans | IBM Plex Mono | Enterprise, reliable |
+| Work Sans | Source Serif 4 | Source Code Pro | Editorial + functional |
+| Space Grotesk | Inter | JetBrains Mono | Technical, contemporary |
+| Fraunces | Inter | Fira Code | Retro-modern editorial |
+| DM Sans | DM Serif Display | DM Mono | Cohesive family |
+
+### Pairing rules
+1. Never pair more than 3 typefaces in a project
+2. One font should clearly lead — the other supports
+3. Test pairings at actual sizes, not just in specimen
+4. Ensure both fonts have the weights you need
+5. Superfamilies are the safest choice for design systems
+
+---
+
+## Font Sourcing
+
+### Google Fonts
+- Free, widely available, automatic subsetting
+- Provide full `@import` URL with selected weights
+- Good for prototyping and production
+
+### Fontsource (npm packages)
+- `@fontsource/inter`, `@fontsource-variable/inter`
+- Self-hosted via npm — no external requests
+- Tree-shakeable weight/subset imports
+- Recommended for Next.js, Vite, and other bundled apps
+
+### Local / Premium
+- Self-hosted WOFF2 files for licensed fonts
+- `@font-face` declarations with `font-display: swap`
+- Subsetting via `unicode-range` for performance
+
+### Loading strategy
+
+**Next.js:** Use `next/font/google` or `next/font/local` — automatic optimization, no layout shift
+**Fontsource:** Import in global CSS or layout component
+**Self-hosted:** Preload critical fonts, use `font-display: swap` for body and `fallback` for headings

package/gsp/skills/gsp-typography/domains/scale.md

@@ -0,0 +1,227 @@
+# Domain: Type Scale Generation
+
+Mathematical type scale generation — the core engine for all typography modes that produce a numeric scale.
+
+---
+
+## Scale Levels
+
+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.
+
+Default base size: 16px unless overridden by `--base`.
+
+---
+
+## Fluid clamp() Formulas
+
+For headings (Display through H4), generate `clamp()` values scaling between 375px (mobile) and 1280px (desktop). Body and below stay fixed.
+
+**Formula:**
+```
+slope = (desktopSize - mobileSize) / (1280 - 375)
+intercept = mobileSize - slope * 375
+clamp(mobileSize_rem, intercept_rem + slope * 100vw, desktopSize_rem)
+```
+
+Mobile uses a ratio stepped down from the chosen ratio. The step-down map:
+
+```
+golden-ratio (1.618)     -> perfect-fifth (1.500)
+perfect-fifth (1.500)    -> augmented-fourth (1.414)
+augmented-fourth (1.414) -> perfect-fourth (1.333)
+perfect-fourth (1.333)   -> major-third (1.250)
+major-third (1.250)      -> minor-third (1.200)
+minor-third (1.200)      -> major-second (1.125)
+major-second (1.125)     -> minor-second (1.067)
+minor-second (1.067)     -> minor-second (1.067)  [floor]
+```
+
+WCAG 1.4.4 constraint: clamp() min and max must be rem-based — never pure vw. The vw component does not respond to browser zoom.
+
+If `--no-fluid` is passed, skip clamp() and use breakpoint-only `@media` rules instead.
+
+---
+
+## Line Height (4px Grid Snapped)
+
+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.
+
+Grid unit defaults to 4px. Override with `--grid N`.
+
+---
+
+## Letter Spacing (Size-Dependent Curve)
+
+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 |
+
+---
+
+## Weight Mapping
+
+Default weight mapping (adjustable via `--weights`):
+
+| Level | Weight | Rationale |
+|-------|--------|-----------|
+| Display | 700 | Bold headlines |
+| H1 | 700 | Bold page titles |
+| H2 | 600 | Semi-bold sections |
+| H3 | 600 | Semi-bold subsections |
+| H4 | 500 | Medium minor headings |
+| body-large | 400 | Regular lead text |
+| body | 400 | Regular body |
+| body-small | 400 | Regular secondary |
+| caption | 400 | Regular labels |
+| overline | 500 | Medium all-caps |
+
+---
+
+## CSS Output
+
+### Tailwind / shadcn mode (default)
+
+Write `tailwind.typography.css` — Tailwind v4 `@theme` extension:
+- Header comment with font, ratio, base size, generated date
+- Google Fonts `@import` (or font loading note)
+- `--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` for headings, `pretty` for paragraphs
+
+### Vanilla mode (`--vanilla`)
+
+Write `typescale.css` instead — plain CSS custom properties (no Tailwind syntax):
+- Google Fonts import
+- `:root` with font families, weights, fluid font sizes (clamp, rem-based), 4px grid-snapped line heights, letter spacing, vertical rhythm tokens
+
+---
+
+## Accessibility (WCAG 2.2 AA)
+
+- Body line-height >= 1.5 (SC 1.4.12)
+- Layout must survive SC 1.4.12 text spacing overrides (line-height 1.5x, paragraph spacing 2x, letter-spacing 0.12x, word-spacing 0.16x)
+- Fluid type min/max must be rem-based for zoom compliance (SC 1.4.4)
+- Minimum practical font size: 12px
+
+---
+
+## Invocation Modes
+
+### Direct: `/gsp-typography "Inter" --ratio 1.25`
+
+Parse from args:
+- **Font family** — quoted string
+- **--ratio** — scale ratio
+- **--secondary** — optional secondary font
+- **--mono** — optional monospace font
+- **--base** — base size in px (default: 16)
+- **--weights** — weight list (e.g., `400,500,700`)
+- **--line-height** — base line-height override (default: 1.5)
+- **--vanilla** — plain CSS output instead of Tailwind
+- **--no-fluid** — breakpoint steps instead of clamp()
+- **--grid N** — vertical rhythm grid unit in px (default: 4)
+
+Generate scale, write `typography.md` + CSS file.
+
+### From style: `/gsp-typography --from-style cyberpunk`
+
+Read the style preset YAML from `${CLAUDE_SKILL_DIR}/../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).
+
+### List ratios: `/gsp-typography --list-ratios`
+
+Display all named ratios with values and practical context:
+
+```
+  /gsp-typography — 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-typography "Inter" --ratio 1.25
+  Preview interactively: https://typescale.com/
+```
+
+Stop here. Do not write any files.
+
+### Preview: `/gsp-typography --preview "Inter" --ratio 1.25`
+
+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.
+
+Stop here — do not write any files.
+
+---
+
+## Output Path
+
+### Within a brand identity
+If a brand context exists (`.design/branding/{brand}/`): write to `{BRAND_PATH}/identity/`.
+
+### Standalone (no brand context)
+Write to `.design/branding/_typescale/`. Create minimal directory structure.
+
+---
+
+## Completion
+
+Show: header (`/gsp-typography — {font} @ {ratio}`), file tree (typography.md + CSS file), scale summary (ratio, range, levels, fluid, grid). Then offer next steps via `AskUserQuestion`: Generate palette -> `/gsp-color`, Apply a full style -> `/gsp-style`, Continue to identity -> `/gsp-brand-identity`, Done.

package/gsp/skills/gsp-typography/domains/system.md

@@ -0,0 +1,108 @@
+# Domain: Full Type System (Interactive Mode)
+
+Complete typography system direction — combines scale generation, font pairing, and loading strategy into a single interactive workflow.
+
+---
+
+## Interactive Questions
+
+Use `AskUserQuestion` for each step. One decision per question.
+
+### 1. Starting point
+
+- **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"
+
+If "Explore pairings": load `domains/pairing.md` and follow font pairing exploration workflow. Ask about voice (authoritative/friendly/technical/editorial), format (long-form/dashboard/marketing).
+
+If "From a style preset": route to `domains/scale.md` --from-style workflow.
+
+### 2. Fonts (if "I have fonts chosen")
+
+Ask for primary font family. Offer popular options:
+- Inter, Geist Sans, Plus Jakarta Sans, DM Sans, Space Grotesk, Instrument Serif, Custom
+
+### 3. Scale ratio
+
+- **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"
+
+Link https://typescale.com/ for interactive preview.
+
+### 4. Base size
+
+Default 16px unless user specifies otherwise.
+
+---
+
+## Output Structure
+
+Write `typography.md` as a foundation chunk per `chunk-format.md`. Target: 80-120 lines.
+
+### Required sections
+
+1. **Font Families** (~10 lines)
+   - Primary, secondary (if any), monospace
+   - Google Fonts URL or loading strategy
+   - Fallback stacks
+
+2. **Type Scale** (~30 lines)
+   - All 10 levels in a table: Level, px, rem, clamp(), Weight, Line Height, Letter Spacing, Tailwind class
+   - Base size and ratio noted
+
+3. **Fluid Type** (~10 lines)
+   - Mobile viewport (375px) and desktop viewport (1280px)
+   - Mobile ratio step-down
+   - clamp() formula explanation
+
+4. **Weights** (~5 lines)
+   - Available weights and their roles
+   - Heading weight, body weight, accent weight
+
+5. **Vertical Rhythm** (~5 lines)
+   - Grid unit (4px)
+   - Body line-height anchor
+   - Spacing tokens derived from line-height
+
+6. **Letter Spacing** (~5 lines)
+   - Curve summary (negative for display, zero for body, positive for captions)
+   - Overline/all-caps tracking
+
+7. **Loading Strategy** (~10 lines)
+   - Recommended approach (next/font, Fontsource, self-hosted)
+   - `font-display` values
+   - Performance budget
+
+8. **Accessibility** (~5 lines)
+   - WCAG 2.2 AA compliance notes
+   - Body line-height >= 1.5
+   - SC 1.4.12 text spacing override safety
+
+9. **Modern CSS** (~5 lines)
+   - `text-wrap: balance` for headings
+   - `text-wrap: pretty` for paragraphs
+   - `font-optical-sizing: auto` if variable font
+   - Dark mode antialiasing (`-webkit-font-smoothing: antialiased`)
+
+10. **Related** (~5 lines)
+    - Links to palette, style, identity skills
+
+---
+
+## CSS File
+
+Also write a CSS file alongside `typography.md` — delegate format to `domains/scale.md` CSS output rules. Default: `tailwind.typography.css` (Tailwind v4 @theme). With `--vanilla`: `typescale.css` (plain custom properties).
+
+---
+
+## Completion
+
+Display scale preview table. Offer next steps via `AskUserQuestion`:
+- Generate palette -> `/gsp-color`
+- Apply a full style -> `/gsp-style`
+- Continue to identity -> `/gsp-brand-identity`
+- Done