CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

71

Quality

89%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

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.

A highly actionable, well-sequenced skill body that teaches a proprietary API with executable examples, explicit error handling, and verification checkpoints. Its main weakness is redundancy — repeated distinctions, duplicated quick-reference tables, and a worked example that re-narrates the steps — which inflates token cost without adding information.

Suggestions

Consolidate the INSTANCE_SWAP-vs-SLOT guidance (currently stated in Step 3, the property-mapping table, the SLOT section, the descendants table, and Rule 5) into one authoritative location and cross-reference it.

Trim the Inline Quick Reference to method names plus one-line notes and defer full signatures and SelectorOptions examples to references/api.md, removing duplication with the property-mapping tables.

Compress the Complete Worked Example to the final Button.figma.ts template with brief step annotations instead of re-narrating Steps 1-6, and fix the duplicate numbering of two pitfalls as '7' in Rules and Pitfalls.

DimensionReasoningScore

Conciseness

Mostly dense, proprietary-API knowledge Claude genuinely lacks (ErrorHandle truthiness, ResultSection interpolation, exhaustiveness requirements), but there is more than minor fat: the INSTANCE_SWAP-vs-SLOT distinction is restated in at least five places (Step 3, the property-mapping table, the SLOT section, the descendants table, and Rule 5), the Inline Quick Reference (~70 lines) duplicates the earlier property-mapping tables and references/api.md, the Complete Worked Example re-narrates all six steps verbatim, and two pitfalls share the number 7. This fits 'mostly efficient but includes some unnecessary explanation or could be tightened' rather than anchor 4's 'minor instances'.

3 / 5

Actionability

Fully executable guidance throughout: exact MCP tool invocations with named parameters ("get_code_connect_suggestions with fileKey... nodeId... excludeMappingPrompt: true"), copy-paste-ready template code with WRONG/CORRECT contrasts, concrete URL-parsing rules with a worked example, and a complete end-to-end Button.figma.ts example covering the common case. Matches the anchor-5 'copy-paste ready code; specific examples cover the common cases'.

5 / 5

Workflow Clarity

A clear six-step sequence with explicit validation and feedback loops: Step 2 handles each error response verbatim ("No published components found in this selection" → inform and stop), Step 4 requires user confirmation before proceeding, and Step 6 is a read-back validation checklist (property coverage, typed code, no hardcoded children, interpolation wrapping). This matches anchor 5's 'explicit validation steps; feedback loops for error recovery; checklists'.

5 / 5

Progressive Disclosure

Good structure with real, verified, one-level-deep references — [api.md](references/api.md) carries the full API reference and [advanced-patterns.md](references/advanced-patterns.md) the advanced nesting patterns, both clearly signaled at point of need. It stops short of anchor 5 because reference-appropriate content is inlined: the full method-signature tables in the Inline Quick Reference overlap api.md, and the 520-line body keeps the complete worked example inline rather than splitting it out — fitting 'most content is appropriately placed; minor organization gaps'.

4 / 5

Total

17

/

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.

An exemplary description: third-person voice, explicit what-and-when structure, natural trigger phrases including file extensions, and a highly distinctive niche that minimizes conflict risk. The only nit is that the capability list is slightly less comprehensive than the top specificity anchor.

DimensionReasoningScore

Specificity

"Creates and maintains Figma Code Connect template files that map Figma components to code snippets" names the domain plus several concrete actions (create, maintain, map components to code), matching the 'several specific actions; minor gaps in coverage' anchor. It falls short of anchor 5 because it lists only ~3 actions rather than the comprehensive multi-action coverage of the top example, while clearly exceeding anchor 3's '1-2 concrete actions'.

4 / 5

Completeness

It explicitly answers both questions: the "what" ("Creates and maintains Figma Code Connect template files that map Figma components to code snippets") and the "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 — a direct match for the anchor-5 example. It is not anchor 4 because the 'when' clause is fully explicit, not merely present.

5 / 5

Trigger Term Quality

The triggers "Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files" cover the feature name, two natural synonyms, and both file extensions — comprehensive coverage of natural terms including synonyms and extensions, matching the anchor-5 pattern ("PDF files, PDFs, forms, document extraction, .pdf").

5 / 5

Distinctiveness Conflict Risk

"Figma Code Connect template files", "Figma component mapping", and ".figma.ts or .figma.js files" define a clear niche with distinct, product-specific triggers and minimal overlap risk with any generic skill — matching the anchor-5 'clear niche with distinct triggers' example. It is well above anchor 4's 'minor overlap risk with closely related skills'.

5 / 5

Total

19

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (528 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository

Devin-AXIS/iPolloWork

Path

examples/plugin-packages/figma/skills/figma-code-connect/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.