figma-design

Figma design-to-code workflows, design token extraction, component inspection, and asset export. Use when translating Figma designs into code, extracting design tokens, or referencing component specs.

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

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 lean skill body: token-efficient tables, a concrete tool inventory, and a workflow with explicit acceptance thresholds and a genuine feedback loop. The only weaknesses are minor actionability gaps — a dangling cross-reference to the frontend-design skill and an unspecified DOM-comparison method.

Suggestions

Resolve the dangling reference "the **frontend-design** skill" by either giving its path or inlining the one or two token rules it should contribute.

In the verification step, state how to compare DOM bounding boxes against node metrics (e.g., which browser/DevTools command or script to use), making step 5 fully executable.

Consider one short example of a rendered tool call (URL with node-id) so the MCP invocation format is copy-paste ready.

Dimension	Reasoning	Score
Conciseness	The body is lean and dense: two compact tables, a numbered workflow, and a short mappings section, with no explanation of concepts Claude already knows (no "what is Figma", no library tutorials). Every sentence carries operational information — e.g., "It does not see what is selected in the desktop app — that is the desktop server's feature" is a useful disambiguation, not padding.	5 / 5
Actionability	Concrete guidance throughout: named MCP tools with use cases, the link/node-id call convention ("pass the Figma URL of the frame or layer, including its node-id"), target file paths ("src/styles/tokens.css"), and quantified acceptance criteria ("spacing within 4px, token colors exact"). Not a 5 because two minor gaps exist: the opening cross-reference to the "frontend-design" skill is dangling (no path or pointer to its location), and step 5's "compare DOM bounding boxes against the node metrics" does not say how to perform that comparison.	4 / 5
Workflow Clarity	The workflow is a clear 6-step sequence with an explicit verification step, quantified acceptance criteria ("spacing within 4px, token colors exact, font family and weight exact"), and a true feedback loop: "Outside threshold → fix the token mapping or ask design; re-run from step 2." This matches the anchor-5 example pattern (validate → fix → retry) exactly.	5 / 5
Progressive Disclosure	The body is roughly 40 lines with no bundle files, and per the rubric's simple-skill guideline a short, self-contained skill with well-organized sections scores 5. Sections (MCP tools, Workflow, mappings) are clearly headed, and the two external pointers (Figma docs URL, the frontend-design skill) are one level deep, not nested.	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 with explicit what/when structure, natural trigger phrasing, and a well-defined Figma-scoped niche. The main headroom is in trigger-term breadth and slightly more verb-based capability phrasing.

Suggestions

Add natural trigger variations users might say, such as "Figma file", "Figma link", or "design handoff", to broaden keyword coverage.

Rephrase capability nouns as concrete actions (e.g., "Inspects components and maps them to code" rather than "component inspection") for sharper specificity.

Dimension	Reasoning	Score
Specificity	The description lists several concrete capability areas — "design token extraction, component inspection, and asset export" — anchored to the Figma design-to-code domain. It falls short of a 5 because the actions are noun phrases ("workflows", "inspection") rather than fully concrete verbs, and coverage has minor gaps (e.g., no mention of component mapping or visual verification).	4 / 5
Completeness	Both questions are explicitly answered: "what" via the capability list in the first sentence, and "when" via the explicit "Use when translating Figma designs into code, extracting design tokens, or referencing component specs" clause with concrete trigger phrases. This matches the anchor-5 example structure exactly; a 4 would require the when-clause to be less specific, which it is not.	5 / 5
Trigger Term Quality	Natural trigger phrases are present — "translating Figma designs into code", "extracting design tokens", "component specs" — matching what a user would actually say. Not a 5 because common variations like "Figma file", "mockup", or a file extension (.fig) are missing.	4 / 5
Distinctiveness Conflict Risk	The niche is clear and tool-anchored — every capability and every "Use when" trigger is scoped to Figma, giving minimal conflict risk with other skills. The phrase "referencing component specs" is slightly generic on its own, but in context it inherits the Figma scoping, so it does not rise to the minor-overlap level of a 4.	5 / 5
	Total	18 / 20 Passed

Validation

100%

Warnings & errors only

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/SKILL.md
Commit: c0f4566

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.