adapt
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when…
Typography pass covering font choice, modular scale, tracking, leading, weight hierarchy, and micro-typography details. Use when fonts feel generic (default Inter with no reason), the scale is ad hoc, hierarchy is flat, or the user says "fix the typography" / "the text doesn't
> /plugin marketplace add educlopez/ui-craft > /plugin install ui-craft@ui-craft
How it fires
How this command gets triggered: by you, by Claude, or both.
/typesetContext preview
What this command does when you run it.
Typography pass covering font choice, modular scale, tracking, leading, weight hierarchy, and micro-typography details. Use when fonts feel generic (default Inter with no reason), the scale is ad hoc, hierarchy is flat, or the user says "fix the typography" / "the text doesn't
description: Typography pass covering font choice, modular scale, tracking, leading, weight hierarchy, and micro-typography details. Use when fonts feel generic (default Inter with no reason), the scale is ad hoc, hierarchy is flat, or the user says "fix the typography" / "the text doesn't feel right". argument-hint: "[file or component path]"
Typeset the UI at `$ARGUMENTS`. Load the `ui-craft` skill and read `references/typography.md`.
**Note:** typeset is knob-agnostic — typography rules (no ALL CAPS on headings, tracking-tight ≥24px, one body font, etc.) are not tunable.
**Apply, in order:**
1. **Font inventory** — what's loaded? If Inter is the default choice with no reason, ask before accepting it (Inter is the #1 AI-tell). Good alternatives: Geist, DM Sans, Plus Jakarta Sans, system stack. One body font, optionally one display font. Never three.
2. **Scale** — is there a scale or are sizes ad hoc? Anchor to a modular scale (1.125 / 1.2 / 1.25). Sizes: 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 / 72. No 13px / 15px / 17px one-offs unless optical.
3. **Tracking (letter-spacing)**:
4. **Leading (line-height)**:
5. **Weight hierarchy** — pick 2-3 weights max. Common: 400 body, 500 UI/labels, 600-700 headings. Never load 9 weights "just in case".
6. **Micro-typography** (the compound details):
7. **Hierarchy check** — can you tell primary / secondary / tertiary at a glance? If every line has the same weight or size, collapse or amplify.
If the UI is technically correct but forgettable, use typography as the weapon. **Pick ONE element to carry signature** (never two); boldness is typography, not color or decoration:
1. **Hero headline** — push size to 80-120px, weight to 700-800, tracking to -0.04em. Tight leading (0.95-1.0). 2. **Hierarchy jump** — widen the gap between H1 and body. If H1 is 32px and body is 16px, the UI is whispering; if H1 is 48px+, the ratio reads. Compress or expand the range deliberately. 3. **Micro-motif** — one custom detail that repeats: a hand-drawn underline, numeric counters (`01`, `02`), an asymmetric supporting element, a distinctive list marker.
**Knob gating for amplification (CRAFT_LEVEL):**
**Pre-check:** if an accent is already overused or hierarchy is already loud, you don't have a tameness problem — you have a noise problem. Route to `/distill` (cut) or `/colorize` (reduce accents) instead.
**Output**: edit code directly. Print the Review Format table. Call out the single highest-impact change (usually: "font choice" or "tracking-tight on hero").
**Next step:** `/polish` — micro-details land best right after the type system is set (rung 1).
Ship designer-grade UI by default. A design engineering system for AI coding agents — install it as a skill or as the ui-craft CLI, and your agent starts designing like it has taste. Ask for a dashboard, get one you'd put in production.
Repo: educlopez/ui-craft
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when…
Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack. Use when the user…
Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table.
Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe,…
Write or update the project's durable design brief at .ui-craft/brief.md.
UX copy review across buttons, errors, empty states, and form hints — critiques by default, applies only on request. Use when copy feels vague, generic, or…