get-shit-pretty 0.5.2 → 0.6.1

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

@@ -34,6 +34,7 @@ Generate a production-ready typography system with fluid responsive sizing, vert
 
 <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)
@@ -117,70 +118,45 @@ Calculate the implied ratio from the preset's type scale if present, or default
 
 Use `AskUserQuestion` for each input:
 
-1. **Primary font** — "What's your primary font family?" with options:
-   - **Inter** — "clean geometric sans-serif, great all-rounder"
-   - **Geist Sans** — "Vercel's modern sans — pairs with Geist Mono"
-   - **Plus Jakarta Sans** — "modern geometric with personality"
-   - **DM Sans** — "low-contrast geometric, contemporary"
-   - **Space Grotesk** — "technical, monospaced-inspired sans"
-   - **Instrument Serif** — "elegant serif with sharp details"
-   - **Custom** — "enter your own font family"
-
-2. **Scale ratio** — "What scale ratio? Preview interactively at https://typescale.com/" with options:
-   - **minor-third (1.2)** — "balanced, safe default — used by Shopify Polaris"
-   - **major-third (1.25)** — "clear hierarchy, marketing-friendly"
-   - **perfect-fourth (1.333)** — "strong contrast, bold headlines"
-   - **augmented-fourth (1.414)** — "dramatic, editorial feel"
-   - **Custom** — "enter a custom ratio"
-
-3. **Base size** — default to 16px unless user specifies otherwise
+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 from the base size and ratio. Each level is calculated as:
-
-```
-size = base × ratio^n
-```
-
-Where `n` is the level's exponent:
-
-| Level | Exponent | Tailwind class | shadcn equivalent | Purpose |
-|-------|----------|----------------|-------------------|---------|
-| Display | 5 | `text-6xl`–`text-7xl` | — | Hero headlines, splash screens |
-| H1 | 4 | `text-4xl` | `scroll-m-20 text-4xl font-extrabold tracking-tight` | Page titles |
-| H2 | 3 | `text-3xl` | `scroll-m-20 text-3xl font-semibold tracking-tight` | Section headings |
-| H3 | 2 | `text-2xl` | `scroll-m-20 text-2xl font-semibold tracking-tight` | Subsection headings |
-| H4 | 1 | `text-xl` | `scroll-m-20 text-xl font-semibold tracking-tight` | Minor headings |
-| body-large | 0.5* | `text-lg` | Lead: `text-xl text-muted-foreground` | Lead paragraphs, intros |
-| body | 0 | `text-base` | `leading-7 [&:not(:first-child)]:mt-6` | Default body text (= base size) |
-| body-small | -1 | `text-sm` | Small: `text-sm font-medium leading-none` | Secondary text, metadata |
-| caption | -2 | `text-xs` | Muted: `text-sm text-muted-foreground` | Labels, helper text |
-| overline | -2 | `text-xs` | — | All-caps category labels (same size as caption) |
+Generate a 9-level scale: `size = base × ratio^n`. Round px to nearest 0.5px, rem = `px / 16`.
 
-*body-large uses exponent 0.5 (half-step) to avoid an awkward gap between body and H4.
+| 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) |
 
-Round px values to nearest 0.5px. Calculate rem as `px / 16`.
+*body-large uses half-step exponent to bridge body → H4 gap.
 
 ### Line height per level (snapped to 4px grid)
 
-Line height is calculated as: `ceil(fontSize * ratio / gridUnit) * gridUnit`
-Where `ratio` is the target unitless line-height and `gridUnit` is 4px.
-
-This ensures vertical rhythm — every line-height is a multiple of 4px.
-
-| Level | Target ratio | Grid-snapped example (16px base, 1.25 ratio) |
-|-------|-------------|-----------------------------------------------|
-| Display | 1.1 | Round to nearest 4px multiple |
-| H1 | 1.15 | |
-| H2 | 1.2 | |
-| H3 | 1.25 | |
-| H4 | 1.3 | |
-| body-large | 1.5 | |
-| body | 1.5 | 24px (6 × 4px) — anchor for spacing scale |
-| body-small | 1.5 | 20px (5 × 4px) |
-| caption | 1.4 | 16px (4 × 4px) |
-| overline | 1.5 | 16px (4 × 4px) |
+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.
 
@@ -203,22 +179,9 @@ Based on the principle: small text needs more space, large text needs less. Refe
 
 ## Step 3.5: Calculate fluid type values
 
-For each heading level (Display through H4), generate a `clamp()` value that fluidly scales between mobile and desktop viewports.
+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.
 
