synerise-design: Skill for Claude Code

Overview

Generate a <ComponentName>.figma.tsx file that connects a React component to its Figma design using the @figma/code-connect library.

Arguments

The user must provide:

1. Component name — e.g., Switch, Button, Avatar

The user may optionally provide:

• Figma URL — the Figma node URL for the component (from Figma dev mode)
• Figma variant properties and their values
• Which props map to which Figma properties
• Nested component props (e.g., Label, Description sub-layers)

Figma Design System File

• File key: fsSZONXpVvtrDsCgtu01Jb
• URL pattern: https://www.figma.com/design/fsSZONXpVvtrDsCgtu01Jb/Synerise-Design-System?node-id=<nodeId>&m=dev

Workflow

Step 1 — Locate the component

Find the component source files:

packages/components/<component-name>/src/<ComponentName>.tsx
packages/components/<component-name>/src/<ComponentName>.types.ts
packages/components/<component-name>/src/index.ts

Read these files to understand:

• The component's props interface (from .types.ts)
• Named exports and default export (from index.ts and the main component file)
• What the component renders and how props affect it

Step 2 — Get Figma structure via MCP

If the Figma MCP server is available (tools like mcp__figma__get_design_context exist), use it to get the component details:

1. If the user provided a Figma URL, extract fileKey and nodeId from it.
2. If no URL was provided, search for the component using the Figma REST API:

   curl -s -H "X-Figma-Token: <token>" "https://api.figma.com/v1/files/fsSZONXpVvtrDsCgtu01Jb/component_sets" \
     | python3 -c "import sys,json; [print(json.dumps({...})) for cs in json.load(sys.stdin)['meta']['component_sets'] if '<name>' in cs['name'].lower()]"
   

3. Call mcp__figma__get_design_context with the nodeId and fileKey to get design context, screenshots, and code suggestions.
4. If MCP suggests Code Connect mappings (via get_code_connect_suggestions), follow the flow to map sub-components (like Button) and then use the returned design context.