friction-log
File contributor or agent papercuts as GitHub issues labeled friction, or investigate those issues as the daily friction-log…
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
Claude Code
$ npx -y skills add educlopez/ui-craft --skill typeset --agent claude-code
Codex
$ npx skills add educlopez/ui-craft --skill typeset -a codex -y
Cursor
$ npx skills add educlopez/ui-craft --skill typeset -a cursor -y
Gemini CLI
$ npx skills add educlopez/ui-craft --skill typeset -a gemini-cli -y
GitHub Copilot
$ npx skills add educlopez/ui-craft --skill typeset -a github-copilot -y
OpenCode
$ npx skills add educlopez/ui-craft --skill typeset -a opencode -y
Windsurf
$ npx skills add educlopez/ui-craft --skill typeset -a windsurf -y
name: typeset 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\". Invoke when the user asks for typeset on their UI, or mentions 'typeset' alongside design / UI / frontend work."
<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
**Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
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.
File contributor or agent papercuts as GitHub issues labeled friction, or investigate those issues as the daily friction-log…
Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex +…
Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif…
Minimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2. Monochrome + one…
Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery…
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch…
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
Ask which skill or flow fits your situation. A router over the skills in this repo.