Creates and maintains Figma Code Connect files mapping Figma components to React code.
npx skills add https://github.com/LedgerHQ/lumen --skill code-connect-ledgerhq
Please help me install this Agent Skill. Skill: code-connect Source: https://github.com/LedgerHQ/lumen/tree/main/.claude/skills/code-connect Command: npx skills add https://github.com/LedgerHQ/lumen --skill code-connect-ledgerhq
*.figma.tsx) that map Figma components to real React and React Native code, so Figma Dev Mode shows accurate, copy-paste-ready snippets. ## Core Features & Use Cases - Parser-based mapping: Authors Component.figma.tsx files using figma.connect() from @figma/code-connect, co-located with each component in libs/ui-react and libs/ui-rnative. - Prop mapping patterns: Maps Figma text, enum, boolean, nested child, and instance properties to code props using figma.string, figma.enum, figma.boolean, figma.children, and figma.instance, including nested mappings for multi-axis logic. - Review and validation checks: Enforces best practices such as flat example renders, complete enum mappings, published package specifiers in imports, and no invented props, with a diff-verifiable review checklist. - Use Case: A developer adds a new Tag component variant in Figma and needs the corresponding Tag.figma.tsx updated so Dev Mode displays the correct @ledgerhq/lumen-ui-rnative usage snippet. ## Quick Start Ask the assistant to create or update the .figma.tsx Code Connect file for a specific component, providing the Figma node URL and the component's props.High-intent search queries and answers about installing and using this skill.
Create a Component.figma.tsx file co-located with the component and call figma.connect(Component, figmaUrl, { imports, props, example }). Map Figma properties with helpers like figma.string and figma.enum, and keep the example a flat render of the mapped props.
Use figma.enum('name', { FigmaValue: codeValue }) and map every Figma value, since an unmapped value returns undefined. For multi-axis logic, nest figma.enum or figma.boolean calls inside the props object rather than branching in the example.
Yes, multiple figma.connect() calls per file are normal. A compound component like Card maps each part (Card, CardHeader, etc.) with its own connect call and example in a single file.
This happens when figma.enum does not map every value of the Figma property, since unmapped values return undefined. It can also occur when figma.boolean maps false to undefined, which intentionally omits the prop.
The imports array must use published package specifiers such as @ledgerhq/lumen-ui-react or @ledgerhq/lumen-ui-rnative/symbols, never relative paths. These are the statements consumers see in Figma Dev Mode snippets.
Only libs/ui-react and libs/ui-rnative have figma.config.json with Code Connect coverage. Do not add .figma.tsx files to the visualization libraries, and do not author .figma.ts MCP template-style files in this codebase.
coinbaseGenerate Figma Code Connect mapping files for React components.
LAF-USGenerate parserless .figma.js Code Connect templates from Figma URLs.
coinbaseAudit Figma Code Connect mapping files for accuracy and completeness.
calvingitGenerate Figma Code Connect template files from component URLs.