get-shit-pretty 0.5.2 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -55,73 +55,12 @@ Read the user's input to determine the mode:
55
55
 
56
56
  ## Step 1: List mode (`--list`)
57
57
 
58
- If `--list`, read `styles/INDEX.yml` and display all presets:
59
-
60
- Read `styles/INDEX.yml` and render every style grouped by category. Format:
58
+ Read `styles/INDEX.yml` and display all presets grouped by category. Format each as `{name} {one-line description}` with `─── Category ────` separators and footer showing usage. Example:
61
59
 
62
60
  ```
63
- /gsp:style
64
- ═══════════════════════════════════════
65
-
66
- 34 styles available
67
-
68
61
  ─── Minimal ────────────────────────
69
62
  swiss-minimalist Helvetica and whitespace — let the content breathe
70
63
  flat-design Solid colors, zero shadows — bold color blocks as structure
71
- monochrome Pure black and white — typographic depth, zero decoration
72
- minimal-dark Three layers of darkness with warm amber accents
73
-
74
- ─── Modern ─────────────────────────
75
- professional The sensible default — clean, trustworthy, gets out of the way
76
- saas Electric blue gradient — modern SaaS landing page energy
77
- enterprise Indigo-to-violet gradient — dashboard-ready corporate
78
- fluent Microsoft Fluent 2 — acrylic materials, semantic tokens
79
- material Material Design 3 — adaptive, organic, expressive
80
- modern-dark Linear/Vercel aesthetic — ambient blobs, mouse spotlights
81
- glassmorphism Frosted glass panels floating over rich backgrounds
82
- liquid-glass Apple's 2025 design language — refractive, fluid, alive
83
-
84
- ─── Creative ───────────────────────
85
- neubrutalism Gumroad meets Figma — thick borders, hard shadows
86
- cyberpunk Neon-soaked interfaces from a dystopian future
87
- maximalism MORE IS MORE — sensory overload, 5 rotating accent colors
88
- bold-typography Typography IS the design — massive headlines, poster aesthetic
89
- playful-geometric Memphis-inspired candy buttons and confetti cards
90
- sketch Wobbly borders and marker red on warm paper
91
- kinetic Viewport-width type, marquees, extreme scale hierarchy
92
-
93
- ─── Elegant ────────────────────────
94
- luxury Gold accent, slow reveals, asymmetric restraint
95
- art-deco 1920s theatrical glamour — gold on obsidian black
96
- academia Victorian study halls — mahogany, brass, and serif type
97
- humanist-literary Warm paper canvas, terracotta accent — quiet intelligence
98
-
99
- ─── Organic ────────────────────────
100
- botanical Deep greens, paper grain, nature-inspired serif elegance
101
- organic Moss and terracotta — blob shapes, no straight lines
102
-
103
- ─── Editorial ──────────────────────
104
- newsprint Multi-column layouts, drop caps, high information density
105
-
106
- ─── Nostalgic ──────────────────────
107
- retro Windows 95 bevels, marquee text — the ugliness IS the beauty
108
- vaporwave 80s/90s digital nostalgia with neon gradients and CRT scanlines
109
-
110
- ─── Tactile ────────────────────────
111
- claymorphism Vinyl toy aesthetic — 4-layer shadows, super-rounded, squish
112
- neumorphism Dual opposing shadows — extruded and inset on continuous surface
113
- industrial Precision machinery — carbon fiber, dual-shadow, safety orange
114
-
115
- ─── Tech ───────────────────────────
116
- terminal Your favorite code editor as a design system
117
- web3 Bitcoin orange luminescence on void black
118
-
119
- ─── Geometric ──────────────────────
120
- bauhaus Form follows function — Bauhaus primary colors, hard shadows
121
-
122
- ─────────────────────────────────────
123
- Usage: /gsp:style {name}
124
- /gsp:style --preview {name}
125
64
  ```
126
65
 
127
66
  Stop here. Do not write any files.
@@ -177,43 +116,7 @@ If invoked from a project context (`.design/projects/{project}/`):
177
116
 