-**Parameters:**
-- Min viewport: 375px (mobile)
-- Max viewport: 1280px (desktop)
-- Mobile ratio: step down two named ratios from chosen ratio
-- Desktop ratio: the chosen ratio
-
-**clamp() formula:**
-```
-slope = (maxSize - minSize) / (maxViewport - minViewport)
-intercept = minSize - slope * minViewport
-clamp(minSize_rem, intercept_rem + slope * 100vw, maxSize_rem)
-```
-
-**Ratio step-down map** (each entry steps to the next lower named ratio):
+**Ratio step-down map:**
 
 ```
 golden-ratio     → perfect-fifth    → augmented-fourth
@@ -231,45 +194,11 @@ major-second     → minor-second     → minor-second
 minor-second     → minor-second     → minor-second (floor)
 ```
 
-Mobile size = `base × mobileRatio^exponent`
-Desktop size = `base × desktopRatio^exponent`
-
-Body and below don't scale — they stay at the base size across all viewports.
-
 If `--no-fluid` is passed, skip clamp() and use breakpoint-only `@media` rules instead.
 
 ## Step 4: Preview mode (`--preview`)
 
-If `--preview`, display the full scale without writing files:
-
-```
-  /gsp:typescale preview — {font family}
-  ═══════════════════════════════════════
-
-  Base: {base}px | Ratio: {ratio} ({ratio name})
-  Fluid: 375px → 1280px | Mobile ratio: {mobile ratio name}
-
-  Level         Mobile       Desktop      Fluid clamp()                          Weight   LH     LS
-  ───────────────────────────────────────────────────────────────────────────────────────────────────
-  Display       {px}px       {px}px       clamp({min}, {pref}, {max})            {wt}     {lh}   -0.025em
-  H1            {px}px       {px}px       clamp({min}, {pref}, {max})            {wt}     {lh}   -0.025em
-  H2            {px}px       {px}px       clamp({min}, {pref}, {max})            {wt}     {lh}   -0.025em
-  H3            {px}px       {px}px       clamp({min}, {pref}, {max})            {wt}     {lh}   -0.015em
-  H4            {px}px       {px}px       clamp({min}, {pref}, {max})            {wt}     {lh}   -0.01em
-  body-large    {px}px       —            —                                      {wt}     {lh}   0
-  body          {base}px     —            —                                      {wt}     {lh}   0
-  body-small    {px}px       —            —                                      {wt}     {lh}   0.01em
-  caption       {px}px       —            —                                      {wt}     {lh}   0.015em
-  overline      {px}px       —            —                                      600      {lh}   0.1em
-  ───────────────────────────────────────────────────────────────────────────────────────────────────
-
-  Vertical rhythm grid: {grid}px
-  Body line-height: {lh}px ({lh/base} unitless) — spacing anchor
-
-  Run /gsp:typescale "{font}" --ratio {ratio} to write files.
-```
-
-Stop here. Do not write any files.
+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
 
@@ -286,70 +215,19 @@ If a brand context exists (`.design/branding/{brand}/`):
 
 ## Step 6: Write typography.md
 
-Write `{OUTPUT_PATH}/typography.md` as a foundation chunk per `references/chunk-format.md`:
-
-The typography.md chunk must include these sections with calculated values from Step 3:
-
-- **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.
+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` — extends Tailwind v4 via `@theme` with the calculated scale. Drop into your project and import in `globals.css`:
-
-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
+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`)
 
