CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

figma-design

Figma design-to-code: design token extraction, component inspection and asset export. Use when implementing a Figma design, extracting its tokens, or checking a component's spec.

73

Quality

92%

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

92%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 skill body: concise, concrete, and self-contained, with a tool map, a verification-driven workflow with a feedback loop, and genuinely Figma-specific mappings. The only nit is a couple of mapping rows that restate CSS knowledge Claude already has under a "non-obvious" heading.

DimensionReasoningScore

Conciseness

The body is lean and dense — a tool table, a 6-step workflow, and hard acceptance thresholds with almost no padding. A few mapping-table rows restate knowledge Claude already has ("Fixed | width: Npx", flex-direction equivalence), which is minor over-explanation that could be trimmed, matching the anchor-4 description rather than a fully token-perfect 5.

4 / 5

Actionability

Guidance is fully executable for an MCP-tool skill: exact tool names (figma/get_metadata, figma/get_variable_defs), the required input shape (Figma URL including node-id), concrete output targets (src/styles/tokens.css), a data-testid convention, and numeric acceptance criteria ("spacing within 4px, token colors exact, font family and weight exact").

5 / 5

Workflow Clarity

The 6-step workflow has a clear sequence, an explicit verification step (get_screenshot side-by-side plus DOM bounding-box comparison with thresholds), and a feedback loop ("Outside threshold → fix the token mapping or ask design; re-run from step 2"), matching the top anchor.

5 / 5

Progressive Disclosure

The skill is under 50 lines with no need for external reference files; content is organized into clear sections (MCP tools, Workflow, Figma→CSS mappings), and its only pointers (the frontend-design skill and the docs URL) are clearly signaled one level deep — the simple-skill case the scoring notes describe.

5 / 5

Total

19

/

20

Passed

Description

87%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 three concrete capabilities in third-person fragment style and pairs them with an explicit, natural "Use when" trigger clause. The only room for improvement is broader trigger-term coverage and mentioning the verification/search capabilities the body actually supports.

Suggestions

Add one or two more natural trigger variations users would say, such as "Figma file", "Figma URL", or "design handoff", to widen trigger-term coverage.

Consider mentioning one supporting capability the skill provides, such as comparing the built result against a screenshot of the design, so the what-clause better matches the body's full scope.

Optionally note the design-system/component-reuse angle ("reuse before rebuilding") as a trigger, since users asking to reuse existing components would naturally benefit from finding this skill.

DimensionReasoningScore

Specificity

"design token extraction, component inspection and asset export" names three concrete actions with only minor gaps in coverage. Score 5 is not warranted because the body demonstrates additional capabilities (screenshot verification, code-connect mapping, design-system search) that the description omits.

4 / 5

Completeness

It explicitly answers both questions: a clear what ("design token extraction, component inspection and asset export") and an explicit when with concrete trigger phrases ("Use when implementing a Figma design, extracting its tokens, or checking a component's spec").

5 / 5

Trigger Term Quality

Natural phrases like "implementing a Figma design", "extracting its tokens", and "checking a component's spec" give good keyword coverage. A few natural terms users might say are missing (e.g., "Figma file/URL", "design handoff", "design system"), so it falls just short of the comprehensive anchor.

4 / 5

Distinctiveness Conflict Risk

"Figma design-to-code" carves out a clear niche with distinct, product-specific triggers; it is unlikely to fire for unrelated skills and no other skill would claim these triggers.

5 / 5

Total

18

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

monkilabs/opencastle

Path

src/orchestrator/plugins/figma/skills/figma-design/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.