Menu
Generate the `<name>.figma.ts` Code Connect mapping. Skipped automatically when `@figma/code-connect` is not installed.
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 | code-connect-write |
| description | Generate the `<name>.figma.ts` Code Connect mapping. Skipped automatically when `@figma/code-connect` is not installed. |
| status | active |
| last_updated | "2026-05-22T00:00:00.000Z" |
| scope | webkit |
| enforced_by | ["no-invention","prop-vocabulary","naming"] |
Map Figma variants (kind / size / state) → Vue props, Figma slots → Vue children, and emit the snippet Dev Mode shows in the Figma file. The file lives next to the .vue at packages/webkit/src/components/webkit/<category>/<name>/<name>.figma.ts.
/component-create, after the scaffolder and storybook-write succeeded..specs/<name>.md (Props, Events, Slots, States).figma.node_id (frontmatter).@figma/code-connect is installed (check packages/webkit/package.json).Pre-flight. If @figma/code-connect is not in packages/webkit/package.json devDependencies, emit SKIPPED: @figma/code-connect not installed and exit. The orchestrator records this as a pending item.
Load prerequisite skill. Invoke figma:figma-code-connect (mandatory before any Code Connect tool call).
Write <name>.figma.ts using this skeleton (substitute spec values):
import { figma } from '@figma/code-connect'
import <PascalName> from './<name>.vue'
figma.connect(<PascalName>, '<figma.url>', {
props: {
kind: figma.enum('kind', {
primary: 'primary',
secondary: 'secondary',
outlined: 'outlined',
text: 'text'
}),
size: figma.enum('size', {
small: 'small',
medium: 'medium',
large: 'large'
}),
disabled: figma.boolean('disabled'),
label: figma.children('label')
},
example: (props) => /* html */ `
<${'<PascalName>'} :kind="${'${props.kind}'}" :size="${'${props.size}'}" :disabled="${'${props.disabled}'}">
${'${props.label}'}
</${'<PascalName>'}>
`
})
Stop. Do not call add_code_connect_map, do not call send_code_connect_mappings, do not publish anything. Publishing requires FIGMA_ACCESS_TOKEN and is the user's call.
packages/webkit/src/components/webkit/<category>/<name>/<name>.figma.ts (or SKIPPED line).figma.enum keys must match the spec's prop values exactly..figma.ts works without the token; publishing does not.figma.config.json. It is already configured for parser: "html" and include: ["src/**/*.figma.ts"].@figma/code-connect missing → emit SKIPPED: dep missing.BLOCKED: figma variants mismatch spec: <list>..figma.ts file is written, or SKIPPED: <reason> is emitted.figma.connect references the actual .vue import and the spec's figma.url.figma.* mapping or is documented as not mapped.