178
117
  ## Step 5: Preview mode (`--preview`)
179
118
 
180
- If `--preview`, display the expanded tokens without writing files:
181
-
182
- ```
183
- /gsp:style preview — {name}
184
- ═══════════════════════════════════════
185
-
186
- Color
187
- primary {value}
188
- secondary {value}
189
- accent {value}
190
- background {value}
191
- surface {value}
192
-
193
- Typography
194
- heading {font-family} @ {weight}
195
- body {font-family} @ {weight}
196
- base size {size}
197
-
198
- Shape
199
- radius {sm} / {md} / {lg}
200
- border {width} {color}
201
-
202
- Elevation
203
- sm {value}
204
- md {value}
205
- lg {value}
206
-
207
- Motion
208
- fast {duration}
209
- normal {duration}
210
- easing {value}
211
-
212
- ─────────────────────────────────────
213
- Run /gsp:style {name} to apply.
214
- ```
215
-
216
- Stop here. Do not write any files.
119
+ If `--preview`, display expanded tokens grouped by section (Color, Typography, Shape, Elevation, Motion) as key-value pairs. Footer: usage hint to apply. Stop here — do not write any files.
217
120
 
218
121
  ## Step 6: Expand tokens to W3C format
219
122
 
@@ -241,65 +144,23 @@ Transform each YAML preset section into W3C Design Tokens JSON with `$value` and
241
144
 
242
145
  ## Step 7: Write tokens.json
243
146
 
147
+ If `{OUTPUT_PATH}/tokens.json` already exists, use `AskUserQuestion`: "tokens.json already exists — overwrite with style preset? Existing component-level tokens will be replaced." with options **Overwrite** and **Cancel**. If cancelled, skip writing tokens.json and proceed to the next step.
148
+
244
149
  Write the complete W3C Design Tokens JSON to `{OUTPUT_PATH}/tokens.json`.
245
150
 
246
151
  ## Step 8: Write foundation chunks
247
152
 
248
153
  Write 5 foundation chunks to `{OUTPUT_PATH}/foundations/`, each following `references/chunk-format.md`:
249
154
 
250
- ### foundations/color-system.md
251
- - Document the full color palette from the preset
252
- - Include brand colors (primary, secondary, accent)
253
- - Include semantic colors (background, surface, on-primary, on-background, error, success, warning, info)
254
- - Include dark mode mapping if present
255
- - Note WCAG contrast considerations based on the color values
256
-
257
- ### foundations/typography.md
258
- - Document the 9-level type scale (Display → Overline) with all properties
259
- - Include font family details and where to load them (Google Fonts link if applicable)
260
- - Include heading and body weight rationale
261
-
262
- ### foundations/spacing.md
263
- - Document the spacing scale from the preset
264
- - Include base unit and full scale with usage guidelines
265
-
266
- ### foundations/elevation.md
267
- - Document the shadow/elevation scale from the preset
268
- - Include use cases for each level (flat, cards, dropdowns, modals, popovers)
269
- - Include any style-specific elevation notes (e.g., hard shadows for neubrutalism, glow for cyberpunk)
270
-
271
- ### foundations/border-radius.md
272
- - Document the radius token scale
273
- - Include style-specific shape notes (e.g., sharp corners for swiss-minimalist, chunky for neubrutalism)
155
+ - **color-system.md** — brand colors, semantic colors, dark mode mapping, WCAG contrast notes
156
+ - **typography.md** 9-level type scale, font family details + Google Fonts link, weight rationale
157
+ - **spacing.md** spacing scale with base unit and usage guidelines
158
+ - **elevation.md** shadow scale with use cases per level + style-specific notes
159
+ - **border-radius.md** radius token scale + style-specific shape notes
274
160
 
275
161
  ## Step 9: Write INDEX.md
276
162
 
