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.

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

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

96%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 exemplary orchestration skill: phased workflow with explicit exit criteria, pervasive validation checkpoints, disk-backed state management, and real helper scripts. The main improvement opportunities are de-duplicating rules repeated across Sections 1/3/4/9 and pushing the library-discovery and token-architecture detail out of SKILL.md into the already-existing phase references.

Suggestions

De-duplicate Section 9 (Per-Phase Anti-Patterns) against Sections 3–4, or collapse it into short per-phase pointers, reclaiming ~40 lines of repeated rules.

Move Section 5's get_libraries pagination behavior and reuse decision matrix into discovery-phase.md, keeping only the 'call get_libraries before search_design_system' rule and the reuse/rebuild/wrap summary in SKILL.md.

Reduce Section 8's token-architecture tables to the complexity-tier summary and defer the collection/mode examples to token-creation.md, which already covers them.

DimensionReasoningScore

Conciseness

The body is dense directive content with no explanations of concepts Claude already knows — API gotchas, naming rules, and phase contracts are all skill-specific policy. It falls short of the level-5 'every token earns its place' anchor because there is real redundancy: Section 9's anti-patterns largely restate rules from Sections 3 and 4 (e.g., ALL_SCOPES, variant positioning, parallelized calls, name-prefix cleanup each appear twice), and Section 1's communication contract reiterates phase-continuation rules stated again in Section 2. It is above level 3 because the tightening opportunities are duplication of genuinely useful rules, not unnecessary explanation or concept padding.

4 / 5

Actionability

Guidance is fully executable: exact tool-call signatures with parameters ('get_libraries({ fileKey })', 'search_design_system({ query, fileKey, includeLibraryKeys: [...] })'), copy-paste API patterns ('{ type: \'VARIABLE_ALIAS\', id: primitiveVar.id }', 'var(--color-bg-primary)'), a concrete state-ledger JSON shape with a disk path ('/tmp/design-system-state-{RUN_ID}.json'), and a table of eight real helper scripts with their return contracts. For an instruction-orchestration skill this is copy-paste-ready guidance covering the common cases, matching the level-5 anchor.

5 / 5

Workflow Clarity

The five phases are strictly ordered with per-phase checklists, stable task IDs (P{phase}.{step}), and explicit exit criteria; validation is built in everywhere ('get_metadata after every create, get_screenshot after each component', pendingValidations in the state ledger). Error recovery has a dedicated required-on-error reference, plus a resume protocol and continuation prompt — the feedback loops and checklists the level-5 anchor requires.

5 / 5

Progressive Disclosure

Structure is good and all referenced paths resolve: the Reference Docs table gives phase, required/optional status, and load conditions for all seven reference files, and the Scripts table maps all eight scripts. It misses the level-5 anchor because substantial detail is inlined in SKILL.md that belongs in those references — Section 5's ~50 lines of get_libraries pagination behavior and reuse matrix belong in discovery-phase.md, and Section 8's token architecture overlaps token-creation.md (which itself notes the M3 pattern). All bundle references were verified to exist on disk; one cross-skill link (../figma-use/references/gotchas.md) points outside this bundle, which is expected for a companion-skill link.

4 / 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: it states concrete capabilities, gives explicit and well-phrased 'Use when' triggers, and cleanly positions itself against the sibling figma-use skill. The only notable risk is the intentional broadening to any single-component request, which slightly blurs the boundary with figma-use.

Suggestions

Tighten the 'any component in Figma — even a single one' clause so it fires only when production-quality foundations/bindings are actually needed, reducing overlap with the figma-use skill on trivial component requests.

Trim the meta-explanation ('This skill teaches WHAT to build and in WHAT ORDER... Both skills should be loaded together') to a shorter complement note so more of the description budget carries trigger phrases.

DimensionReasoningScore

Specificity

The description 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 comprehensive-coverage anchor. It exceeds the level-4 anchor ('several specific actions; minor gaps') because every capability named is a distinct, concrete operation with no generic filler.

5 / 5

Completeness

It 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'). The 'when' clause enumerates concrete trigger situations, matching the level-5 anchor exactly; level 4 would require the 'when' to be less explicit or specific.

5 / 5

Trigger Term Quality

Natural trigger phrases are comprehensive and include synonyms: 'design system', 'variables/tokens', 'component libraries', 'theming (light/dark modes)', 'reconcile gaps between code and Figma', and 'create or generate any component in Figma'. These are exactly the words a user would say when needing this skill, satisfying the synonym-coverage anchor rather than the level-4 anchor where 'a few natural terms are missing'.

5 / 5

Distinctiveness Conflict Risk

The skill has a clear niche and even self-distinguishes from its sibling ('teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW'). It stops short of the level-5 anchor because the deliberate widening — 'use when the user asks to create or generate any component in Figma — even a single one' — creates minor overlap risk with figma-use on any simple single-component request.

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
openai/plugins
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.