Menu
Map a Figma token JSON blob to DESIGN.md classes / `var(--*)` semantic tokens. Pure transformation; never edits the spec or component files.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Pull design tokens, regions, and states from a Figma frame via the Figma MCP. Pure read; emits a structured JSON blob the rest of the pipeline consumes.
Interactively draft `.specs/<name>.md` for a new webkit component. Owns the questions, the cross-reference with DESIGN.md and Figma, and the initial `status: draft` write. Never writes component code.
Make motion smooth using only @aziontech/theme animate tokens — animate-* utilities, duration-*/ease-*/curve tokens, compositor-props-only, ≤150ms interaction feedback, and a mandatory motion-reduce escape on every motion class. No external animation library, no inline cubic-bezier, no hardcoded ms.
Consume the @aziontech/webkit design system correctly. Use when adding or reviewing UI in a project that depends on @aziontech/webkit — how to find the right component, import it with the flat path, style with @aziontech/theme tokens, and keep bundles small.
Scaffold a new webkit animation into the semantic catalog (semantic/animations.js) + record the Theme gap. Used when a component needs an animation the catalog lacks, instead of a component-local @keyframes or an off-catalog animate-[…].
Fix `pnpm audit --audit-level=high` failures by bumping the offending dependency to its patched version, with a semver-aware guardrail (patch = auto, minor = validate carefully, major = ALERT and ask). Identifies the owning monorepo project and emits a status report.
| name | token-map |
| description | Map a Figma token JSON blob to DESIGN.md classes / `var(--*)` semantic tokens. Pure transformation; never edits the spec or component files. |
| status | active |
| last_updated | "2026-05-22T00:00:00.000Z" |
| scope | webkit |
| enforced_by | ["styling","migration"] |
Transform the structured JSON from figma-discover into a deterministic mapping of figma_variable → DESIGN.md token rows. Flag any Figma variable that has no equivalent as a theme gap.
/component-create, immediately after figma-discover./spec-create when populating the Tokens table of a draft spec.figma-discover..claude/docs/DESIGN.md (mirror of DESIGN.md)..claude/docs/DESIGN.md — load read-only and use it to verify any class/var the mirror does not list.variables is absent. An empty variables array is valid (emit an empty mapping with a comment).color/... → look for matching semantic var (--primary, --bg-surface, --text-default, …) in DESIGN.md's "Colors" catalog.text/... → match a generated class (.text-heading-md, .text-button-lg, …).spacing/N → match var(--spacing-N).radius/... → match var(--shape-*).shadow/... → match var(--shadow-*).container/... → match var(--container-*) or var(--container-max-width).Theme gap: yes and the closest primitive (shadow-lg, gap-2, …).### Token mapping
| Figma variable | Resolved to | Source |
|---|---|---|
| color/surface | var(--bg-surface) | DESIGN.md |
| text/heading-md | .text-heading-md | DESIGN.md |
| Figma variable | Temporary primitive | Follow-up |
|---|---|---|
| color/overlay-shadow | shadow-lg | TODO: tokenizar |
## Outputs
- The two Markdown tables above. Nothing else.
## Rules
- **Do not** invent a DESIGN.md token that does not exist. If unsure, flag a theme gap.
- **Do not** edit DESIGN.md, the spec, or any component file.
- **Do not** restate the DESIGN.md catalog beyond the mapping — the mirror in [`tokens.md`](../../docs/DESIGN.md) is enough.
- **Do not** suggest a HEX/RGB/HSL/Tailwind palette fallback. Always use a `var(--*)` primitive or a generated class.
## Fallbacks
- Empty `variables` → emit `### Token mapping\n\n_(no Figma variables)_` and skip Theme gaps.
- DESIGN.md missing → emit `BLOCKED: DESIGN.md not found at .claude/docs/DESIGN.md` and exit.
## Definition of Done
- [ ] Mapping table produced (or empty-marker comment).
- [ ] Theme gaps table produced (or empty-marker comment).
- [ ] Every "Resolved to" cell is either a `.text-*` class or a `var(--*)` literal.
- [ ] No HEX / RGB / Tailwind / external color utility in the output.