Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add commands/educlopez/ui-craft/typesetgit clone --depth 1 https://github.com/educlopez/ui-craftWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00062 | $0.01061 |
| Opus 5 | $0.00031 | $0.00531 |
| Sonnet 5 | $0.00012 | $0.00212 |
| Haiku 4.5 | $0.00006 | $0.00106 |
Grade A, and why
typeset scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
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:
-
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.
-
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.
-
Tracking (letter-spacing):
- ≥ 24px →
tracking-tight(-0.02em) or tighter for 40px+ - 14-20px body → default
- 11-13px category labels →
tracking-wide(+0.06em) + uppercase IS allowed here (the one exception) - Never ALL CAPS on headings, nav, buttons, tables
- ≥ 24px →
-
Leading (line-height):
- Headings: 1.05-1.15
- Body: 1.5-1.65
- UI (buttons, labels): 1.2-1.3
-
Weight hierarchy — pick 2-3 weights max. Common: 400 body, 500 UI/labels, 600-700 headings. Never load 9 weights "just in case".
-
Micro-typography (the compound details):
tabular-numson every number you align (tables, stats, timestamps, prices)text-wrap: balanceon headlines,text-wrap: prettyon body- Curly quotes (
'/"), em dashes (—), en dashes (–), no double hyphens in brand names, between number + unit, and before final short words in headlines- Real apostrophes in contractions
font-feature-settingsorfont-variant-*for opt-in features (ligatures, ss01, fractions)- Straight prime marks (
′,″) for units, not quotes
-
Hierarchy check — can you tell primary / secondary / tertiary at a glance? If every line has the same weight or size, collapse or amplify.
Amplifying hierarchy
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:
- Hero headline — push size to 80-120px, weight to 700-800, tracking to -0.04em. Tight leading (0.95-1.0).
- 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.
- 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):
≤ 4— skip. Boldness is a craft layer, not a baseline.5-7— apply the type amplification only. No signature motif unless asked.8+— type amplification + one signature detail (chosen at/craftfirst pass perreferences/craft-intent.md;/polishand/bolderstrengthen it — never stack a second).
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).
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 58 lines · 62 tokens per session scan A c2bcfb747a20
typeset is a command published in the GitHub repository educlopez/ui-craft (298 stars, last pushed 13d ago), licensed MIT. It adds 62 tokens to every session and 1,061 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other commands, from other repositories
hatch3r-design-system-create
Create a project design system from brand assets or an elicitation dialog — DTCG 2025.10 token emission, 3-tier taxonomy (primitive → semantic → component), OKLCH ramps, dual output design.md + design-tokens.json, gated on WCAG 2.2 AA contrast, 100% theme parity, and 0 dangling aliases.
design-context-extract
Extract design DNA from app screenshots, live URLs, or screen recordings using Google Stitch — color palettes, typography, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user points to a screenshot, URL, or video and asks to extract or audit the design…
design-system
Generate design tokens, theme configuration, or extract a design system from existing code or Figma files.
figma-sync
Detect drift between Figma designs and code implementation — compare tokens, spacing, colors, typography, and component structure.
live-canvas
Conduct design interviews, generate UI variations, and collect live click-to-annotate feedback that streams into the session so edits land without leaving the browser. Use when the user wants rapid iterative UI refinement, not just batched feedback.
ux-motion
Animation and motion rubric. Checks timing, easing, meaning, reduced-motion compliance, and performance for every animation on a surface. Triggers on "motion check", "are the animations good", or "fix the motion". Use when auditing motion or animations, checking durations / easing / reduced-motion / performance, is…