CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-generate-library

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

Quality

92%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Advisory

Suggest reviewing before use

SKILL.md
Quality
Evals
Security

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.

DimensionReasoningScore

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.

DimensionReasoningScore

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.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
figma/mcp-server-guide
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.