webkit: Skill for Claude Code

Skill: code-connect-write

Purpose

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/<category>/<name>/<name>.figma.ts.

When to invoke

• Step 6 of /component-create, after the scaffolder and storybook-write succeeded.

Inputs

• The full text of .specs/<name>.md (Props, Events, Slots, States).
• The spec's figma.node_id (frontmatter).
• The orchestrator's confirmation that @figma/code-connect is installed (check packages/webkit/package.json).

Workflow

1. 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.

2. Load prerequisite skill. Invoke figma:figma-code-connect (mandatory before any Code Connect tool call).

3. Read the Figma properties. Call get_context_for_code_connect on the spec's figma.node_id. It must be a COMPONENT or COMPONENT_SET; a frame id is a spec defect → BLOCKED: figma.node_id is not a component. Property names are case-sensitive and are copied verbatim. Webkit Figma properties mirror the code: names are lowerCamelCase (showIcon, state, modelValue) and variant options are lowercase (size=large, disabled=true). A capitalized or spaced name in Figma is a library defect to report, not a name to copy.

4. Write <name>.figma.ts as a parserless template — never figma.connect(), never @figma/code-connect/html, never a .vue import:

   // url=https://www.figma.com/design/<fileKey>/<FileName>?node-id=<X-Y>
   // source=https://github.com/aziontech/webkit/blob/main/packages/webkit/src/components/<category>/<name>/<name>.vue
   // component=<PascalName>
   import figma from 'figma'
   
   const instance = figma.selectedInstance
   
   const label = instance.getString('label')
   const kind = instance.getEnum('kind', {
     primary: 'primary',
     secondary: 'secondary'
   })
   const disabled = instance.getEnum('disabled', {
     false: false,
     true: true
   })
   
   export default {
     example: figma.code`<<PascalName>
     label="${label}"${kind === 'primary' ? '' : figma.code`
     kind="${kind}"`}${disabled ? figma.code`
     disabled` : ''}
   />`,
     imports: ["import <PascalName> from '@aziontech/webkit/<name>'"],
     id: '<name>',
     metadata: { nestable: true }
   }