Figma design-to-code workflows, design token extraction, component inspection, and asset export. Use when translating Figma designs into code, extracting design tokens, or referencing component specs.
100
100%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Advisory
Suggest reviewing before use
Quality
Discovery
100%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 that clearly defines its scope around Figma-specific workflows, lists concrete capabilities, and includes an explicit 'Use when' clause with natural trigger terms. It uses proper third-person voice and is concise without being vague. The Figma-specific focus makes it highly distinguishable from other skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: design-to-code workflows, design token extraction, component inspection, and asset export. These are distinct, well-defined capabilities. | 3 / 3 |
Completeness | Clearly answers both what (design-to-code workflows, design token extraction, component inspection, asset export) and when (translating Figma designs into code, extracting design tokens, referencing component specs) with an explicit 'Use when' clause. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'Figma', 'design-to-code', 'design tokens', 'component specs', 'asset export'. These are terms designers and developers naturally use when working with Figma. | 3 / 3 |
Distinctiveness Conflict Risk | The Figma-specific focus creates a clear niche. Terms like 'Figma', 'design tokens', 'component inspection', and 'asset export' are highly distinctive and unlikely to conflict with general coding or design skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
100%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality skill that efficiently covers Figma design-to-code workflows with concrete MCP tool examples, executable code, and a well-structured multi-step workflow with validation checkpoints and feedback loops. The content is appropriately concise, assumes Claude's competence, and uses progressive disclosure effectively by referencing external files for detailed rules.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient. It doesn't explain what Figma is or how MCP tools work conceptually—it jumps straight to the tool table, example invocations, and workflow. Every section earns its place. | 3 / 3 |
Actionability | Provides concrete MCP tool invocations with JSON examples, a complete TSX component example, specific acceptance criteria (<=4px spacing, matching token colors/fonts), and specific file paths for token output. Guidance is copy-paste ready. | 3 / 3 |
Workflow Clarity | The 6-step design-to-code workflow is clearly sequenced with explicit validation in step 5 (visual diff, DOM-attribute check with specific thresholds) and a feedback loop in step 6 that routes back to step 2 on deviation. This covers the validate→fix→retry pattern well. | 3 / 3 |
Progressive Disclosure | The skill provides a concise overview with a clear reference to the frontend-design skill for project-specific details and points to REFERENCE.md for verification scripts and translation rules—one level deep, well-signaled navigation. | 3 / 3 |
Total | 12 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
f5c8508
Table of Contents
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.