-If `--vanilla` flag is set, write `{OUTPUT_PATH}/typescale.css` instead — plain CSS custom properties without Tailwind-specific syntax:
-
-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`)
+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
 
-Display the result:
-
-```
-  /gsp:typescale — {font family} @ {ratio}
-  ═══════════════════════════════════════
-
-  {OUTPUT_PATH}/
-  ├── typography.md              Foundation chunk
-  └── tailwind.typography.css    Tailwind v4 / shadcn ready
-
-  Scale: {ratio name} ({ratio})
-  Range: {caption px}px → {display px}px
-  Levels: 10 (Display → Overline)
-  Fluid: 375px → 1280px (clamp)
-  Grid: {grid}px vertical rhythm
-
-  ─────────────────────────────────────
-```
-
-Then use `AskUserQuestion` with routing options:
-
-- **Generate palette** — "pair this type scale with color palettes" → route to `/gsp:palette`
-- **Apply a full style** — "use a style preset for the complete system" → route to `/gsp:style`
-- **Continue to identity** — "use this type scale in the branding diamond" → route to `/gsp:brand-identity`
-- **Done** — "that's all for now"
+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>

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

@@ -2,36 +2,51 @@
 name: update
 description: Update GSP to the latest version
 user-invocable: true
+allowed-tools:
+  - Read
+  - Bash
+  - AskUserQuestion
+  - Glob
+  - WebFetch
 ---
 <objective>
 Check for GSP updates, show what's new, and run the update if the user confirms.
 </objective>
 
+<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 1 — Detect installation
 
-Check for a `VERSION` file to determine install type. The runtime directory varies by tool:
-- Claude Code: `.claude/` (local) or `~/.claude/` (global)
-- OpenCode: `.opencode/` (local) or `~/.config/opencode/` (global)
-- Gemini: `.gemini/` (local) or `~/.gemini/` (global)
-- Codex: `.codex/` (local) or `~/.codex/` (global)
+Determine the runtime by checking which config directory exists. Check local first, then global:
+
+| Runtime | Local dir | Global dir |
+|---------|-----------|------------|
+| Claude Code | `.claude/` | `~/.claude/` |
+| OpenCode | `.opencode/` | `~/.config/opencode/` |
+| Gemini | `.gemini/` | `~/.gemini/` |
+| Codex | `.codex/` | `~/.codex/` |
 
-Look for the VERSION file in both local and global locations. Check two paths per location (current layout first, legacy fallback):
+For each runtime, look for the VERSION file in two paths (current layout first, legacy fallback):
 1. `{runtime-dir}/VERSION` (v0.5.0+)
 2. `{runtime-dir}/get-shit-pretty/VERSION` (legacy v0.4.x)
 
-If neither exists in either location, tell the user GSP doesn't appear to be installed and suggest running:
+Record which runtime(s) and install type (local/global) were found.
+
+If no VERSION file exists anywhere, tell the user GSP doesn't appear to be installed and suggest:
 ```
 npx get-shit-pretty
 ```
 Then stop.
 
-Read the VERSION file to get the installed version. Store which type was detected (local or global).
+Read the VERSION file to get the installed version.
 
 ## Step 2 — Check latest version
 
-Run:
 ```bash
 npm view get-shit-pretty version
 ```
@@ -40,7 +55,7 @@ If the command fails, tell the user the version check failed (they may be offlin
 
 ## Step 3 — Compare versions
 
-If installed version >= latest version, tell the user:
+If installed version >= latest version:
 ```
 GSP v{installed} is already up to date.
 ```
@@ -48,40 +63,55 @@ Then stop.
 
 ## Step 4 — Show what's new
 
-Tell the user:
 ```
 Update available: v{installed} → v{latest}
 ```
 
-Fetch the changelog to show what changed:
+Fetch the changelog:
 ```bash
 curl -sf https://raw.githubusercontent.com/jubscodes/get-shit-pretty/main/CHANGELOG.md
 ```
 
-If the fetch succeeds, extract and display the section for the latest version. If it fails, skip — changelog display is optional.
+If the fetch succeeds, extract and display the section(s) between the installed and latest versions. If it fails, skip — changelog display is optional.
 
 ## Step 5 — Warn about clean install
 
-Tell the user:
 ```
 The update replaces:
-  • skills/gsp-*       (all GSP skills)
-  • get-shit-pretty/*  (runtime files)
-  • gsp-* agents       (all GSP agents)
+  • skills/gsp-*          (all GSP skills + sibling files)
+  • prompts/              (agent system prompts)
+  • templates/            (config, state, brief templates)
+  • references/           (shared reference material)
+  • agents/gsp-*          (all GSP agents)
 
 Custom files outside these prefixes are preserved.
 ```
 
 ## Step 6 — Confirm with user
 
-Ask the user to confirm before proceeding. If they decline, stop.
+Use `AskUserQuestion`:
+- **Update now** — "Install v{latest}"
+- **Skip** — "I'll update later"
+
+If skip → stop.
 
 ## Step 7 — Execute update
 
-Based on the detected install type from Step 1:
+Build the installer command based on what was detected in Step 1:
+
+**Runtime flag:** use the detected runtime (`--claude`, `--opencode`, `--gemini`, `--codex`). If multiple runtimes were found, use `--all`.
+
+**Scope flag:** `--local` if local install was detected, `--global` if global.
+
+```bash
+npx get-shit-pretty@latest {runtime-flag} {scope-flag}
+```
 
-- **Local install**: run `npx get-shit-pretty@latest --claude --local`
-- **Global install**: run `npx get-shit-pretty@latest --claude`
+Examples:
+- Local Claude: `npx get-shit-pretty@latest --claude --local`
+- Global Claude: `npx get-shit-pretty@latest --claude --global`
+- Global OpenCode: `npx get-shit-pretty@latest --opencode --global`
+- Multiple runtimes: `npx get-shit-pretty@latest --all --global`
 
 Show the output to the user.
 
@@ -102,10 +132,9 @@ rm -f {runtime-dir}/get-shit-pretty/.update-cache.json
 
 ## Step 9 — Remind to restart
 
-Tell the user:
 ```
 GSP updated to v{latest}.
-Restart your Claude Code session to load the new commands and agents.
+Restart your session to load the new skills and agents.
 ```
 
 </process>

package/gsp/templates/branding/config.json

@@ -6,6 +6,7 @@
     "created": ""
   },
   "brand_mode": "new",
+  "e2e": false,
   "evolution_scope": {
     "preserve": [],
     "evolve": [],

package/package.json

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