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.
Install with Tessl CLI
npx tessl i github:figma/mcp-server-guide --skill code-connect-components86
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillAgent success when using this skill
Validation for skill structure
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%
Without context: $0.2632 · 1m 11s · 8 turns · 9 in / 5,158 out tokens
With context: $0.3872 · 1m 21s · 15 turns · 14 in / 4,982 out tokens
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%
Without context: $0.2581 · 1m 17s · 8 turns · 9 in / 4,635 out tokens
With context: $0.3603 · 1m 18s · 12 turns · 72 in / 4,725 out tokens
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%
Without context: $0.2470 · 52s · 12 turns · 77 in / 3,078 out tokens
With context: $0.3744 · 1m 6s · 16 turns · 16 in / 3,518 out tokens
- Evaluated
- Agent
- Claude Code
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.