code-connect-write
OfficialGenerate Figma-to-Vue Code Connect mappings.
Design & Creative#design system#vue#figma#storybook#component integration#code connect#mapping generation
Authoraziontech
Version1.0.0
Installs0
System Documentation
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.tsmappings for a component by translating spec values intofigma.connectprops 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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: code-connect-write Download link: https://github.com/aziontech/webkit/archive/main.zip#code-connect-write Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.