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?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

92%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The content is a well-structured, highly actionable orchestration guide with explicit phased workflows, pervasive validation, and clean one-level-deep progressive disclosure backed by verified bundle files. The only dimension with headroom is conciseness, where a few prescriptive sections could be tightened.

Suggestions

Trim Section 1's communication-contract prose: the 'Working on Phase N.X' update format and checklist-completion notes could be condensed into a few bullets without losing the contract.

Shorten Section 5's get_libraries pagination explanation — the offset/paging detail could move to the error-recovery or discovery reference doc and be referenced inline.

DimensionReasoningScore

Conciseness

The body is dense and operational with little explanation of concepts Claude already knows, but Section 1's communication contract and parts of Section 5 are longer than strictly necessary, fitting the score-4 'minor instances of over-explanation that could be trimmed' anchor rather than fully lean.

4 / 5

Actionability

Provides concrete task IDs (P0.a-P4.e), exact API calls with return shapes (get_libraries, search_design_system), precise rules (var(--color-bg-primary), scope enums like FRAME_FILL, SHAPE_FILL), a state-ledger JSON schema, and a table of 8 real helper scripts, fully covering common cases.

5 / 5

Workflow Clarity

A strictly sequenced Phase 0-4 workflow with per-phase exit criteria, explicit validation checkpoints (get_metadata after every create, get_screenshot after each component), idempotency/resume protocols, and error-recovery references, satisfying the score-5 anchor for complex batch/destructive workflows.

5 / 5

Progressive Disclosure

SKILL.md is a clear overview with a Reference Docs table (phase, Required/Optional, Load when) and a scripts table, pointing to one-level-deep references; all 7 referenced .md files and 8 referenced .js scripts were verified to exist with no nested chaining.

5 / 5

Total

19

/

20

Passed

Description

92%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is specific, comprehensive, and explicit about both capabilities and trigger conditions, with a clear niche distinct from the sibling figma-use skill. It is nearly ideal; only trigger-term synonym breadth keeps it from a perfect mark on that one dimension.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — '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' — giving comprehensive coverage of the build process, matching the score-5 anchor.

5 / 5

Completeness

Explicitly answers both what ('Build or update a professional-grade design system in Figma from a codebase') and when ('Use when the user wants to...', 'Also use when the user asks to create or generate any component in Figma') with concrete trigger phrases, matching the score-5 anchor.

5 / 5

Trigger Term Quality

Strong natural-term coverage ('Use when the user wants to create variables/tokens', 'the user asks to create or generate any component in Figma', 'theming (light/dark modes)') but falls just short of the score-5 synonym/extension breadth anchor, which is less applicable to a Figma workflow skill.

4 / 5

Distinctiveness Conflict Risk

Carves a clear niche ('professional-grade design system in Figma from a codebase') and distinguishes itself from the sibling figma-use skill ('teaches WHAT to build... complements the figma-use skill which teaches HOW to call the Plugin API'), giving minimal conflict risk.

5 / 5

Total

19

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

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.