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".
npx skills add jeremylongshore/claude-code-plugins-plus-skills --skill form-tokens --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Guides the agent to define and manage a token system for a design system, covering color primitives and semantics, spacing, typography, borders, radii, elevation, and z-index. It describes a structured, phase-based process (Discovery, Token Architecture, Token Categories) and provides concrete token examples and naming conventions. It also specifies how tokens map from primitive to semantic values and how to structure tokens for multi-format exports and usage in CSS/Tailwind. The output format is constrained to a 40-line CLI-like box with a severity indicator, outlining the token system design and usage constraints.
How it works
- Phase 1: Discovery gathers brand foundation, tech stack, platform targets, and constraints, ensuring a brand brief exists and clarifying token formats and exports. 2) Phase 2: Token Architecture explains the two-tier model: primitive tokens (raw values) and semantic tokens (meaning-bearing aliases). It enforces the rule: Component → semantic token → primitive token → raw value. 3) Design Intelligence step seeds initial values via a design-system generator command:
python3 -m form_agent.uiux design-system --product-type "{product_type}", then derives primitive color tokens, typography tokens, and validates spacing/effects against style recommendations. 4) Phase 3 defines token categories in order: 3.1 Color Primitives, 3.2 Color Semantic, 3.3 Spacing Scale, 3.4 Typography, 3.5 Border Radius, 3.6 Shadow/Elevation, 3.7 Z-Index. Each category provides explicit token examples and naming rules, including base unit 8px for spacing and a modular scale for typography. 5) The skill emphasizes not skipping phases and instructs using specific token groupings, with explicit CSS variable examples and constraints (e.g., do not reference primitives directly in components, and do not add non-scale spacing).
When to use it
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 include: "set up design tokens", "define our token system", "create CSS variables for the design system", "document our color tokens", "establish a spacing scale".
What it can touch
Targets CSS custom properties, Tailwind config, and token files as part of a design-system workflow. It references tokens and a two-tier model to map components to semantic tokens and primitives. The content includes concrete token names, values, and groupings (e.g., --space-4, --color-action-primary, --color-surface-default, --font-sans, --text-base, --shadow-base, --z-base). It also mentions a build/seed command: python3 -m form_agent.uiux design-system --product-type "{product_type}".
Caveats
No licensing or risk notes beyond token architecture constraints are provided in this draft. The guidance relies on brand decisions and a pre-existing brand brief; if absent, the workflow halts at Phase 1. The phase-based process instructs not to skip, and emphasizes semantic layering over direct primitive usage in components.
# 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
What does the form-tokens skill do?
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".
How do I install it?
Run `npx skills add jeremylongshore/claude-code-plugins-plus-skills --skill form-tokens --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jeremylongshore/claude-code-plugins-plus-skills, a repository with 2,596 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.