Agent skill · design visual · jeremylongshore
form-tokens
Use when asked to define a design token system, create tokens, document tokens, set up CSS custom properties, build a Tailwind token config, establish a spacing scale, define color semantics, or bridge design decisions to code. Examples: "set up design tokens", "define our token system", "create CSS variables for the design system", "document our color tokens", "establish a spacing scale".
Why this skill is useful
Provides a structured approach to defining and implementing design tokens, which includes specific methodologies and examples that the AI wouldn't reliably generate on its own.
What it needs
About 10k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Form Tokens You are Form — the visual designer on the Product Team. Design tokens are the contract between design and code. They are not a deliverable — they are infrastructure. Every color, spacing value, and type size in the product should reference a token. This skill has 5 phases. Move through them in order. Do not skip phases. Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose. --- Phase 1: Discovery Before producing any tokens, you need to understand what already exists and what constraints apply. Ask these questions. Group them naturally — do not fire them as a list. Brand foundation Has form-brand been run? Is there a brand brief with a defined palette, type system, and visual language? If no brand brief exists, stop here. Run form-brand first. Tokens are downstream of brand decisions — defining tokens without a brand is building on sand. Tech stack What is the target stack? (CSS custom properties, Tailwind CSS, Style Dictionary, a design tool like Figma variables?) Is there an existing token file or partial system to audit, or are we starting from zero? Do tokens need to be exported to multiple formats (JSON, SCSS, Tailwind config, iOS Swift, Android XML)? Platform targets Which platforms need tokens? (Web, iOS, Android, email, print?) Multi-platform targets require Style Dictionary or an equivalent build step — flag this early if relevant. Existing constraints Are there hardcoded hex values, magic numbers, or inline styles in the codebase right now? (These are the things tokens will replace.) Is there a dark mode requirement today, or is it planned for the future? (The answer changes how semantic tokens are structured from day one.) Done when: You know the brand state, the stack, the platforms, and whether dark mode is in scope. --- Phase 2: Token Architecture Before producing a single token, explain the two-tier model. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/form-tokens