Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
74
92%
Does it follow best practices?
Impact
—
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 an excellent skill description that is specific, comprehensive, and well-differentiated. It lists concrete actions, provides multiple explicit trigger conditions via 'Use when...' clauses, includes natural keywords users would say, and clearly distinguishes itself from the companion figma-use skill. The description is detailed without being padded, and uses proper third-person voice throughout.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: create variables/tokens, build component libraries, create individual components with variant sets and variable bindings, set up theming (light/dark modes), document foundations, reconcile gaps between code and Figma. | 3 / 3 |
Completeness | Clearly answers both 'what' (build/update design systems, create variables/tokens, build component libraries, set up theming, etc.) and 'when' with explicit 'Use when...' clauses covering multiple trigger scenarios including the broader case of creating any single component in Figma. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'design system', 'Figma', 'variables', 'tokens', 'component libraries', 'theming', 'light/dark modes', 'create or generate any component', 'variant sets', 'design token bindings'. These are terms a user working with Figma design systems would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly carves out a distinct niche (Figma design systems from codebases) and explicitly differentiates itself from the related 'figma-use' skill by explaining the division of responsibility (WHAT to build vs HOW to call the API). This makes it very unlikely to conflict with other skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
85%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, production-grade skill that excels at workflow orchestration for a genuinely complex multi-phase task. Its strengths are the rigorous phase structure with validation checkpoints, concrete actionable guidance throughout, and well-organized progressive disclosure to reference docs and scripts. The main weakness is moderate verbosity — some content is repeated across sections (Plugin API rules, anti-patterns restating critical rules) and could be tightened, though the complexity of the domain partially justifies the thoroughness.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is comprehensive but includes some redundancy — Plugin API basics are repeated from the figma-use skill, anti-patterns partially restate the critical rules, and some explanations could be tightened. However, most content earns its place given the complexity of the domain. | 2 / 3 |
Actionability | Highly actionable with concrete code snippets (variable aliasing syntax, sharedPluginData tagging, search_design_system calls), specific naming patterns, exact scope assignments, state ledger JSON schema, and executable helper script references. The guidance is specific enough to follow without ambiguity. | 3 / 3 |
Workflow Clarity | Exemplary multi-phase workflow with explicit phase ordering, clear exit criteria per phase, mandatory user checkpoints with specific artifacts required, validation steps (get_metadata + get_screenshot after every component), error recovery guidance, and explicit feedback loops ('If user rejects: fix before moving on'). The resume protocol adds robustness for long workflows. | 3 / 3 |
Progressive Disclosure | Excellent progressive disclosure structure: the SKILL.md serves as an authoritative overview with a clear reference table mapping each doc to its phase and load trigger. Scripts are listed with purpose summaries. References are one level deep and clearly signaled with relative paths and contextual guidance on when to load each one. | 3 / 3 |
Total | 11 / 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 |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
a742f0a
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.