skills.rest
aziontech
aziontechOFFICIAL
Explore all skills by this author →
Website𝕏@aziontechGitHub

code-connect-write

Generate Figma-to-Vue Code Connect mapping files from variants and slots.

2|5|Updated Oct 24, 2023
Search Tags:#design system#vue#figma#storybook#component integration#code connect#mapping generation
One-click install
npx skills add https://github.com/aziontech/webkit --skill code-connect-write
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: code-connect-write
Source: https://github.com/aziontech/webkit/tree/main/.claude/skills/code-connect-write
Command: npx skills add https://github.com/aziontech/webkit --skill code-connect-write

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the manual effort of wiring Figma component variants (kind/size/state) and slots to corresponding Vue props and children, so the Dev Mode snippet and Vue integration stay consistent.

Core Features & Use Cases

  • Auto-generates .figma.ts mappings for a component by translating spec values into figma.connect props and example HTML.
  • Maps Figma slots to Vue children so labels and other slot content render correctly in the Vue component.
  • Guides safe authoring without publishing by writing the mapping file only and skipping any publish steps that require credentials.

Quick Start

Run the code-connect-write skill as part of /component-create after the scaffolder and storybook-write steps complete.

Frequently Asked Questions about code-connect-write

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Figma-to-Vue code connect mappings?▼

Figma-to-Vue code connect mappings require the `@figma/code-connect` dependency and a prerequisite `figma:figma-code-connect` step. You also need `.specs/<name>.md` files and the Figma `node_id` to drive the mapping generation.

What is the best way to map Figma variants to Vue props?▼

Figma-to-Vue code connect mapping generation skips or blocks on missing dependencies or variant/spec mismatches. It also skips any publish steps that require credentials, focusing solely on writing the `.figma.ts` mapping file.

Can I use code-connect-write without publishing the Vue component?▼

Yes, code-connect-write guides safe authoring by writing only the `.figma.ts` mapping file and skipping any publish steps that require credentials. This ensures the Dev Mode snippet and Vue integration remain consistent without publishing.

Why does Figma Code Connect fail for my Vue component?▼

Figma Code Connect fails or blocks when there are missing dependencies like `@figma/code-connect`, or when variant/spec mismatches occur between the `.specs/<name>.md` file and the Figma component variants being mapped.

Related Skills

Explore More Design & Creative Skills→
coinbasecoinbase
493

figma.create-connect

Generate Figma Code Connect mapping files for React components.

Official
Intermediate
strongeronstrongeron
18

sb-stories

Generate conformant CSF3 stories for React components with validation gates.

Community
Advanced
elsolalelsolal
1

figma-to-code

Convert Figma design selections into React, Vue, or HTML code.

Community
Advanced
aziontechaziontech
2

echo-report

Diff generated Vue components, stories, and Figma mappings against written specs.

Official
Advanced