get-shit-pretty 0.6.2 → 0.7.0

package/gsp/skills/gsp-style/styles/sketch.yml

@@ -54,5 +54,91 @@ dark_mode:
     surface: "#2D2D48"
     on-background: "#FDFBF7"
 
+intensity:
+  variance: 8     # wobbly borders, random rotations, asymmetric radii, tape/tack decorations
+  motion: 4       # subtle jiggle hovers and bounce on decorations — motion is casual, not cinematic
+  density: 5      # layered but breathable — paper texture + dashed accents + scattered decorations
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-md} — hard offset, zero blur"
+    radius: "wobbly — border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px"
+    background: "{color.surface}"
+    decoration: "tape (translucent gray bar, rotated) OR tack (red circle at top center) OR none"
+    variants: "post-it yellow (#fff9c4) for features, speech-bubble tail for testimonials"
+  button-primary:
+    background: "{color.surface}"
+    border: "border-[3px] solid {shape.border-color}"
+    shadow: "{elevation.shadow-md}"
+    text: "{color.on-background}, {typography.font-family-secondary}"
+    radius: "wobbly oval — custom irregular border-radius"
+    fill: "hover fills {color.accent}, text turns white"
+  button-secondary:
+    background: "muted (#e5e0d8)"
+    border: "border-[3px] solid {shape.border-color}"
+    shadow: "{elevation.shadow-sm}"
+    text: "{color.on-background}"
+    radius: "wobbly oval"
+    fill: "hover fills {color.secondary} (blue ballpoint)"
+  input:
+    border: "{shape.border-width} solid {shape.border-color}"
+    radius: "wobbly — irregular border-radius matching button aesthetic"
+    background: "{color.surface}"
+    focus: "border-{color.secondary}, ring-2 ring-{color.secondary}/20"
+    font: "{typography.font-family-secondary} — handwritten feel in inputs"
+  badge:
+    shape: "wobbly pill, {shape.border-width} dashed border"
+    text: "handwritten font, text-sm, accent or secondary color"
+    decoration: "rotate-2 to rotate-4, looks like a torn tag"
+  nav:
+    logo: "heading font (Kalam), bold, slight rotation"
+    links: "handwritten font, hover adds wavy underline SVG"
+    mobile: "doodled hamburger icon with wobbly circle background"
+  layout:
+    archetype: "sketchbook-collage"
+    max-width: "max-w-5xl — contained like a sketchbook"
+    section-spacing: "py-20 — consistent rhythm"
+    grid-gap: "gap-8"
+    asymmetry: "small rotations on cards (rotate-1, -rotate-2), overlapping avatar circles"
+    surfaces: "dot-grid paper texture (radial-gradient 24px spacing), dashed line dividers"
+    decoration: "hand-drawn SVG arrows, squiggly connectors, corner frame marks, tape strips"
+
+constraints:
+  never:
+    - "standard border-radius classes alone — always use irregular wobbly values"
+    - "soft blur shadows — only hard-offset shadows (zero blur)"
+    - "clean geometric shapes — everything organic, hand-drawn, imperfect"
+    - "sans-serif body fonts — handwritten fonts (Patrick Hand, Kalam) are mandatory"
+    - "pure black (#000000) — use soft pencil black (#2D2D2D or #2D3748)"
+    - "corporate or sterile feel — every element should look sketched"
+    - "neon or saturated technology colors — pencil blacks, paper whites, correction red, ballpoint blue"
+    - "smooth transitions above 200ms — interactions should feel snappy and casual"
+  always:
+    - "wobbly irregular border-radius on every container, button, and card"
+    - "hard-offset shadows (2-8px offset, zero blur) on elevated elements"
+    - "paper dot-grid texture (radial-gradient) on page background"
+    - "handwritten fonts for all visible text (Kalam headings, Patrick Hand body)"
+    - "at least one tape strip, thumbtack, or hand-drawn arrow decoration per page"
+    - "dashed borders on secondary elements and dividers"
+    - "thick borders (border-2 minimum, border-3 or border-4 for emphasis)"
+
+effects:
+  interaction-vocabulary: [jiggle-nudge, press-flat, scribble-reveal, doodle-fill]
+  hover:
+    card: "jiggle-nudge — rotate(1deg) or rotate(-1deg), slight lift"
+    button: "doodle-fill — background fills {color.accent}, shadow reduces to 2px 2px"
+    link: "scribble-reveal — wavy underline SVG appears beneath text"
+    badge: "jiggle-nudge — rotation increases, slight bounce"
+  active:
+    button: "press-flat — shadow disappears, translate(4px, 4px) — pressed into paper"
+  focus:
+    input: "border-{color.secondary}, ring-2 ring-{color.secondary}/20 — subtle blue glow"
+    general: "border-{color.accent} — border-based focus, maintains wobbly shape"
+  transition: "duration-100 to duration-200, ease — fast and casual"
+  ambient:
+    - "gentle-bounce — decorative elements (tacks, arrows) bob subtly (3s ease-in-out)"
+    - "pencil-wobble — wobbly borders shimmer slightly on idle (optional, reduced motion aware)"
+
 compatibility: [organic, playful-geometric]
 clashes: [professional, enterprise, modern-dark]

