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
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 strong skill description with excellent trigger term coverage and clear completeness. The explicit 'Use when' clause with multiple natural phrases makes it highly discoverable. The main weakness is that the capability description could be more specific about what concrete actions the skill enables beyond the general 'connects' action.
Suggestions
Add more specific concrete actions like 'create Code Connect mappings', 'configure component props', 'generate connection files' to improve specificity
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Figma Code Connect) and the general action (connecting/mapping design components to code), but doesn't list multiple specific concrete actions like 'create mappings', 'update existing connections', 'validate connections', etc. | 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 specific niche targeting Figma Code Connect functionality with distinct triggers like 'code connect' and 'connect Figma to code' that 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 could be significantly condensed by removing explanatory content Claude already knows (like what Code Connect does) and moving detailed examples/troubleshooting to separate reference files. The core workflow and tool usage instructions are strong.
Suggestions
Remove or significantly condense the 'Understanding Code Connect' section - Claude doesn't need this conceptual explanation
Move the detailed examples (Examples 1-3) to a separate EXAMPLES.md file and reference it from the main skill
Consolidate the repeated node-id format conversion instructions into a single, prominent note rather than mentioning it in multiple places
Move 'Common Issues and Solutions' to a separate TROUBLESHOOTING.md file to reduce main skill length
| 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 (like the node-id format conversion mentioned multiple times). | 2 / 3 |
Actionability | Provides fully executable tool calls with specific parameter formats, concrete examples with real-looking file keys and node IDs, and clear copy-paste ready commands. The workflow steps include exact tool names and parameter structures. | 3 / 3 |
Workflow Clarity | Excellent multi-step workflow with explicit numbered steps, clear validation checkpoints ('Handle the response' sections), error recovery paths, and explicit 'Do not skip steps' instruction. Includes feedback loops for error handling and user confirmation gates. | 3 / 3 |
Progressive Disclosure | Content is well-structured 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 organized. | 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 | |
- 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.