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

85%

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

73%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 skill: four clearly sequenced scoped workflows with explicit validation checkpoints, robust state/resume handling, and a genuinely well-signaled one-level-deep reference and script bundle. Its main weakness is token efficiency — the Anti-Patterns section and repeated validation-cadence statements duplicate the Critical Rules — plus helper scripts that are listed but not shown how to be used.

Suggestions

Cut Section 9 (Anti-Patterns) down to only the rules not already covered in Section 3, or fold brief ❌ notes into the corresponding Section 3 rules — at least six anti-patterns currently restate Critical Rules verbatim in negative form.

State the validation/evidence cadence once (Section 1) and have Sections 2 and 3 refer to it instead of repeating it three times with slight rewording.

Add a one-line usage signature (expected arguments and return value) for each helper script in Section 11, e.g. what token-map shape createSemanticTokens.js expects, so scripts can be embedded without opening each file.

DimensionReasoningScore

Conciseness

The body is dense with non-obvious domain rules (scope enums, var() wrapper requirement, alias semantics, get_libraries pagination) and avoids explaining basics, but it could be meaningfully tightened: Section 9 (Anti-Patterns) restates at least six rules already in Section 3 (ALL_SCOPES, variant-per-icon, stacked variants, parallel calls, guessed IDs, inline scripts), and the validation-cadence guidance appears three times (Section 1, Section 2 closing note, Section 3 rule 12). The duplication is systematic rather than minor, so it sits at the "mostly efficient but could be tightened" anchor rather than the one above.

3 / 5

Actionability

Highly concrete throughout — exact scope assignments ("Background: FRAME_FILL, SHAPE_FILL"), the alias pattern "{ type: 'VARIABLE_ALIAS', id: primitiveVar.id }", the WEB syntax rule "var(--color-bg-primary), not --color-bg-primary", a state-file path, a full state-ledger JSON schema, and MCP call signatures with documented return shapes. It stops short of fully copy-paste-ready: the helper scripts in Section 11 are listed by purpose only, with no usage signatures or embedding example, and executable Plugin API code is delegated to the companion figma-use skill and references.

4 / 5

Workflow Clarity

Each of the four scopes is a numbered, sequenced path ending in an explicit validation step ("Validate counts, mode values, aliases, scopes, syntax, styles... then stop"), backed by a definition-of-done checklist, an idempotency check before every create, a resume protocol for context truncation, and a clear feedback loop ("If a required acceptance check fails, fix the scoped defect before continuing" plus the error-recovery reference). This matches the top anchor: explicit validation steps, error-recovery loops, and checklists for a complex process.

5 / 5

Progressive Disclosure

Good structure with a purpose-built "Load when" table for all seven references (all of which exist, one level deep), a scripts inventory, and explicit instructions to load references on demand; this is close to the top anchor. Minor gaps keep it at 4: two links point outside the bundle to ../figma-use/references/gotchas.md and fig-builder.md (unresolvable when only this skill is installed), and Section 5's get_libraries pagination detail is inlined where it could live in discovery-phase.md.

4 / 5

Total

16

/

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.

A strong description: it states what the skill does and when to use it with explicit, natural trigger phrasing, covers all four capability scopes concretely, and explicitly differentiates itself from the companion figma-use skill. The only weakness is moderate padding — the justification clause ("since components require proper variable foundations...") and the figma-use coupling explanation add length without adding trigger value — and a few missing synonyms like "UI kit" or "style guide".

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", "reconcile gaps between code and Figma" — matching the skill's full scope with no obvious capability gaps. This fits the comprehensive-coverage anchor rather than the level below, which permits minor gaps.

5 / 5

Completeness

Explicitly answers both questions: "Build or update a professional-grade design system in Figma from a codebase" (what) and two explicit trigger clauses — "Use when the user wants to create variables/tokens... or reconcile gaps between code and Figma" and "Also use when the user asks to create or generate any component in Figma" (when). Both are present with concrete trigger phrases, matching the top anchor exactly.

5 / 5

Trigger Term Quality

Good natural keyword coverage — "design system", "Figma", "tokens", "component libraries", "theming (light/dark modes)", "create or generate any component in Figma" — phrased the way users would actually ask. A few natural synonyms are missing (e.g., "design tokens" as a phrase, "UI kit", "style guide", "sync"), so it falls short of the comprehensive-synonyms anchor.

4 / 5

Distinctiveness Conflict Risk

Clear niche (building design-system assets in Figma from a codebase) with explicitly Figma-anchored triggers, and it actively disambiguates from the nearest neighbor: "it complements the `figma-use` skill which teaches HOW to call the Plugin API". Minimal risk of triggering for the wrong skill.

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 2 suspicious

Warning

Total

15

/

16

Passed

Repository

figma/mcp-server-guide

Path

skills-figquery/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.