package/gsp/skills/gsp-style/styles/swiss-minimalist.yml

@@ -55,5 +55,74 @@ dark_mode:
     border-color: "#333333"
     muted: "#9CA3AF"
 
+intensity:
+  variance: 2     # strict grid law, asymmetric but mathematically precise
+  motion: 2       # instant mechanical snaps, no fluidity
+  density: 3      # generous negative space as active structural element
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "none — depth from texture overlay only"
+    radius: "0px"
+    background: "{color.surface} or {color.background}"
+    padding: "p-8 to p-12 — generous and uniform"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    text: "uppercase, weight {typography.font-weight-heading}, tracking-wide"
+    radius: "0px"
+  button-secondary:
+    background: "transparent"
+    border: "2px solid {color.primary}"
+    text: "uppercase, weight {typography.font-weight-heading}, tracking-wide"
+    radius: "0px"
+  input:
+    border: "border-b 2px solid {shape.border-color}"
+    radius: "0px"
+    background: "{color.background}"
+    focus: "border-color shifts to {color.secondary} — no glow, no ring"
+  badge:
+    shape: "0px radius, {shape.border-width} border"
+    text: "uppercase, tracking-widest, text-xs, font-medium"
+  nav:
+    style: "clean horizontal with visible border-bottom separator"
+    links: "uppercase tracking-wider, hover shifts to {color.secondary}"
+  layout:
+    archetype: "asymmetric-grid"
+    max-width: "max-w-7xl"
+    section-spacing: "py-16 to py-32"
+    grid-gap: "gap-6 to gap-8"
+    surfaces: "grid pattern (24px) and dot matrix at 3-4% opacity — structure visible"
+    decoration: "numbered section labels in {color.secondary}, geometric Bauhaus shapes"
+
+constraints:
+  never:
+    - "rounded corners of any size — 0px radius everywhere"
+    - "gradient backgrounds — solid color blocks only"
+    - "drop shadows — depth from pattern and typography only"
+    - "center-aligned body text — flush-left ragged-right always"
+    - "decorative imagery competing with type — typography is the interface"
+    - "ease-in-out or spring easing — mechanical linear or ease-out only"
+    - "more than one accent color — monochrome plus {color.secondary} signal only"
+  always:
+    - "visible grid structure through borders and texture patterns"
+    - "uppercase on headings, labels, and buttons"
+    - "extreme type scale contrast between headline and body"
+    - "flush-left text alignment to grid"
+    - "active negative space framing content"
+    - "texture overlays (grid, dots, noise) on backgrounds for tactile depth"
+
+effects:
+  interaction-vocabulary: [color-invert, snap-fill, scale-lift, icon-rotate]
+  hover:
+    card: "color-invert — background snaps to {color.primary} or {color.secondary}, text inverts"
+    button: "color-invert — black/white swap or shift to {color.secondary}"
+  active:
+    button: "scale-lift — translate-y-[-1px], instant mechanical press"
+  focus:
+    general: "ring-2 ring-{color.secondary} ring-offset-2 — high contrast"
+  transition: "duration-100 to duration-200, ease-out or linear"
+
 compatibility: [bento-grid]
 clashes: [neubrutalism, cyberpunk, vaporwave]

package/gsp/skills/gsp-style/styles/terminal.yml

@@ -60,5 +60,88 @@ dark_mode:
     background: "#010409"
     surface: "#0D1117"
 
