Menu
Generate the `<name>.figma.ts` Code Connect mapping. Skipped automatically when `@figma/code-connect` is not installed.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional 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 | 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.