メニュー
Map a Figma token JSON blob to DESIGN.md classes / `var(--*)` semantic tokens. Pure transformation; never edits the spec or component files.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.