get-shit-pretty 0.5.1 → 0.5.2

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

@@ -34,15 +34,12 @@ Generate a production-ready typography system with fluid responsive sizing, vert
 
 <rules>
 - Always use `AskUserQuestion` for user interaction — never prompt via plain text
-- Scales are deterministic — same inputs always produce the same output
 - 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)
-- When loading from a style preset, extract only typography-related tokens
 - 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
-- Fluid type clamp() must always use rem-based min/max — never pure vw (breaks zoom per WCAG 1.4.4)
 </rules>
 
 <process>
@@ -291,133 +288,17 @@ If a brand context exists (`.design/branding/{brand}/`):
 
 Write `{OUTPUT_PATH}/typography.md` as a foundation chunk per `references/chunk-format.md`:
 
-```markdown
-# Typography
+The typography.md chunk must include these sections with calculated values from Step 3:
 
-> Phase: identity | Brand: {name} | Generated: {DATE}
-
----
-
-## Font Families
-
-| Role | Family | Variable | Source | Fallback stack |
-|------|--------|----------|--------|----------------|
-| Primary | {family} | {yes/no} | Google Fonts | {system fallbacks} |
-| Secondary | {family or "—"} | {yes/no} | {source} | {system fallbacks} |
-| Monospace | {family or "Geist Mono"} | {yes/no} | Google Fonts | ui-monospace, monospace |
-
-**Google Fonts URL:**
-`https://fonts.googleapis.com/css2?family={primary}:wght@{weights}&family={mono}:wght@400;700&display=swap`
-
-**Self-hosting recommended** for production — eliminates third-party DNS lookup, improves GDPR compliance, and allows precise subsetting. Use WOFF2 only.
-
-**Performance budget:** < 100KB total font weight, 2-3 weights max. If using a variable font, a single file replaces all static weights (< 150KB).
-
-## Type Scale
-
-Base: {base}px | Ratio: {ratio} ({ratio name}) | Grid: {grid}px
-
-| Level | px | rem | Fluid | Weight | Line height | Letter spacing | Tailwind |
-|-------|----|-----|-------|--------|-------------|----------------|----------|
-| Display | {px} | {rem} | clamp({...}) | {heading wt} | {lh}px / {unitless} | -0.025em | text-[{rem}rem] tracking-tighter |
-| H1 | {px} | {rem} | clamp({...}) | {heading wt} | {lh}px / {unitless} | -0.025em | text-4xl tracking-tight font-extrabold |
-| H2 | {px} | {rem} | clamp({...}) | {heading wt} | {lh}px / {unitless} | -0.025em | text-3xl tracking-tight font-semibold |
-| H3 | {px} | {rem} | clamp({...}) | {heading wt} | {lh}px / {unitless} | -0.015em | text-2xl tracking-tight font-semibold |
-| H4 | {px} | {rem} | clamp({...}) | {heading wt} | {lh}px / {unitless} | -0.01em | text-xl tracking-tight font-semibold |
-| body-large | {px} | {rem} | — | {body wt} | {lh}px / {unitless} | 0 | text-lg |
-| body | {base}px | 1rem | — | {body wt} | {lh}px / {unitless} | 0 | text-base leading-7 |
-| body-small | {px} | {rem} | — | {body wt} | {lh}px / {unitless} | 0.01em | text-sm |
-| caption | {px} | {rem} | — | {body wt} | {lh}px / {unitless} | 0.015em | text-xs |
-| overline | {px} | {rem} | — | 600 | {lh}px / {unitless} | 0.1em | text-xs uppercase tracking-wider |
-
-## shadcn/ui Typography Classes
-
-Ready-to-use className strings for shadcn projects. These match the calculated scale above:
-
-```tsx
-// Headings
-<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
-<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
-<h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
-
-// Body
-<p className="leading-7 [&:not(:first-child)]:mt-6">
-<p className="text-xl text-muted-foreground">          {/* Lead */}
-<p className="text-lg font-semibold">                  {/* Large */}
-<p className="text-sm font-medium leading-none">       {/* Small */}
-<p className="text-sm text-muted-foreground">          {/* Muted */}
-
-// Special
-<blockquote className="mt-6 border-l-2 pl-6 italic">
-<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
-<span className="text-xs uppercase tracking-wider font-semibold"> {/* Overline */}
-```
-
-To customize these for your exact scale, extend Tailwind with the CSS file below.
-
-## Vertical Rhythm
-
-Grid unit: {grid}px | Body line-height: {body lh}px ({unitless})
-
-All line-heights are snapped to {grid}px multiples. The body line-height ({body lh}px) serves as the spacing anchor — use multiples of it for consistent vertical spacing:
-
-| Token | Value | Lines | Usage |
-|-------|-------|-------|-------|
-| space-xs | {grid}px | {fraction} | Inline element gaps |
-| space-sm | {grid*2}px | {fraction} | Related element gaps |
-| space-md | {body lh / 2}px | 0.5 | Compact section spacing |
-| space-lg | {body lh}px | 1 | Default paragraph spacing |
-| space-xl | {body lh * 1.5}px | 1.5 | Section breaks |
-| space-2xl | {body lh * 2}px | 2 | Major section breaks |
-
-CSS `lh` and `rlh` units (94%+ browser support) can reference line-height directly:
-```css
-p + p { margin-block: 1lh; }        /* one line of spacing */
-section { padding-block: 2rlh; }    /* two root-line-heights */
-```
-
-## Weights
-
-| Name | Value | Usage |
-|------|-------|-------|
-| Regular | {body weight} | Body text, descriptions |
-| Medium | 500 | Emphasized body, nav items, labels |
-| Semibold | 600 | shadcn heading default (H2-H4), overlines |
-| Bold / Extrabold | {heading weight} | H1, page titles, CTAs |
-
-## Accessibility
-
-This scale meets WCAG 2.2 AA requirements:
-- Body line-height ≥ 1.5× font size (SC 1.4.12) ✓
-- Layout survives 200% zoom (SC 1.4.4) — fluid clamp() uses rem bounds ✓
-- Minimum text size: {caption px}px (practical floor 12px) ✓
-- Max line length recommendation: 60–75 characters (`max-w-prose` in Tailwind = 65ch)
-
-**SC 1.4.12 resilience:** Layout must not break when users override to: line-height ≥ 1.5×, letter-spacing ≥ 0.12×, word-spacing ≥ 0.16×, paragraph-spacing ≥ 2× font size. Avoid fixed-height text containers.
-
-## Variable Font Notes
-
-{If the primary font is a variable font:}
-- Enable optical sizing: `font-optical-sizing: auto` (browser maps opsz to font-size automatically)
-- Dark mode grade adjustment: `@media (prefers-color-scheme: dark) { body { font-variation-settings: 'GRAD' -25; } }` — reduces apparent weight of light-on-dark text
-- Use `font-variation-settings: 'wght' {value}` for precise weight control beyond standard keywords
-{End if}
-
-## Modern CSS Enhancements
-
-```css
-h1, h2, h3, h4 { text-wrap: balance; }  /* Auto-balance heading line lengths */
-p { text-wrap: pretty; }                 /* Avoid orphans in paragraphs */
-```
-
----
-
-## Related
-
-- [tailwind.typography.css](./tailwind.typography.css)
-- [palettes.json](./palettes.json)
-```
+- **Font Families** — table with Role, Family, Variable (yes/no), Source, Fallback stack. Include Google Fonts URL and self-hosting note.
+- **Type Scale** — table with Level, px, rem, Fluid clamp(), Weight, Line height (px + unitless), Letter spacing, Tailwind class. All 10 levels: Display, H1-H4, body-large, body, body-small, caption, overline.
+- **shadcn/ui Typography Classes** — ready-to-use className strings for headings, body, and special elements (blockquote, code, overline). Customize values to match the calculated scale.
+- **Vertical Rhythm** — grid unit, body line-height as spacing anchor, spacing token table (space-xs through space-2xl) with values, lines, and usage. Include CSS `lh`/`rlh` unit examples.
+- **Weights** — table mapping Regular/Medium/Semibold/Bold to values and usage.
+- **Accessibility** — WCAG 2.2 AA compliance notes: body line-height ≥ 1.5, zoom survival, minimum text size, max line length. SC 1.4.12 resilience note.
+- **Variable Font Notes** — conditional section: optical sizing, dark mode grade adjustment, precise weight control.
+- **Modern CSS Enhancements** — `text-wrap: balance` for headings, `text-wrap: pretty` for paragraphs.
+- **Related** — links to companion files.
 
 ## Step 7: Write CSS output
 
@@ -425,201 +306,24 @@ p { text-wrap: pretty; }                 /* Avoid orphans in paragraphs */
 
 Write `{OUTPUT_PATH}/tailwind.typography.css` — extends Tailwind v4 via `@theme` with the calculated scale. Drop into your project and import in `globals.css`:
 
-```css
-/* Typography — {font family} @ {ratio} ({ratio name})
-   Generated by /gsp:typescale | {DATE}
-   Import in globals.css: @import './tailwind.typography.css';
-   Preview: https://typescale.com/ */
-
-/* ─── Font imports ─── */
-@import url('https://fonts.googleapis.com/css2?family={primary}:wght@{weights}&family={mono}:wght@400;700&display=swap');
-
-/* ─── Tailwind v4 theme extension ─── */
-@theme {
-  /* Font families */
-  --font-sans: '{primary}', ui-sans-serif, system-ui, sans-serif;
-  --font-mono: '{mono}', ui-monospace, 'SFMono-Regular', monospace;
-
-  /* Custom font size tokens (extend Tailwind's built-in scale) */
-  --text-display: {display rem}rem;
-  --text-display--line-height: {display lh};
-  --text-display--letter-spacing: -0.025em;
-  --text-display--font-weight: {heading weight};
-
-  --text-h1: {h1 rem}rem;
-  --text-h1--line-height: {h1 lh};
-  --text-h1--letter-spacing: -0.025em;
-  --text-h1--font-weight: {heading weight};
-
-  --text-h2: {h2 rem}rem;
-  --text-h2--line-height: {h2 lh};
-  --text-h2--letter-spacing: -0.025em;
-  --text-h2--font-weight: {heading weight};
-
-  --text-h3: {h3 rem}rem;
-  --text-h3--line-height: {h3 lh};
-  --text-h3--letter-spacing: -0.015em;
-  --text-h3--font-weight: 600;
-
-  --text-h4: {h4 rem}rem;
-  --text-h4--line-height: {h4 lh};
-  --text-h4--letter-spacing: -0.01em;
-  --text-h4--font-weight: 600;
-
-  --text-body-large: {body-large rem}rem;
-  --text-body-large--line-height: {body-large lh};
-
-  --text-overline: {overline rem}rem;
-  --text-overline--line-height: {overline lh};
-  --text-overline--letter-spacing: 0.1em;
-  --text-overline--font-weight: 600;
-}
-
-/* ─── Fluid type (clamp) ─── */
-:root {
-  --fs-display: clamp({display min}rem, {display intercept}rem + {display slope}vw, {display max}rem);
-  --fs-h1: clamp({h1 min}rem, {h1 intercept}rem + {h1 slope}vw, {h1 max}rem);
-  --fs-h2: clamp({h2 min}rem, {h2 intercept}rem + {h2 slope}vw, {h2 max}rem);
-  --fs-h3: clamp({h3 min}rem, {h3 intercept}rem + {h3 slope}vw, {h3 max}rem);
-  --fs-h4: clamp({h4 min}rem, {h4 intercept}rem + {h4 slope}vw, {h4 max}rem);
-}
-
-/* ─── Typography utility classes ─── */
-/* Use these or compose with Tailwind's built-in classes */
-
-.text-display {
-  font-size: var(--fs-display);
-  line-height: {display lh};
-  letter-spacing: -0.025em;
-  font-weight: {heading weight};
-  text-wrap: balance;
-}
-
-.prose-headings h1, .text-h1 {
-  font-size: var(--fs-h1);
-  line-height: {h1 lh};
-  letter-spacing: -0.025em;
-  font-weight: {heading weight};
-  text-wrap: balance;
-}
-
-.prose-headings h2, .text-h2 {
-  font-size: var(--fs-h2);
-  line-height: {h2 lh};
-  letter-spacing: -0.025em;
-  font-weight: 600;
-  text-wrap: balance;
-}
-
-.prose-headings h3, .text-h3 {
-  font-size: var(--fs-h3);
-  line-height: {h3 lh};
-  letter-spacing: -0.015em;
-  font-weight: 600;
-  text-wrap: balance;
-}
-
-.prose-headings h4, .text-h4 {
-  font-size: var(--fs-h4);
-  line-height: {h4 lh};
-  letter-spacing: -0.01em;
-  font-weight: 600;
-  text-wrap: balance;
-}
-
-.text-body-large {
-  font-size: {body-large rem}rem;
-  line-height: {body-large lh};
-}
-
-.text-overline {
-  font-size: {overline rem}rem;
-  line-height: {overline lh};
-  letter-spacing: 0.1em;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-/* ─── Optical sizing + dark mode (variable fonts) ─── */
-body {
-  font-optical-sizing: auto;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    /* Reduce apparent weight for light-on-dark text */
-    -webkit-font-smoothing: antialiased;
-  }
-}
-
-/* ─── Modern CSS enhancements ─── */
-h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
-p { text-wrap: pretty; }
-```
+The CSS file must include these sections, using calculated values from Step 3:
+
+- **Header comment** — font family, ratio name, date, import instruction
+- **Font imports** — Google Fonts `@import url()` for primary + mono families
+- **Tailwind v4 @theme extension** — `--font-sans`, `--font-mono` families, plus custom `--text-{level}` tokens for Display, H1-H4, body-large, overline (each with `--line-height`, `--letter-spacing`, `--font-weight` sub-tokens)
+- **Fluid type custom properties** — `:root` block with `--fs-display` through `--fs-h4` using `clamp()` (rem-based min/max, never pure vw — required for WCAG 1.4.4 zoom compliance)
+- **Typography utility classes** — `.text-display`, `.text-h1` through `.text-h4`, `.text-body-large`, `.text-overline` with corresponding font-size (using fluid var), line-height, letter-spacing, font-weight, and `text-wrap: balance` for headings
+- **Optical sizing + dark mode** — `font-optical-sizing: auto`, dark mode antialiasing
+- **Modern CSS** — `text-wrap: balance` on headings, `text-wrap: pretty` on paragraphs
 
 ### Vanilla mode (`--vanilla`)
 
 If `--vanilla` flag is set, write `{OUTPUT_PATH}/typescale.css` instead — plain CSS custom properties without Tailwind-specific syntax:
 
-```css
-/* Typography — {font family} @ {ratio} ({ratio name})
-   Generated by /gsp:typescale | {DATE} */
-
-@import url('https://fonts.googleapis.com/css2?family={primary}:wght@{weights}&family={mono}:wght@400;700&display=swap');
-
-:root {
-  /* Font families */
-  --font-primary: '{primary}', {fallback stack};
-  --font-secondary: '{secondary or primary}', {fallback stack};
-  --font-mono: '{mono}', ui-monospace, monospace;
-
-  /* Font weights */
-  --fw-regular: {body weight};
-  --fw-medium: 500;
-  --fw-semibold: 600;
-  --fw-bold: {heading weight};
-
-  /* Type scale — fluid */
-  --fs-display: clamp({...});
-  --fs-h1: clamp({...});
-  --fs-h2: clamp({...});
-  --fs-h3: clamp({...});
-  --fs-h4: clamp({...});
-  --fs-body-large: {rem}rem;
-  --fs-body: {base}rem;
-  --fs-body-small: {rem}rem;
-  --fs-caption: {rem}rem;
-  --fs-overline: {rem}rem;
-
-  /* Line heights (4px grid-snapped) */
-  --lh-display: {value};
-  --lh-h1: {value};
-  --lh-h2: {value};
-  --lh-h3: {value};
-  --lh-h4: {value};
-  --lh-body-large: {value};
-  --lh-body: {value};
-  --lh-body-small: {value};
-  --lh-caption: {value};
-  --lh-overline: {value};
-
-  /* Letter spacing */
-  --ls-display: -0.025em;
-  --ls-h1: -0.025em;
-  --ls-h2: -0.025em;
-  --ls-h3: -0.015em;
-  --ls-h4: -0.01em;
-  --ls-body-large: 0;
-  --ls-body: 0;
-  --ls-body-small: 0.01em;
-  --ls-caption: 0.015em;
-  --ls-overline: 0.1em;
-
-  /* Vertical rhythm */
-  --grid-unit: {grid}px;
-  --space-line: {body lh}px;
-}
-```
+Plain CSS custom properties (no Tailwind syntax). Include:
+
+- **Font imports** — Google Fonts `@import`
+- **:root custom properties** — font families (`--font-primary`, `--font-secondary`, `--font-mono`), font weights (`--fw-regular` through `--fw-bold`), fluid font sizes (`--fs-display` through `--fs-overline` with clamp() for headings, rem-based min/max only — never pure vw per WCAG 1.4.4), line heights (`--lh-display` through `--lh-overline`, 4px grid-snapped), letter spacing (`--ls-display` through `--ls-overline`), vertical rhythm (`--grid-unit`, `--space-line`)
 
 ## Step 8: Completion output
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "get-shit-pretty",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Design engineering system for AI coding agents. Brand identity + design projects, from strategy to code.",
   "bin": {
     "get-shit-pretty": "bin/install.js"

package/scripts/gsp-context-recovery.sh

@@ -0,0 +1,71 @@
+#!/usr/bin/env bash
+# GSP Context Recovery — re-inject active project/brand state after context compaction
+# Called by SessionStart hook (compact matcher) in gsp/hooks/hooks.json
+# Output target: 15-25 lines max to minimize context consumption
+
+DESIGN_DIR=".design"
+
+# Silent exit if no .design/ directory
+[[ -d "$DESIGN_DIR" ]] || exit 0
+
+OUTPUT=""
+
+# Extract phase names by status from a STATE.md phase table
+# Table format: | # | Phase | Status | Started | Completed |
+# Usage: extract_phases <file> <status>
+extract_phases() {
+  awk -F'|' -v status="$2" '{
+    gsub(/^[ \t]+|[ \t]+$/, "", $4)
+    if ($4 == status) {
+      gsub(/^[ \t]+|[ \t]+$/, "", $3)
+      printf "%s, ", $3
+    }
+  }' "$1" 2>/dev/null | sed 's/, $//'
+}
+
+# Collect brand state
+brand_count=0
+for state in "$DESIGN_DIR"/branding/*/STATE.md; do
+  [[ -f "$state" ]] || continue
+  brand_dir=$(basename "$(dirname "$state")")
+  [[ "$brand_dir" == "_"* ]] && continue
+  brand_count=$((brand_count + 1))
+  [[ $brand_count -gt 2 ]] && continue
+  phase=$(grep -m1 '^\*\*Current Phase:\*\*' "$state" | sed 's/.*Current Phase:\*\*[[:space:]]*//')
+  pretty=$(grep -m1 '^\*\*Prettiness Level:\*\*' "$state" | sed 's/.*Prettiness Level:\*\*[[:space:]]*//')
+  completed=$(extract_phases "$state" "complete")
+  current=$(extract_phases "$state" "in-progress")
+  OUTPUT+="Brand: $brand_dir | Phase: $phase | $pretty"$'\n'
+  [[ -n "$completed" ]] && OUTPUT+="  completed: $completed"$'\n'
+  [[ -n "$current" ]] && OUTPUT+="  current: $current"$'\n'
+done
+[[ $brand_count -gt 2 ]] && OUTPUT+="  (+$((brand_count - 2)) more brands)"$'\n'
+
+# Collect project state
+proj_count=0
+for state in "$DESIGN_DIR"/projects/*/STATE.md; do
+  [[ -f "$state" ]] || continue
+  proj_dir=$(basename "$(dirname "$state")")
+  proj_count=$((proj_count + 1))
+  [[ $proj_count -gt 2 ]] && continue
+  brand_ref=$(grep -m1 '^brand:' "$DESIGN_DIR/projects/$proj_dir/brand.ref" 2>/dev/null | sed 's/^brand:[[:space:]]*//')
+  phase=$(grep -m1 '^\*\*Current Phase:\*\*' "$state" | sed 's/.*Current Phase:\*\*[[:space:]]*//')
+  pretty=$(grep -m1 '^\*\*Prettiness Level:\*\*' "$state" | sed 's/.*Prettiness Level:\*\*[[:space:]]*//')
+  completed=$(extract_phases "$state" "complete")
+  current=$(extract_phases "$state" "in-progress")
+  brand_info=""
+  [[ -n "$brand_ref" ]] && brand_info=" | Brand: $brand_ref"
+  OUTPUT+="Project: $proj_dir$brand_info | Phase: $phase | $pretty"$'\n'
+  [[ -n "$completed" ]] && OUTPUT+="  completed: $completed"$'\n'
+  [[ -n "$current" ]] && OUTPUT+="  current: $current"$'\n'
+done
+[[ $proj_count -gt 2 ]] && OUTPUT+="  (+$((proj_count - 2)) more projects)"$'\n'
+
+# Silent exit if nothing found
+[[ -z "$OUTPUT" ]] && exit 0
+
+echo "GSP Context Recovery"
+echo "────────────────────"
+printf "%s" "$OUTPUT"
+echo "────────────────────"
+echo "Resume: /gsp:start to pick up where you left off"