CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

76

Quality

96%

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.

A high-quality orchestration body: scope-locked workflows with explicit validation and recovery loops, copy-paste-ready API specifics, and clean one-level-deep disclosure into real reference and script files. The only weakness is redundancy — the batching/validation cadence and scope-guard rules are each stated twice in near-verbatim form.

Suggestions

State the evidence-based validation cadence once (§1) and have §3 rule 12 reference it instead of restating it nearly verbatim, saving several lines without losing the rule.

Consolidate the repeated 'stop at scope boundary' guidance (§1 scope table, §1 definition of done, and §2 per-path 'then stop' notes) into a single authoritative statement.

DimensionReasoningScore

Conciseness

Lean and prescriptive — no tutorial padding or explanation of concepts Claude already knows — but the batching/validation cadence rules appear nearly verbatim in both §1 ("Use structural evidence returned by writes... Take one visual review per coherent composition phase and one post-fix screenshot only after a targeted visual fix") and §3 rule 12, and the scope-guard/stop guidance is restated across §1 and §2. Between anchors 3 and 4, noticeably above the midpoint: the redundancy is duplication of operational rules rather than unnecessary explanation.

4 / 5

Actionability

Fully executable specifics throughout: exact code syntax format `var(--color-bg-primary)`, scope constants (`FRAME_FILL, SHAPE_FILL`, `TEXT_FILL`, `GAP`, `CORNER_RADIUS`), copy-paste lookup expressions (`getLocalTextStyles().find(s => s.name === name)`, `figma.variables.getVariableByIdAsync(id)`), a concrete state-file path, a ledger JSON example, real `get_libraries`/`search_design_system` call signatures with parameter shapes, and a table mapping 8 real helper scripts to purposes. Matches anchor 5.

5 / 5

Workflow Clarity

Each of the four scopes has a numbered step sequence with explicit validation steps ("Validate counts, mode values, aliases, scopes, syntax, styles"), a pre-mutation scope-and-acceptance checklist, a Definition of Done checklist, idempotency checks, a resume protocol, and feedback loops ("If a required acceptance check fails, fix the scoped defect before continuing", targeted-retry splits, the `safeToRetryWithoutCanvasRead` anti-pattern). Matches anchor 5 including checklists and error-recovery loops.

5 / 5

Progressive Disclosure

SKILL.md is a navigation-ready overview: §10 gives a "Load when" table for all 7 references and §11 a purpose table for all 8 scripts — every referenced path exists in the bundle, references are one level deep, and the body explicitly instructs loading references on demand ("Read references on demand; do not infer their contents from the filename"; "Load only references needed for the selected path"). Matches anchor 5.

5 / 5

Total

19

/

20

Passed

Description

100%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.

An exemplary description: concrete and comprehensive capability list, natural trigger terms with synonyms, explicit what/when structure in third person, and an explicit delineation from the sibling figma-use skill that eliminates the main conflict risk.

DimensionReasoningScore

Specificity

Lists multiple concrete actions with comprehensive domain coverage: "Build or update a professional-grade design system in Figma from a codebase", "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". Anchor 5 fits; anchor 4 ("minor gaps in coverage") understates the breadth of concrete actions named.

5 / 5

Completeness

Explicitly answers both: what ("Build or update a professional-grade design system in Figma from a codebase") and when (two "Use when..." clauses with concrete trigger phrases, including the any-single-component case). Matches anchor 5's structure exactly; anchor 4's caveat about 'when' being less explicit does not apply. Third-person voice throughout — no voice penalty.

5 / 5

Trigger Term Quality

Covers the natural phrases users would say: "design system in Figma", "component libraries", "variables/tokens", "theming (light/dark modes)", "reconcile gaps between code and Figma", and "create or generate any component in Figma — even a single one" (a create/generate synonym pair plus the single-component edge case). Anchor 5 applies; synonyms and common variations are present.

5 / 5

Distinctiveness Conflict Risk

Clear niche (Figma design-system construction) with a distinct trigger vocabulary. It explicitly delineates from its closest sibling: "it complements the `figma-use` skill which teaches HOW to call the Plugin API" — and the deliberate broad trigger for any Figma component is resolved by instructing both skills load together, so overlap with figma-use is intended complementarity, not conflict.

5 / 5

Total

20

/

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository

figma/mcp-server-guide

Path

skills/figma-generate-library/SKILL.md

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.