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.

Quality

91%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

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

An excellent orchestration manual: four clearly sequenced scoped workflows with explicit validation checkpoints, a concrete definition of done, and deeply actionable specifics (enums, syntax formats, thresholds, state schemas) backed by a complete, verified one-level-deep reference and script bundle. The main cost is token duplication — validation-economy rules and anti-patterns restate the Critical Rules — which makes the body longer than it needs to be without adding information.

Suggestions

Consolidate the duplicated validation-economy guidance: Section 1's third paragraph and Critical Rule 12 state the same batching/evidence/one-screenshot rules nearly verbatim — keep one canonical statement (the Critical Rule) and trim the other to a pointer.

Cut or compress the Section 9 Anti-Patterns entries that restate Critical Rules (ALL_SCOPES, variant-per-icon, (0,0) stacking, >30 matrix, parallel calls, guessed IDs, inline scripts) down to only the anti-patterns not already covered as rules, saving roughly 20-30 lines.

Tighten the multi-clause prose sentences in Sections 1-2 (e.g., the four-line batching paragraph) into the table/bullet style already used elsewhere; the same rules rendered as short bullets would preserve clarity at lower token cost.

DimensionReasoningScore

Conciseness

The body is domain-dense and assumes Claude's competence (no generic Figma or design-system explainers), but it could be tightened: the validation-economy guidance appears nearly verbatim twice ('Batch related operations... run a separate audit only when evidence is missing' in Section 1 vs. Critical Rule 12), and the Section 9 Anti-Patterns list restates roughly ten of the fifteen Critical Rules. This is more than the 'minor instances' of the level-4 anchor, though well short of heavily padded.

3 / 5

Actionability

Highly executable throughout: exact variable-scope enums ('Background: FRAME_FILL, SHAPE_FILL. Text: TEXT_FILL.'), exact code-syntax format ('var(--color-bg-primary), not --color-bg-primary'), exact alias structure ('{ type: VARIABLE_ALIAS, id: primitiveVar.id }'), concrete MCP call signatures with parameter shapes, a JSON state-ledger schema with a real file path, numeric thresholds ('if Size × Style × State > 30 combinations, split'), and an eight-script helper library that all exist in the bundle. Per the rubric's code-vs-instruction note, deferring Plugin API code to scripts/ and references is appropriate for an orchestration skill, and the inline guidance is specific down to enum values.

5 / 5

Workflow Clarity

Each of the four scoped paths is a numbered sequence with an explicit validation step and stop condition ('Validate counts, mode values, aliases, scopes, syntax, styles... then stop'), reinforced by a Definition of Done checklist, failure feedback loops ('If a required acceptance check fails, fix the scoped defect before continuing'), idempotency checks before every create, and a resume protocol for truncated sessions. This matches the level-5 anchor: clear sequencing, explicit validation, error-recovery loops, and checklists for a complex process.

5 / 5

Progressive Disclosure

Verified against the actual bundle: all seven references cited in the Reference Docs table and all eight scripts in the Scripts table exist as real files, are one level deep, and are signaled with a 'Load when' column plus 'Read references on demand; do not infer their contents from the filename.' Inline material (naming examples, token architecture) is kept as a summary with a pointer to the full reference, and body length is justified as the routing hub for four scoped paths. The only minor caveat is one cross-skill link (../figma-use/references/gotchas.md) that resolves outside this bundle, which the Prerequisites section declares as a co-required skill.

5 / 5

Total

18

/

20

Passed

Description

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

A strong description that pairs a concrete capability list with explicit, granular 'Use when' triggers and synonym coverage. Its only weaknesses are the mild 'professional-grade'/'production-quality' puffery and a deliberately broad single-component trigger that overlaps the companion figma-use skill, though that relationship is explicitly reconciled by instructing both skills to load together.

DimensionReasoningScore

Specificity

Lists multiple specific 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 domain. The 'professional-grade'/'production-quality' qualifiers are mild buzz, but they qualify concrete actions rather than replacing them, so this is not the level-4 'minor gaps' anchor.

5 / 5

Completeness

Explicitly answers both questions: 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 — even a single one'). Concrete trigger phrases are attached to each capability, matching the level-5 anchor exactly.

5 / 5

Trigger Term Quality

Comprehensive natural-term coverage including synonyms: 'create or generate any component', 'variables/tokens', 'theming (light/dark modes)', 'build component libraries', and 'reconcile gaps between code and Figma'. Users asking to build a design system, create a Figma component, or set up dark mode would naturally use these phrases; no meaningful natural term is missing for this domain (file extensions are not applicable).

5 / 5

Distinctiveness Conflict Risk

The Figma design-system-from-codebase niche is clear and it explicitly disambiguates from the sibling skill ('it complements the `figma-use` skill which teaches HOW to call the Plugin API'), keeping conflict risk low. However, deliberately claiming 'any component in Figma — even a single one' widens the trigger net into the sibling skill's territory; the overlap is managed but present, which fits 'mostly distinct; minor overlap risk' better than the minimal-conflict level-5 anchor.

4 / 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.

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.