Name: figma-code-connect
Rating: 70.39999999999999 (1 reviews)
Author: figma

figma-code-connect

Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Quality

Content

81%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 excellent, highly executable workflow document with explicit validation checkpoints and well-managed external references. Its main weakness is token efficiency: the .figma.tsx warning and property-mapping/API tables are repeated multiple times, and the inline quick reference duplicates the bundled api.md.

Suggestions

Cut the 'Inline Quick Reference' section and point to references/api.md instead — it duplicates the full API reference already bundled there, saving ~70 lines.

State the ".figma.ts never .figma.tsx" rule once (the Overview callout) and reference it briefly from Step 5/Step 6 instead of repeating the full warning in four places.

Consolidate the three overlapping tables (Step 5 property mapping, 'Finding descendant layers', and the quick reference) into one, and fix the duplicate numbering in Rules and Pitfalls (two items numbered 7).

Dimension	Reasoning	Score
Conciseness	The body is dense and assumes competence (no domain over-explanation), but the ".figma.ts never .figma.tsx" warning is repeated in at least four places, property-mapping/descendant tables appear three times across Step 5 and the Inline Quick Reference, and "Rules and Pitfalls" contains two items numbered 7. It could be tightened noticeably, matching anchor 3 rather than 4.	3 / 5
Actionability	Fully executable guidance: exact MCP tool calls with parameter lists (get_code_connect_suggestions, get_context_for_code_connect), copy-paste-ready template code for every property type, complete worked example from URL to finished file, and explicit API signatures. Covers the common cases end to end.	5 / 5
Workflow Clarity	A clear six-step sequence with an explicit validation step (Step 6 read-back checklist), error-recovery branches in Step 2's response handling, a user-confirmation checkpoint in Step 4, and a rewrite-on-failure feedback loop ("If you wrote .figma.tsx or figma.connect(), discard it and rewrite").	5 / 5
Progressive Disclosure	References are real, well signaled (linked in Step 6 and the closing section), and exactly one level deep (no nested references inside api.md/advanced-patterns.md). However, the ~70-line Inline Quick Reference duplicates material that lives in references/api.md — content that should be separate is inline, which fits anchor 4's "minor organization gaps" rather than anchor 5.	4 / 5
	Total	17 / 20 Passed

Description

91%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 capabilities, explicit "Use when..." triggers including file extensions, and a well-defined niche. The only weaknesses are a slightly thin action list and one broad trigger phrase ("design-to-code translation") that could match non-Code-Connect requests.

Dimension	Reasoning	Score
Specificity	"Creates and maintains Figma Code Connect template files that map Figma components to code snippets" names three specific actions (create, maintain, map) with a concrete artifact type. Not a 5 because coverage has minor gaps — e.g., no mention of what the mapping workflow involves (fetching properties, validation) — and not a 3 because it goes beyond 1-2 actions.	4 / 5
Completeness	Explicitly answers both questions: what ("Creates and maintains Figma Code Connect template files that map Figma components to code snippets") and when ("Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files"), with concrete trigger phrases.	5 / 5
Trigger Term Quality	"Code Connect", "Figma component mapping", "design-to-code translation", and ".figma.ts or .figma.js files" cover natural phrasings, a conceptual synonym, and exact file extensions — comprehensive like the anchor-5 example ("PDF files, PDFs, forms, .pdf").	5 / 5
Distinctiveness Conflict Risk	"Code Connect" and ".figma.ts" are a clear, distinctive niche, but "design-to-code translation" is broad enough to overlap with general Figma-to-code generation skills. Mostly distinct with minor overlap risk — anchor 4 rather than 5.	4 / 5
	Total	18 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (529 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: figma/mcp-server-guide
Path: skills/figma-code-connect/SKILL.md
Commit: 38308b7

Reviewed: 5 days 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.