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
Quality
Discovery
89%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a well-crafted skill description with excellent trigger term coverage and completeness. The explicit 'Use when' clause with multiple natural language variations ensures reliable skill selection. The main weakness is that the capability description could be more specific about what concrete actions the skill performs beyond the general 'connects' verb.
Suggestions
Add 2-3 specific concrete actions like 'generate Code Connect configuration files', 'map component props to code', or 'validate existing connections' to improve specificity.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description names the domain (Figma Code Connect) and the general action (connecting design components to code components), but lacks specific concrete actions like 'generate mapping files', 'sync component props', or 'validate connections'. | 2 / 3 |
Completeness | Clearly answers both what (connects Figma design components to code components using Code Connect) and when (explicit 'Use when' clause with comprehensive trigger phrases). Also notes the requirement for Figma MCP server connection. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms including 'code connect', 'connect this component to code', 'connect Figma to code', 'map this component', 'link component to code', and variations users would naturally say. | 3 / 3 |
Distinctiveness Conflict Risk | Very distinct niche focusing specifically on Figma Code Connect functionality. The specific trigger terms like 'code connect', 'Figma to code', and 'design to code' are unlikely to conflict with other skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured, highly actionable skill with excellent workflow clarity and explicit validation steps. The main weakness is verbosity - the skill explains some concepts Claude already knows and includes extensive inline examples that could be referenced from separate files. The troubleshooting section is comprehensive but adds significant length.
Suggestions
Remove or significantly condense the 'Understanding Code Connect' section - Claude doesn't need an explanation of what bidirectional design-code links are
Move the detailed examples (Example 1, 2, 3) to a separate EXAMPLES.md file and reference it from the main skill
Consolidate the 'Common Issues and Solutions' section into a separate TROUBLESHOOTING.md file to reduce main skill length
Remove redundant prerequisite mentions - the IMPORTANT notes about published components and node-id appear multiple times
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is moderately verbose with some unnecessary explanations (e.g., 'Understanding Code Connect' section explains concepts Claude likely knows). The examples are thorough but could be condensed, and some sections repeat information (prerequisites mentioned multiple times). | 2 / 3 |
Actionability | Provides fully executable tool calls with specific parameter formats, clear examples of URL parsing, and concrete code snippets. The workflow steps include exact tool names and parameter structures that are copy-paste ready. | 3 / 3 |
Workflow Clarity | Excellent multi-step workflow with explicit numbered steps, clear validation checkpoints (handle response conditions), and feedback loops for error recovery. Each step has clear success/failure handling and the user confirmation step before creating mappings is well-defined. | 3 / 3 |
Progressive Disclosure | Content is well-organized with clear sections, but the skill is quite long (~350 lines) and could benefit from splitting detailed examples and troubleshooting into separate files. The 'Additional Resources' section appropriately links to external docs, but inline content could be better distributed. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata.version' is missing | Warning |
Total | 10 / 11 Passed | |
- Repository
- figma/mcp-server-guide
- Commit
f046182
- Reviewed
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.