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.

72

Quality

90%

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.

A well-engineered orchestration body: scoped, phased workflows with strong validation and recovery machinery, and clean one-level progressive disclosure into real reference and script files. The main improvable areas are token-level duplication of batching/validation guidance and a few spots where concrete call composition (helper-script embedding) is described but not shown.

Suggestions

Deduplicate the batching/visual-review/validation-evidence guidance that currently appears in both §1 ('Batch related operations…', 'Take one visual review per coherent composition phase') and Critical Rule 12 — state it once and cross-reference it.

Add one short example in §11 or Critical Rule 15 showing a helper script from scripts/ actually embedded in a use_figma call, since the rule requires embedding but never demonstrates it.

Tighten §5's get_libraries pagination discussion (offset handling, community-vs-org paging) into a two-line rule; the details could live in references/discovery-phase.md.

DimensionReasoningScore

Conciseness

The body is dense, table-driven, and assumes Claude's competence — it never explains what Figma or design tokens are. It falls short of anchor 5 only through repetition: batching/visual-review guidance appears in both §1 ('Batch related operations… Take one visual review per coherent composition phase') and Critical Rule 12, and the get_libraries pagination discussion (§5) runs longer than needed. It is clearly above anchor 3, where unnecessary explanation or padding would dominate.

4 / 5

Actionability

Highly actionable throughout: concrete API call shapes ('get_libraries({ fileKey })', 'search_design_system({ queries: [{ entity: "component", query }], fileKey, includeLibraryKeys: ["lk-abc123…"] })'), an exact state-ledger JSON format, specific scope table, naming patterns, and a helper-scripts table. It misses anchor 5 on minor gaps — e.g., Critical Rule 15 says 'embed scripts from scripts/' but shows no example of embedding a helper into a use_figma call, and some guidance ('Communicate proportionally… give updates at meaningful boundaries') is behavioral rather than executable.

4 / 5

Workflow Clarity

Each scope has a numbered, sequenced path with explicit validation steps ('Validate counts, mode values, aliases, scopes, syntax, styles… then stop'), a definition-of-done checklist, an explicit error feedback loop ('If a required acceptance check fails, fix the scoped defect before continuing'), idempotency checks, and a resume protocol for context truncation. This matches the anchor-5 example's validate → fix → retry structure; anchor 4 would require missing checkpoints.

5 / 5

Progressive Disclosure

SKILL.md is a genuine overview: §10 gives a 'Load when' trigger table for all seven reference docs, §11 indexes the helper scripts, and inline summaries (naming conventions, token architecture) are backed by full references. All referenced files exist and references are exactly one level deep (they link only back to SKILL.md and to the sibling figma-use skill), matching the anchor-5 structure. It is not below 5 since no content that clearly belongs in a separate file is inlined.

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: third-person, concrete, and comprehensive, with explicit 'Use when' triggers including a deliberate broadening clause for single-component requests. The only weakness is intentional overlap with the sibling figma-use skill, which is well-handled by the explicit complementarity statement.

DimensionReasoningScore

Specificity

The description lists multiple concrete capabilities — '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' — with comprehensive coverage of the skill's scope. It is not below 4 because there are no minor gaps; every capability domain of the skill is named.

5 / 5

Completeness

Both questions are answered explicitly: the 'what' ('Build or update a professional-grade design system in Figma from a codebase') and the '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 present, matching the anchor-5 example; anchor 4 would require a weaker or less specific 'when' clause.

5 / 5

Trigger Term Quality

Natural user phrasings are covered comprehensively with synonyms: 'design system', 'variables/tokens', 'component libraries', 'theming (light/dark modes)', 'reconcile gaps between code and Figma', plus the explicit catch-all 'create or generate any component in Figma — even a single one'. It fits the top anchor (synonyms and variations present) rather than anchor 4, which only tolerates a few missing natural terms.

5 / 5

Distinctiveness Conflict Risk

The niche is clear (Figma design-system construction from code), but the skill deliberately shares trigger surface with the closely related `figma-use` skill ('complements the figma-use skill… Both skills should be loaded together'), creating minor overlap risk. It is above anchor 3 because the overlap is explicitly acknowledged and scoped (WHAT vs HOW), and the description itself would not misfire on unrelated skills.

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