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.
- package/.claude-plugin/plugin.json +1 -1
- package/bin/install.js +3 -0
- package/gsp/agents/gsp-builder.md +1 -1
- package/gsp/skills/gsp-accessibility/SKILL.md +51 -186
- package/gsp/skills/gsp-accessibility-audit/SKILL.md +218 -0
- package/gsp/skills/gsp-brand-audit/SKILL.md +1 -3
- package/gsp/skills/gsp-brand-identity/SKILL.md +1 -3
- package/gsp/skills/gsp-brand-patterns/SKILL.md +3 -9
- package/gsp/skills/gsp-brand-refine/SKILL.md +147 -0
- package/gsp/skills/gsp-brand-research/SKILL.md +1 -3
- package/gsp/skills/gsp-brand-strategy/SKILL.md +1 -3
- package/gsp/skills/gsp-brand-sync/SKILL.md +2 -4
- package/gsp/skills/gsp-doctor/SKILL.md +1 -1
- package/gsp/skills/gsp-help/SKILL.md +1 -0
- package/gsp/skills/gsp-launch/SKILL.md +3 -8
- package/gsp/skills/gsp-palette/SKILL.md +2 -0
- package/gsp/skills/gsp-project-brief/SKILL.md +3 -11
- package/gsp/skills/gsp-project-build/SKILL.md +2 -5
- package/gsp/skills/gsp-project-critique/SKILL.md +4 -8
- package/gsp/skills/gsp-project-design/SKILL.md +3 -9
- package/gsp/skills/gsp-project-research/SKILL.md +2 -5
- package/gsp/skills/gsp-project-review/SKILL.md +4 -6
- package/gsp/skills/gsp-start/SKILL.md +21 -118
- package/gsp/skills/gsp-style/SKILL.md +11 -174
- package/gsp/skills/gsp-typescale/SKILL.md +38 -161
- package/package.json +1 -1
|
@@ -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
|
-
|
|
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
|
|
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
|
-
|
|
251
|
-
-
|
|
252
|
-
-
|
|
253
|
-
-
|
|
254
|
-
-
|
|
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
|
-
|
|
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** —
|
|
121
|
-
|
|
122
|
-
|
|
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
|
|
126
|
+
Generate a 9-level scale: `size = base × ratio^n`. Round px to nearest 0.5px, rem = `px / 16`.
|
|
141
127
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
|
149
|
-
|
|
150
|
-
|
|
|
151
|
-
|
|
|
152
|
-
|
|
|
153
|
-
|
|
|
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
|
-
|
|
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
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
|
173
|
-
|
|
174
|
-
|
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
|
|
|
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
|
|
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
|
|
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
|
|
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` —
|
|
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
|
-
|
|
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
|
-
|
|
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