code-connect-components
Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. Requires Figma MCP server connection.
88
83%
Does it follow best practices?
Impact
100%
1.23xAverage score across 3 eval scenarios
Advisory
Suggest reviewing before use
Evaluation results
100%
20%Figma URL Validation Utility
URL parsing & node-id normalization
Hyphen-to-colon conversion
100%
100%
Multi-segment node-id conversion
100%
100%
fileKey extraction
100%
100%
Missing node-id rejection
0%
100%
Combined extraction output
100%
100%
Handles standard URL structure
100%
100%
100%
5%Component Library Design-Code Matching Analysis
Component codebase discovery & matching
Searched component directories
100%
100%
Prop alignment comparison
100%
100%
Framework detection
100%
100%
Language detection
37%
100%
Ambiguous match: two candidates shown
100%
100%
Ambiguous match: reasoning documented
100%
100%
Source paths relative to root
100%
100%
Structural JSON report
100%
100%
No user prompt for paths
100%
100%
Beyond-name matching
100%
100%
100%
30%Design System Code Connect Handoff Package
Mapping configuration & summary report
nodeId colon format
0%
100%
Valid label value
0%
100%
Source paths relative
100%
100%
Rejected mapping excluded
100%
100%
Summary: connected count
100%
100%
Summary: could-not-connect
100%
100%
componentName correctness
100%
100%
Structured output file
100%
100%
- Repository
- figma/mcp-server-guide
- Commit
f046182
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.