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

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

85%

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

A high-quality, highly actionable skill body with excellent workflow sequencing, validation checkpoints, and a clean one-level reference/script structure. The only weakness is length: some operational prose and anti-pattern lists duplicate the critical-rules section and could be condensed.

Suggestions

Tighten Section 1's communication contract into a compact protocol spec and merge the Section 9 anti-patterns that merely restate Section 3 critical rules, removing the duplication.

Consider moving the long Section 5 library-discovery parameter examples into a reference doc, keeping only the reuse decision matrix inline in SKILL.md.

Trim explanatory restatements like "This is NEVER a one-shot task" once the 20–100+ call requirement and per-unit validation rules already convey that constraint.

DimensionReasoningScore

Conciseness

The body is dense and largely specialized Figma/Plugin-API knowledge Claude does not already know, so most tokens earn their place; however it runs long and some prose could be tightened — e.g. the Section 1 communication contract and the Section 9 anti-patterns restate rules already given in Section 3.

2 / 3

Actionability

Provides concrete executable guidance throughout — specific `setSharedPluginData` calls, `search_design_system`/`get_libraries` parameter examples, exact scope enums, the `var(--color-bg-primary)` wrapping rule, 0–1 color range, and a table of reusable helper scripts.

3 / 3

Workflow Clarity

A clearly sequenced Phase 0→4 workflow with per-phase checklists, explicit exit criteria, mandatory validation checkpoints ("get_metadata after every create, get_screenshot after each component"), and a state-ledger/resume protocol plus error-recovery reference for feedback loops.

3 / 3

Progressive Disclosure

Well-structured overview with one-level-deep references: a Section 10 table signals exactly when to load each references/*.md doc and a Section 11 table maps each scripts/*.js helper — all referenced files verified to exist, with no nested/deep reference chains.

3 / 3

Total

11

/

12

Passed

Description

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.

A strong, third-person description that names concrete capabilities, provides explicit natural-language triggers, and clearly scopes the skill against its sibling figma-use skill. It fully satisfies the what/when/completeness criteria.

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" — matching the score-3 anchor.

3 / 3

Completeness

Explicitly answers both what (build/update a design system and its constituent parts) and when via two "Use when the user wants to..." / "Also use when the user asks to create or generate any component" trigger clauses.

3 / 3

Trigger Term Quality

Covers natural terms a user would say — "create component in Figma", "component libraries", "theming (light/dark modes)", "design tokens", "reconcile gaps between code and Figma" — with good breadth rather than jargon.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche (Figma design-system generation from code) and explicitly distinguishes itself from the complementary `figma-use` skill ("teaches WHAT to build... complements the figma-use skill which teaches HOW"), so it is unlikely to trigger the wrong skill.

3 / 3

Total

12

/

12

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.