277
- Write `{OUTPUT_PATH}/INDEX.md`:
278
-
279
- ```markdown
280
- # System
281
- > Phase: system | Style: {preset-name} | Generated: {DATE}
282
-
283
- ## Applied Style
284
-
285
- **{preset-name}** — {preset description}
286
-
287
- ## Foundations
288
-
289
- | Chunk | File | ~Lines |
290
- |-------|------|--------|
291
- | Color System | [color-system.md](./foundations/color-system.md) | ~{N} |
292
- | Typography | [typography.md](./foundations/typography.md) | ~{N} |
293
- | Spacing | [spacing.md](./foundations/spacing.md) | ~{N} |
294
- | Elevation | [elevation.md](./foundations/elevation.md) | ~{N} |
295
- | Border Radius | [border-radius.md](./foundations/border-radius.md) | ~{N} |
296
-
297
- ## Tokens
298
-
299
- | File | Description |
300
- |------|-------------|
301
- | [tokens.json](./tokens.json) | W3C Design Tokens |
302
- ```
163
+ Write `{OUTPUT_PATH}/INDEX.md` — header with phase/style/date, applied style name + description, foundations table (chunk name, file link, ~lines), tokens table (tokens.json link).
303
164
 
304
165
  ## Step 10: Update state
305
166
 
@@ -313,29 +174,5 @@ If a project config.json exists:
313
174
 
314
175
  ## Step 11: Completion output
315
176
 
316
- Display the result:
317
-
318
- ```
319
- /gsp:style — {name} applied
320
- ═══════════════════════════════════════
321
-
322
- {OUTPUT_PATH}/
323
- ├── foundations/
324
- │ ├── color-system.md
325
- │ ├── typography.md
326
- │ ├── spacing.md
327
- │ ├── elevation.md
328
- │ └── border-radius.md
329
- ├── tokens.json
330
- └── INDEX.md
331
-
332
- ─────────────────────────────────────
333
- ```
334
-
335
- Then use `AskUserQuestion` with routing options:
336
-
337
- - **Start a project** — "scope what you're building with this style" → route to `/gsp:project-brief`
338
- - **Build components** — "extend with a full component library" → route to `/gsp:brand-patterns` (components pass only)
339
- - **Preview tokens** — "see the token values" → show tokens.json summary
340
- - **Try a different style** — "apply a different preset" → restart at Step 2
177
+ Show: header (`/gsp:style — {name} applied`), file tree (foundations/ + tokens.json + INDEX.md). Then `AskUserQuestion`: Start a project → `/gsp:project-brief`, Build components → `/gsp:brand-patterns`, Preview tokens, Try a different style → restart Step 2.
341
178
  </process>
@@ -117,70 +117,45 @@ Calculate the implied ratio from the preset's type scale if present, or default
117
117
 
118
118
  Use `AskUserQuestion` for each input:
119
119
 
120
- 1. **Primary font** — "What's your primary font family?" with options:
121
- - **Inter** — "clean geometric sans-serif, great all-rounder"
122
- - **Geist Sans** — "Vercel's modern sans — pairs with Geist Mono"
123
- - **Plus Jakarta Sans** — "modern geometric with personality"
124
- - **DM Sans** — "low-contrast geometric, contemporary"
125
- - **Space Grotesk** — "technical, monospaced-inspired sans"
126
- - **Instrument Serif** — "elegant serif with sharp details"
127
- - **Custom** — "enter your own font family"
128
-
129
- 2. **Scale ratio** — "What scale ratio? Preview interactively at https://typescale.com/" with options:
130
- - **minor-third (1.2)** — "balanced, safe default — used by Shopify Polaris"
131
- - **major-third (1.25)** — "clear hierarchy, marketing-friendly"
132
- - **perfect-fourth (1.333)** — "strong contrast, bold headlines"
133
- - **augmented-fourth (1.414)** — "dramatic, editorial feel"
134
- - **Custom** — "enter a custom ratio"
135
-
136
- 3. **Base size** — default to 16px unless user specifies otherwise
120
+ 1. **Primary font** — offer: Inter, Geist Sans, Plus Jakarta Sans, DM Sans, Space Grotesk, Instrument Serif, Custom
121
+ 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.
122
+ 3. **Base size** — default 16px unless specified
137
123
 
