CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-to-code

Repo-first Figma-to-code workflow for implementation, design tokens, design-system rules, and Code Connect. Use when the user asks 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

90%

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.

The body is a well-structured, repo-first workflow with a clearly sequenced procedure, explicit correction/verification checkpoints, and clean progressive disclosure into verified reference files. It is actionable for an instruction-only skill, with only minor conciseness and redundancy room for improvement.

Suggestions

Consolidate the Commands table and Skill Boundaries table, which partially overlap, to remove redundant routing prose and tighten conciseness.

Move the repeated Figma-plan/seat prerequisites for Code Connect (currently restated in both the boundaries table and the code-connect command section) into a single reference location.

Trim explanatory sentences that restate MCP behavior already covered by the Figma MCP Tool Use table to further reduce token overhead.

DimensionReasoningScore

Conciseness

The body is largely efficient with each section earning its place, though some boundary prose and the Skill Boundaries table partially restate the Commands table, leaving minor trimmable redundancy.

4 / 5

Actionability

Concrete, specific guidance such as "Call the design-context tool with clientLanguages and clientFrameworks matched to the inspected repository", named server strings, and `create_design_system_rules`; executable code is absent but justified because MCP tool schemas vary by host.

4 / 5

Workflow Clarity

A 10-step Operating Procedure is clearly sequenced with explicit validation and correction checkpoints (per-unit and assembly correction, "Do not mark complete after a single pass"), plus a Failure Handling playbook and Verification Checklist providing feedback loops for error recovery.

5 / 5

Progressive Disclosure

SKILL.md is a genuine overview that splits bulk detail across five real, one-level-deep reference files, each clearly signaled by a Reference Files table with load-conditions and verified inline anchor links, making navigation easy.

5 / 5

Total

18

/

20

Passed

Description

95%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.

The description is a strong, third-person statement that crisply states the skill's purpose and enumerates many natural trigger phrases covering implementation, tokens, rules, and Code Connect. It distinguishes the skill from adjacent host skills via explicit boundary routing.

DimensionReasoningScore

Specificity

Names the domain and multiple concrete capabilities — "implementation, design tokens, design-system rules, and Code Connect" — alongside explicit actions like mapping variables to a token system and linking library components to code, approaching the comprehensive-anchor-5 example but framed as nouns rather than fully enumerated verbs.

4.5 / 5

Completeness

Explicitly answers both what ("Repo-first Figma-to-code workflow for implementation, design tokens, design-system rules, and Code Connect") and when ("Use when the user asks to… or when a Figma URL/selection must become repository code…") with concrete trigger phrases.

5 / 5

Trigger Term Quality

Comprehensive natural trigger phrases including synonyms such as "implement this Figma design", "turn this Figma into code", "build from a Figma link", "match this Figma mockup", "code connect this component", and "map this Figma component to code".

5 / 5

Distinctiveness Conflict Risk

Clear niche (Figma-to-repository-code) with distinct triggers and explicit routing boundaries to sibling skills; minor residual overlap with figma-code-connect is acknowledged and explicitly deferred, keeping conflict risk low.

4.5 / 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.

Validation16 / 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.