+intensity:
+  variance: 3     # rigid character grid, tmux-like splits, uniform pane structure
+  motion: 4       # cursor blink, typewriter effect, subtle glitch — no cinematic movement
+  density: 7      # dense pane layout, tight monospace text, information-heavy
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "none — flat panes, no elevation illusion"
+    radius: "{shape.border-radius-sm}"
+    background: "{color.surface}"
+    header: "title bar with ASCII decoration (+--- TITLE ---+) or solid inverted bar"
+  button-primary:
+    background: "{color.primary}"
+    border: "{shape.border-width} solid {color.primary}"
+    shadow: "none"
+    text: "uppercase, monospace, {color.on-primary}, bracketed ([ INITIATE ])"
+    radius: "{shape.border-radius-sm}"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "none"
+    text: "uppercase, monospace, {color.on-background}"
+    radius: "{shape.border-radius-sm}"
+  input:
+    border: "none — prompt-style (user@host:~$ prefix before input)"
+    radius: "0px"
+    background: "transparent"
+    focus: "blinking block cursor, no ring, no outline"
+    font: "monospace always"
+  badge:
+    shape: "0px radius, bordered"
+    text: "monospace uppercase, status codes ([OK], [ERR], [WARN])"
+    decoration: "color matches status — green success, red error, amber warning"
+  nav:
+    style: "terminal tab bar with active/inactive pane indicators"
+    background: "{color.background}"
+    border: "border-b {shape.border-width} {shape.border-color}"
+    links: "monospace, green text, > prefix on hover"
+  layout:
+    archetype: "terminal-panes"
+    max-width: "max-w-6xl"
+    section-spacing: "py-16 to py-24"
+    grid-gap: "gap-4 to gap-6"
+    surfaces: "CRT scanline overlay (faint, 3-4px repeating), text phosphor glow"
+    decoration: "ASCII art for logos, progress bars ([||||||.....]), shell prompt prefixes"
+    dividers: "ASCII rules (===============, ----------------) between sections"
+
+constraints:
+  never:
+    - "non-monospace fonts — every character must be monospaced, no exceptions"
+    - "border-radius above 8px — tight mechanical edges only"
+    - "soft or colored shadows — no drop shadows, no elevation illusion"
+    - "background images or photos — text and ASCII only"
+    - "gradient backgrounds — solid dark colors only"
+    - "smooth organic easing — instant or linear transitions"
+    - "rounded pill buttons — bracketed text or inverted blocks only"
+    - "light mode — dark terminal background is mandatory"
+  always:
+    - "monospace font on every element (JetBrains Mono, Fira Code, or VT323)"
+    - "terminal green ({color.primary}) as primary text and accent color"
+    - "phosphor text glow (text-shadow: 0 0 5px rgba(green, 0.5))"
+    - "ASCII decorations for dividers, logos, and structural elements"
+    - "shell prompt prefixes (>, $, ~) on interactive elements"
+    - "status code badges ([OK], [ERR]) for state indication"
+    - "CRT scanline overlay for atmosphere"
+
+effects:
+  interaction-vocabulary: [video-invert, cursor-blink, type-reveal, glitch-offset]
+  hover:
+    card: "border color brightens to {color.primary}"
+    button: "video-invert — background fills {color.primary}, text becomes {color.on-primary}"
+    link: "> prefix appears, color shifts to {color.primary}, no underline decoration"
+  active:
+    button: "translate-y-[1px], brief rapid blink"
+  focus:
+    general: "no ring — blinking cursor and inverted-video focus indication"
+  transition: "duration-0 to duration-100, linear — instant digital response"
+  ambient:
+    - "cursor-blink — block cursor blinks 1s step-end infinite"
+    - "type-reveal — hero text appears character-by-character"
+    - "scanline-hum — CRT overlay at constant low opacity"
+
 compatibility: [bento-grid, micro-interactions]
 clashes: [glassmorphism, liquid-glass, vaporwave]

package/gsp/skills/gsp-style/styles/vaporwave.yml

@@ -57,5 +57,89 @@ dark_mode:
     background: "#0D0019"
     surface: "#1A0533"
 