138
124
  ## Step 3: Calculate type scale
139
125
 
140
- Generate a 9-level scale from the base size and ratio. Each level is calculated as:
126
+ Generate a 9-level scale: `size = base × ratio^n`. Round px to nearest 0.5px, rem = `px / 16`.
141
127
 
142
- ```
143
- size = base × ratio^n
144
- ```
145
-
146
- Where `n` is the level's exponent:
147
-
148
- | Level | Exponent | Tailwind class | shadcn equivalent | Purpose |
149
- |-------|----------|----------------|-------------------|---------|
150
- | Display | 5 | `text-6xl`–`text-7xl` | | Hero headlines, splash screens |
151
- | H1 | 4 | `text-4xl` | `scroll-m-20 text-4xl font-extrabold tracking-tight` | Page titles |
152
- | H2 | 3 | `text-3xl` | `scroll-m-20 text-3xl font-semibold tracking-tight` | Section headings |
153
- | H3 | 2 | `text-2xl` | `scroll-m-20 text-2xl font-semibold tracking-tight` | Subsection headings |
154
- | H4 | 1 | `text-xl` | `scroll-m-20 text-xl font-semibold tracking-tight` | Minor headings |
155
- | body-large | 0.5* | `text-lg` | Lead: `text-xl text-muted-foreground` | Lead paragraphs, intros |
156
- | body | 0 | `text-base` | `leading-7 [&:not(:first-child)]:mt-6` | Default body text (= base size) |
157
- | body-small | -1 | `text-sm` | Small: `text-sm font-medium leading-none` | Secondary text, metadata |
158
- | caption | -2 | `text-xs` | Muted: `text-sm text-muted-foreground` | Labels, helper text |
159
- | overline | -2 | `text-xs` | — | All-caps category labels (same size as caption) |
160
-
161
- *body-large uses exponent 0.5 (half-step) to avoid an awkward gap between body and H4.
128
+ | Level | Exponent | Tailwind | Purpose |
129
+ |-------|----------|----------|---------|
130
+ | Display | 5 | `text-6xl`–`text-7xl` | Hero headlines |
131
+ | H1 | 4 | `text-4xl` | Page titles |
132
+ | H2 | 3 | `text-3xl` | Section headings |
133
+ | H3 | 2 | `text-2xl` | Subsection headings |
134
+ | H4 | 1 | `text-xl` | Minor headings |
135
+ | body-large | 0.5* | `text-lg` | Lead paragraphs |
136
+ | body | 0 | `text-base` | Default body (= base) |
137
+ | body-small | -1 | `text-sm` | Secondary text |
138
+ | caption | -2 | `text-xs` | Labels, helper text |
139
+ | overline | -2 | `text-xs` | All-caps labels (= caption size) |
162
140
 
163
- Round px values to nearest 0.5px. Calculate rem as `px / 16`.
141
+ *body-large uses half-step exponent to bridge body H4 gap.
164
142
 
165
143
  ### Line height per level (snapped to 4px grid)
166
144
 
167
- Line height is calculated as: `ceil(fontSize * ratio / gridUnit) * gridUnit`
168
- Where `ratio` is the target unitless line-height and `gridUnit` is 4px.
169
-
170
- This ensures vertical rhythm — every line-height is a multiple of 4px.
171
-
172
- | Level | Target ratio | Grid-snapped example (16px base, 1.25 ratio) |
173
- |-------|-------------|-----------------------------------------------|
174
- | Display | 1.1 | Round to nearest 4px multiple |
175
- | H1 | 1.15 | |
176
- | H2 | 1.2 | |
177
- | H3 | 1.25 | |
178
- | H4 | 1.3 | |
179
- | body-large | 1.5 | |
180
- | body | 1.5 | 24px (6 × 4px) — anchor for spacing scale |
181
- | body-small | 1.5 | 20px (5 × 4px) |
182
- | caption | 1.4 | 16px (4 × 4px) |
183
- | overline | 1.5 | 16px (4 × 4px) |
145
+ Formula: `ceil(fontSize * targetRatio / 4) * 4` — every line-height is a multiple of 4px.
146
+
147
+ | Level | Target ratio |
148
+ |-------|-------------|
149
+ | Display | 1.1 |
150
+ | H1 | 1.15 |
151
+ | H2 | 1.2 |
152
+ | H3 | 1.25 |
153
+ | H4 | 1.3 |
154
+ | body-large | 1.5 |
155
+ | body | 1.5 (anchor: e.g. 24px = 6 × 4px) |
156
+ | body-small | 1.5 |
157
+ | caption | 1.4 |
158
+ | overline | 1.5 |
184
159
 
