CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

figma-to-code

Map Figma variables to repo tokens and write Figma agent rules. Use when asked to "extract Figma design tokens", "map Figma tokens to our theme", "create Figma design system rules", "set up Figma guidelines", "code connect this component", or "map this Figma component to code"; when Figma-to-code output must follow this repository's components, tokens, and rules files (`AGENTS.md`, `CLAUDE.md`, `.cursor/rules/`) or needs a correction pass against them; or when asked to "implement this Figma design" or "build from a Figma link" and `figma-design-to-code` is not installed. Skip Figma-side writes and code-to-Figma CI export (use `code-to-figma`).

Quality

93%

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.

The body exemplifies a well-structured orchestration skill: four command workflows with explicit done-when criteria, verifiable checkpoints, a correction feedback loop, and clean one-level-deep disclosure into real, well-anchored reference files. The single deduction is inline dated facts and slight overlap between the boundaries table and the frontmatter description.

DimensionReasoningScore

Conciseness

The body is dense and procedural with no explanations of concepts Claude already knows, matching "efficient; minor instances… that could be trimmed". It is not 5 because the Skill Boundaries table partially repeats the description's skip clause and time-sensitive facts ("checked 2026-10-21", "checked 2026-10-20", commit 056adaf7) sit inline rather than confined to the dated snapshot file.

4 / 5

Actionability

For an instruction-only skill the guidance is fully followable: exact MCP tool names (get_code_connect_map, add_code_connect_map), concrete fetch parameters (clientLanguages, clientFrameworks), explicit eligibility conditions (Organization or Enterprise plan, Dev or Full seat via whoami), and verifiable "Done when" criteria for every command, with repo-specific flexibility explicitly justified. It is not 4 because no step leaves the executor guessing about what to do or where details live.

5 / 5

Workflow Clarity

The implement workflow is a clear six-step sequence with an explicit pre-retrieval checkpoint (step 2), a bounded correction loop with a two-pass limit (step 4), explicit verification (step 5), and a deviation report (step 6), plus truncated-context recovery in the fallback. This matches the top anchor (explicit validation steps, feedback loops, checklists); no destructive/batch cap applies since validation is present.

5 / 5

Progressive Disclosure

The body is an overview with a Reference Files table giving a "Load when" condition per file; all five reference files exist, every in-text anchor link resolves to a real header, and references are exactly one level deep (outbound links are external URLs or internal anchors only). This matches the top anchor for clear overview with well-signaled one-level-deep references; the only inline material (commands, boundaries) is what routing decisions need up front.

5 / 5

Total

19

/

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 example: it states concrete capabilities, provides an unusually rich set of natural trigger phrases, and explicitly disambiguates against neighboring official Figma skills. The only minor limitation is that the opening what-statement compresses the skill's four capability areas into two verbs, leaving the rest to be inferred from triggers.

DimensionReasoningScore

Specificity

"Map Figma variables to repo tokens and write Figma agent rules" names concrete actions, and the trigger clause extends coverage to code-connect mapping and implementation with a correction loop, matching "several specific actions; minor gaps". It falls short of 5 because the what-statement itself lists only two actions; it exceeds 3 because the full description conveys four capability areas.

4 / 5

Completeness

It explicitly answers what (map variables to repo tokens, write agent rules) and when (a detailed "Use when…" clause with concrete trigger phrases and conditions), matching the anchor for clearly and explicitly answering both with concrete triggers. Not 4 because the when-clause is maximally explicit rather than only "could be more specific".

5 / 5

Trigger Term Quality

Eight quoted natural user phrases ("extract Figma design tokens", "map Figma tokens to our theme", "create Figma design system rules", "set up Figma guidelines", "code connect this component", "map this Figma component to code", "implement this Figma design", "build from a Figma link") plus rules-file names give comprehensive synonym coverage, matching the top anchor rather than the "a few natural terms missing" anchor.

5 / 5

Distinctiveness Conflict Risk

A clear niche (repository-convention layer for Figma work) with distinct triggers and explicit carve-outs against figma-design-to-code (used only when absent), code-to-figma, and Figma-side writes, giving minimal conflict risk. Third-person voice throughout, so no voice penalty applies.

5 / 5

Total

19

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 deeper-than-1-level

Warning

referenced_paths_exist

Referenced path issues: 1 deeper-than-1-level

Warning

Total

14

/

16

Passed

Repository

t4sh/skills4sh

Path

skills/figma-to-code/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.