+intensity:
+  variance: 7     # skewed buttons, rotated icon diamonds, perspective grids, alternating timelines
+  motion: 7       # glow amplification, un-skew transforms, CRT ambient, continuous orb drift
+  density: 5      # balanced — neon effects need breathing room to read against dark void
+
+patterns:
+  card:
+    border: "1px solid {color.primary}/30, border-t-2 {color.secondary} accent laser"
+    shadow: "{elevation.shadow-md}"
+    radius: "{shape.border-radius-sm}"
+    background: "{color.surface}/80 with backdrop-blur-md"
+    header: "cyan title with drop-shadow glow, monospace description"
+  button-primary:
+    background: "transparent"
+    border: "2px solid {color.secondary}"
+    shadow: "none resting, 0 0 20px {color.secondary} on hover"
+    text: "uppercase, tracking-wider, font-mono, {color.secondary}"
+    radius: "0px"
+    shape: "-skew-x-12 transform, inner content counter-skewed"
+  button-secondary:
+    background: "{color.primary}"
+    border: "2px solid {color.primary}"
+    shadow: "none"
+    text: "uppercase, tracking-wider, white"
+    radius: "0px"
+    shape: "-skew-x-12 transform"
+  input:
+    border: "border-b-2 {color.primary} — underline only"
+    radius: "0px"
+    background: "black"
+    focus: "border shifts to {color.secondary}, glow shadow appears"
+    font: "monospace, {color.secondary} text"
+  badge:
+    shape: "-skew-x-12, 0px radius, neon border"
+    text: "uppercase tracking-widest text-xs font-mono"
+    decoration: "neon glow shadow matching border color"
+  nav:
+    style: "terminal window chrome with colored dots (magenta, cyan, orange)"
+    background: "dark glass with backdrop-blur"
+    links: "monospace uppercase tracking-wider, glow on hover"
+  layout:
+    archetype: "neon-void"
+    max-width: "max-w-7xl"
+    section-spacing: "py-20 to py-32"
+    grid-gap: "gap-8 to gap-12"
+    surfaces: "CRT scanlines overlay (4px repeating), perspective grid floor, floating sun orb"
+    decoration: "RGB chromatic aberration, dot patterns (magenta 1px), gradient text fills"
+    depth: "z-layered — grid z-0, sun z-1, content z-10, scanlines z-50"
+
+constraints:
+  never:
+    - "light backgrounds — dark void ({color.background}) is mandatory"
+    - "subtle or muted colors — all accents at maximum saturation"
+    - "organic easing curves — linear or instant for digital feel"
+    - "minimalist or sparse layouts — dense with effects, borders, and overlays"
+    - "removing CRT scanline overlay — always present for atmosphere"
+    - "soft diffused shadows — all shadows are colored neon glows"
+    - "serif fonts — geometric sans (Orbitron) and monospace (Share Tech Mono) only"
+  always:
+    - "CRT scanline overlay fixed across entire viewport"
+    - "perspective grid background in at least one section"
+    - "gradient text fill (sunset: orange via magenta to cyan) on hero headline"
+    - "skewed buttons with -skew-x-12 transform"
+    - "neon glow shadows (colored, not black) on interactive elements"
+    - "terminal/window chrome with colored dots on at least one container"
+    - "IRC-style angle bracket formatting on testimonials"
+
+effects:
+  interaction-vocabulary: [un-skew, glow-explode, diamond-spin, neon-border-shift]
+  hover:
+    card: "neon-border-shift — border opacity increases, -translate-y-2, shadow deepens"
+    button: "un-skew — skew returns to 0, bg fills neon, text inverts to black, glow explodes 2-3x"
+    icon: "diamond-spin — rotate-45 container spins to rotate-90"
+    link: "neon-border-shift — underline appears, color shifts, glow added"
+  active:
+    button: "scale-95, glow dims slightly"
+  focus:
+    general: "ring-2 ring-{color.secondary} with ambient glow"
+  transition: "duration-200, ease-linear — fast, digital, unnatural"
+  ambient:
+    - "orb-drift — floating sun gradient (600px, blur-100px) slow drift"
+    - "scanline-flicker — CRT overlay at constant opacity"
+    - "icon-pulse — animate-pulse on placeholder icons"
+
 compatibility: [kinetic-typography, aurora-gradients]
 clashes: [swiss-minimalist, professional, terminal]

package/gsp/skills/gsp-style/styles/web3.yml

@@ -61,5 +61,87 @@ dark_mode:
     surface: "#0F1115"
     on-background: "#FFFFFF"
 