185
160
  If user provided `--line-height`, use it as the body target ratio and adjust proportionally.
186
161
 
@@ -203,22 +178,9 @@ Based on the principle: small text needs more space, large text needs less. Refe
203
178
 
204
179
  ## Step 3.5: Calculate fluid type values
205
180
 
206
- For each heading level (Display through H4), generate a `clamp()` value that fluidly scales between mobile and desktop viewports.
207
-
208
- **Parameters:**
209
- - Min viewport: 375px (mobile)
210
- - Max viewport: 1280px (desktop)
211
- - Mobile ratio: step down two named ratios from chosen ratio
212
- - Desktop ratio: the chosen ratio
213
-
214
- **clamp() formula:**
215
- ```
216
- slope = (maxSize - minSize) / (maxViewport - minViewport)
217
- intercept = minSize - slope * minViewport
218
- clamp(minSize_rem, intercept_rem + slope * 100vw, maxSize_rem)
219
- ```
181
+ 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.
220
182
 
221
- **Ratio step-down map** (each entry steps to the next lower named ratio):
183
+ **Ratio step-down map:**
222
184
 
223
185
  ```
224
186
  golden-ratio → perfect-fifth → augmented-fourth
@@ -231,45 +193,11 @@ major-second → minor-second → minor-second
231
193
  minor-second → minor-second → minor-second (floor)
232
194
  ```
233
195
 
234
- Mobile size = `base × mobileRatio^exponent`
235
- Desktop size = `base × desktopRatio^exponent`
236
-
237
- Body and below don't scale — they stay at the base size across all viewports.
238
-
239
196
  If `--no-fluid` is passed, skip clamp() and use breakpoint-only `@media` rules instead.
240
197
 
241
198
  ## Step 4: Preview mode (`--preview`)
242
199
 
243
- If `--preview`, display the full scale without writing files:
244
-
245
- ```
246
- /gsp:typescale preview — {font family}
247
- ═══════════════════════════════════════
248
-
249
- Base: {base}px | Ratio: {ratio} ({ratio name})
250
- Fluid: 375px → 1280px | Mobile ratio: {mobile ratio name}
251
-
252
- Level Mobile Desktop Fluid clamp() Weight LH LS
253
- ───────────────────────────────────────────────────────────────────────────────────────────────────
254
- Display {px}px {px}px clamp({min}, {pref}, {max}) {wt} {lh} -0.025em
255
- H1 {px}px {px}px clamp({min}, {pref}, {max}) {wt} {lh} -0.025em
256
- H2 {px}px {px}px clamp({min}, {pref}, {max}) {wt} {lh} -0.025em
257
- H3 {px}px {px}px clamp({min}, {pref}, {max}) {wt} {lh} -0.015em
258
- H4 {px}px {px}px clamp({min}, {pref}, {max}) {wt} {lh} -0.01em
259
- body-large {px}px — — {wt} {lh} 0
260
- body {base}px — — {wt} {lh} 0
261
- body-small {px}px — — {wt} {lh} 0.01em
262
- caption {px}px — — {wt} {lh} 0.015em
263
- overline {px}px — — 600 {lh} 0.1em
264
- ───────────────────────────────────────────────────────────────────────────────────────────────────
265
-
266
- Vertical rhythm grid: {grid}px
267
- Body line-height: {lh}px ({lh/base} unitless) — spacing anchor
268
-
269
- Run /gsp:typescale "{font}" --ratio {ratio} to write files.
270
- ```
271
-
272
- Stop here. Do not write any files.
200
+ 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.
273
201
 
