CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-to-code

Implement Figma designs in the existing codebase, map design tokens, and establish component mappings and project rules. Use when asked to "implement this Figma design", "turn this Figma into code", "build from a Figma link", "match this Figma mockup", "extract Figma design tokens", "create Figma design system rules", "set up Figma guidelines", "code connect this component", or "map this Figma component to code"; or when a Figma URL/selection must become repository code, code tokens, agent rules, or Code Connect mappings.

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

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-structured, highly actionable skill body: explicit multi-step workflow with validation and correction loops, and exemplary progressive disclosure through anchored, well-indexed reference files. The only deductions are minor routing duplication and the absence of an inline worked example of an MCP call.

Suggestions

Consolidate the routing duplicated between the Commands and Skill Boundaries tables (or cross-reference one from the other) to trim repeated implement/tokens/rules/code-connect guidance.

State the Code Connect plan/seat requirement once (in the code-connect command section) instead of both the Capabilities table and the command workflow.

Inline one short worked example of a design-context MCP call with clientLanguages/clientFrameworks in the Operating Procedure to reach fully copy-paste-ready guidance.

DimensionReasoningScore

Conciseness

The body is dense with directive, non-obvious guidance (MCP tool roles, call budgets, correction requirements) and does not explain concepts Claude already knows. Minor trimming possible: routing for the four commands appears in both the Commands and Skill Boundaries tables, and Code Connect plan/seat requirements are stated twice (Capabilities table and code-connect section). Not 3: no padded sections or unnecessary explanations; only small duplication.

4 / 5

Actionability

Concrete, specific guidance throughout: the exact design-context parameters ("clientLanguages and clientFrameworks matched to the inspected repository"), server-name examples ("user-Figma Desktop", "plugin-figma-figma"), and per-unit correction instructions. Not 5: no executable example of an actual MCP tool call or code/token mapping sample inline — the fully concrete examples are deferred to the reference files, so the body alone stops slightly short of copy-paste-ready.

4 / 5

Workflow Clarity

The 10-step Operating Procedure is clearly sequenced with explicit validation checkpoints: early screenshot capture, per-unit correction ("Fix discrepancies before moving on"), a final assembly pass, a Verification Checklist, and the Correction Requirement's "Do not mark... complete after a single pass" feedback loop. Failure Handling adds error-recovery routing. This matches the anchor-5 pattern of sequence + validation + feedback loops + checklist.

5 / 5

Progressive Disclosure

The body is a well-organized overview: detailed material (call budgets, correction loop, Code Connect steps, troubleshooting) is split into five existing reference files, each linked with section anchors (e.g., implementation-patterns.md#mcp-call-budget) and indexed in a Reference Files table with explicit load-when conditions. References are one level deep and clearly signaled, matching the anchor-5 structure.

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: concrete capability statement, explicit and extensive natural-language triggers, and a well-defined niche. The only weakness is slight trigger overlap with a dedicated Code Connect skill.

Suggestions

Clarify in the description that Code Connect template authoring is delegated to the host's figma-code-connect skill, so the trigger "code connect this component" does not compete with that skill.

DimensionReasoningScore

Specificity

"Implement Figma designs in the existing codebase, map design tokens, and establish component mappings and project rules" lists multiple specific concrete actions (implement, token mapping, component mappings, rules) with comprehensive coverage of the skill's capabilities. Not 4: coverage spans all four command areas with no gaps.

5 / 5

Completeness

Explicitly answers what ("Implement Figma designs... map design tokens... establish component mappings and project rules") and when ("Use when asked to..." with concrete trigger phrases, plus "when a Figma URL/selection must become repository code"). Both halves are explicit and concrete.

5 / 5

Trigger Term Quality

Nine natural trigger phrases users would actually say ("implement this Figma design", "turn this Figma into code", "build from a Figma link", "match this Figma mockup", "code connect this component") plus synonyms for tokens and rules work. Coverage is comprehensive with natural phrasing, matching the anchor-5 pattern.

5 / 5

Distinctiveness Conflict Risk

The Figma-to-repository-code niche is clear and most triggers ("build from a Figma link", "match this Figma mockup") are distinct. Not 5: the "code connect this component" / "map this Figma component to code" triggers overlap with a dedicated first-party Code Connect skill that the body itself defers to, leaving minor conflict risk for that subdomain.

4 / 5

Total

19

/

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
t4sh/skills4sh
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.