+intensity:
+  variance: 5     # asymmetric pricing scale, corner border accents, but grid-disciplined overall
+  motion: 7       # spinning orbitals, floating cards, pulsing indicators, glow intensification
+  density: 5      # spacious — generous py-24 sections, but data-heavy stat displays
+
+patterns:
+  card:
+    border: "{shape.border-width} solid rgba(255,255,255,0.10)"
+    shadow: "none resting, {elevation.shadow-md} on hover"
+    radius: "{shape.border-radius-md}"
+    background: "{color.surface}"
+    hover: "border shifts to {color.primary}/50, orange glow shadow appears, -translate-y-1"
+  button-primary:
+    background: "gradient from {color.secondary} to {color.primary}"
+    border: "none"
+    shadow: "{glow.primary}"
+    text: "white, bold, uppercase, tracking-wider"
+    radius: "{shape.border-radius-lg}"
+  button-secondary:
+    background: "transparent"
+    border: "2px solid rgba(255,255,255,0.20)"
+    shadow: "none"
+    text: "white, medium weight"
+    radius: "{shape.border-radius-lg}"
+  input:
+    border: "border-b-2 rgba(255,255,255,0.20) — bottom border only"
+    radius: "0px"
+    background: "rgba(0,0,0,0.50)"
+    focus: "border shifts to {color.primary}, orange glow shadow below, no outline"
+    font: "monospace for data precision"
+  badge:
+    shape: "rounded-lg or rounded-full, orange-tinted glass"
+    text: "monospace uppercase tracking-widest text-xs"
+    decoration: "animate-ping dot for live status indicators"
+  nav:
+    style: "minimal dark bar with pill CTA"
+    background: "transparent or glass (backdrop-blur-lg + bg-black/40)"
+    links: "monospace, muted white, hover shifts to {color.primary}"
+  layout:
+    archetype: "blockchain-grid"
+    max-width: "max-w-7xl"
+    section-spacing: "py-24"
+    grid-gap: "gap-8 to gap-12"
+    surfaces: "grid pattern (50px cells, fading vignette mask) — void is never flat"
+    decoration: "spinning orbital rings, gradient text fills (orange to gold), corner border accents"
+    depth: "radial gradient blurs ({color.primary} at 5-10% opacity, blur-[120px]) for ambient glow"
+
+constraints:
+  never:
+    - "light backgrounds — true void ({color.background}) is mandatory"
+    - "pure black shadows — all shadows use orange/gold tints"
+    - "flat dark backgrounds without grid or radial texture — void must breathe"
+    - "serif fonts — geometric sans (Space Grotesk) and monospace (JetBrains Mono) only"
+    - "hard-line section dividers (<hr>) — spacing and background alternation separate sections"
+    - "muted or desaturated orange — Bitcoin orange at full intensity always"
+  always:
+    - "colored glow shadows (orange/gold tinted) on all interactive elements"
+    - "gradient text fill (orange to gold) on hero headline keywords"
+    - "grid pattern background on at least one section"
+    - "radial blur blobs for ambient background glow"
+    - "pill-shaped (rounded-full) primary buttons"
+    - "monospace font on stats, prices, badges, and technical labels"
+    - "corner border accents on at least one card type"
+
+effects:
+  interaction-vocabulary: [glow-intensify, scale-lift, pulse-ping, orbital-spin]
+  hover:
+    card: "glow-intensify — border shifts orange/50, orange glow shadow appears, -translate-y-1"
+    button: "scale-lift — scale-105, glow radius and opacity increase"
+    image: "scale-lift — scale-110 + contrast-125"
+    icon-container: "glow-intensify — glow shadow appears (0 0 20px rgba(234,88,12,0.4))"
+  active:
+    button: "scale-95, glow dims"
+  focus:
+    general: "ring-2 ring-{color.primary} focus-visible"
+  transition: "duration-200 to duration-300, cubic-bezier(0.4, 0, 0.2, 1)"
+  ambient:
+    - "orbital-spin — outer ring 10s linear infinite, inner ring 15s reverse"
+    - "pulse-ping — animate-ping on status dots for live network feel"
+    - "card-float — floating stat cards animate-bounce with staggered delays (3-4s)"
+    - "orb-drift — hero 3D orb floats translateY(-20px) over 8s ease-in-out infinite"
+
 compatibility: [cyberpunk, modern-dark]
 clashes: [botanical, retro, sketch]

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

@@ -0,0 +1,70 @@
+---
+name: gsp-typography
+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>
+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 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
+
+Visual companion: https://typescale.com/ — users can preview ratios interactively there, then feed the values here.
+</context>
+
+<objective>
+Build a production-ready typography system — scale, pairing, fluid type, vertical rhythm, and font 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}/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
+- 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: Parse mode
+
+| 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: Load domain
+
+Read the domain file from `${CLAUDE_SKILL_DIR}/domains/{domain}.md`.
+
+For scale modes, also read `${CLAUDE_SKILL_DIR}/references/typography-scales.md`.
+
+## Step 2: Follow domain framework
+
+Execute the loaded domain's workflow. The domain file contains all rules, formulas, tables, and output specifications.
+
+## Step 3: Write output
+
+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