274
202
  ## Step 5: Resolve output path
275
203
 
@@ -286,70 +214,19 @@ If a brand context exists (`.design/branding/{brand}/`):
286
214
 
287
215
  ## Step 6: Write typography.md
288
216
 
289
- Write `{OUTPUT_PATH}/typography.md` as a foundation chunk per `references/chunk-format.md`:
290
-
291
- The typography.md chunk must include these sections with calculated values from Step 3:
292
-
293
- - **Font Families** — table with Role, Family, Variable (yes/no), Source, Fallback stack. Include Google Fonts URL and self-hosting note.
294
- - **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.
295
- - **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.
296
- - **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.
297
- - **Weights** — table mapping Regular/Medium/Semibold/Bold to values and usage.
298
- - **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.
299
- - **Variable Font Notes** — conditional section: optical sizing, dark mode grade adjustment, precise weight control.
300
- - **Modern CSS Enhancements** — `text-wrap: balance` for headings, `text-wrap: pretty` for paragraphs.
301
- - **Related** — links to companion files.
217
+ 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.
302
218
 
303
219
  ## Step 7: Write CSS output
304
220
 
305
221
  ### Tailwind / shadcn mode (default)
306
222
 
307
- Write `{OUTPUT_PATH}/tailwind.typography.css` — extends Tailwind v4 via `@theme` with the calculated scale. Drop into your project and import in `globals.css`:
308
-
309
- The CSS file must include these sections, using calculated values from Step 3:
310
-
311
- - **Header comment** — font family, ratio name, date, import instruction
312
- - **Font imports** — Google Fonts `@import url()` for primary + mono families
313
- - **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)
314
- - **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)
315
- - **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
316
- - **Optical sizing + dark mode** — `font-optical-sizing: auto`, dark mode antialiasing
317
- - **Modern CSS** — `text-wrap: balance` on headings, `text-wrap: pretty` on paragraphs
223
+ 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.
318
224
 
319
225
  ### Vanilla mode (`--vanilla`)
320
226
 
321
- If `--vanilla` flag is set, write `{OUTPUT_PATH}/typescale.css` instead — plain CSS custom properties without Tailwind-specific syntax:
322
-
323
- Plain CSS custom properties (no Tailwind syntax). Include:
324
-
325
- - **Font imports** — Google Fonts `@import`
326
- - **: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`)
227
+ 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.
327
228
 
328
229
  ## Step 8: Completion output
329
230
 
330
- Display the result:
331
-
332
- ```
333
- /gsp:typescale — {font family} @ {ratio}
334
- ═══════════════════════════════════════
335
-
336
- {OUTPUT_PATH}/
337
- ├── typography.md Foundation chunk
338
- └── tailwind.typography.css Tailwind v4 / shadcn ready
339
-
340
- Scale: {ratio name} ({ratio})
341
- Range: {caption px}px → {display px}px
342
- Levels: 10 (Display → Overline)
343
- Fluid: 375px → 1280px (clamp)
344
- Grid: {grid}px vertical rhythm
345
-
346
- ─────────────────────────────────────
347
- ```
348
-
349
- Then use `AskUserQuestion` with routing options:
350
-
351
- - **Generate palette** — "pair this type scale with color palettes" → route to `/gsp:palette`
352
- - **Apply a full style** — "use a style preset for the complete system" → route to `/gsp:style`
353
- - **Continue to identity** — "use this type scale in the branding diamond" → route to `/gsp:brand-identity`
354
- - **Done** — "that's all for now"
231
+ 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.
355
232
  </process>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "get-shit-pretty",
3
- "version": "0.5.2",
3
+ "version": "0.6.0",
4
4
  "description": "Design engineering system for AI coding agents. Brand identity + design projects, from strategy to code.",
5
5
  "bin": {
6
6
  "get-shit-pretty": "bin/install.js"