CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

figma-code-workflows

Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standalone Code (also known as Make), and repair imported previews. Use only when the user explicitly names editable Design layers, a runnable Code Layer, or a standalone Code/Make file, or supplies a Figma file key/link as the import destination. Generic code or code-component requests need output clarification before using this workflow.

72

Quality

91%

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

86%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 tight, well-structured workflow document: a decision table and exact tool names make it highly actionable, and the short length keeps it token-efficient. The main gaps are a triple-repeated clarification rule and validation/error-recovery detail deferred to the tool response rather than stated inline.

Suggestions

Consolidate the output-clarification rule into one place (the decision table's first row already encodes it) to remove the repetition across the opening paragraph and section 1 intro.

Inline one concrete example of validating locally before upload (e.g., the typical validate step send_code_to_figma returns) so the validation checkpoint is explicit rather than delegated to the tool response.

Clarify what "setup recovery" involves in section 2 — currently it only names the scenario without a recovery loop the reader can follow.

DimensionReasoningScore

Conciseness

The body is lean and operational with no concept explanations Claude already knows, so it is well above anchor 3. However, the ask-when-output-is-unclear rule is stated three times (opening paragraph, "If the output is unclear, ask the user before proceeding", and the table row "Ask 'Editable design layers or a code layer?' and end your turn"), which fits anchor 4's "minor instances that could be trimmed" rather than anchor 5's "every token earns its place".

4 / 5

Actionability

Fully actionable for an instruction-only skill: exact tool calls (generate_figma_design, html_to_figma, send_code_to_figma, whoami, create_new_file), a concrete gate (whoami.code_layers_enabled), a measurable heuristic ("fewer than 10 or unknown → Code Layer; 10 or more → standalone"), the exact question to ask the user, and a complete decision table covering the common input/output combinations. Absence of code is not penalized per the scoring notes.

5 / 5

Workflow Clarity

The two-stage sequence (choose output/destination → follow the import response) is clear, with real checkpoints: ask before proceeding, whoami gate before choosing a Code Layer, "preserve the app and validate locally before uploading when instructed", and "do not describe an unconfirmed stage as complete". It falls short of anchor 5 because validation and error-recovery mechanics are largely delegated to the tool's returned nextStep rather than given as explicit inline validate/fix/retry steps.

4 / 5

Progressive Disclosure

The skill is under 50 lines, needs no external reference files (none exist in references/, scripts/, or assets/), and is cleanly organized into an intro plus two numbered sections. Per the guideline that under-50-line skills with no need for external references can score 5 with well-organized sections, this is the best fit.

5 / 5

Total

18

/

20

Passed

Description

92%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: it names concrete capabilities, gives explicit and restrictive "Use only when" trigger guidance with an anti-trigger clause, and clearly distinguishes itself from generic code-generation skills. The only weakness is keyword coverage that stops just short of comprehensive (no file extensions or convert-style phrasings).

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standalone Code (also known as Make), and repair imported previews" — with comprehensive coverage of the skill's capabilities. It matches the 5 anchor (multiple specific concrete actions, comprehensive coverage) rather than 4, which would require minor gaps in coverage.

5 / 5

Completeness

It explicitly answers both questions: what it does (import/upload files, choose output type, repair imported previews) and when to use it ("Use only when the user explicitly names editable Design layers, a runnable Code Layer, or a standalone Code/Make file, or supplies a Figma file key/link as the import destination"), with concrete trigger phrases and an explicit anti-trigger ("Generic code or code-component requests need output clarification"). This matches the 5 anchor exactly.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "import", "upload", "Figma", "HTML", "project files", "editable Design layers", "Code Layer", "Code/Make", and "Figma file key/link", including the synonym "also known as Make". It falls short of the 5 anchor because file extensions (e.g., .html, .fig) and a few common user phrasings (e.g., "convert HTML to Figma") are missing, but it is noticeably above the 3 anchor's "missing common variations".

4 / 5

Distinctiveness Conflict Risk

It carves a clear niche (Figma import) with distinct triggers and actively reduces conflict risk by excluding generic code requests. Anchor 5 is the best fit; anchor 4's "minor overlap risk with closely related skills" does not apply given the explicit boundary-setting.

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

figma/mcp-server-guide

Path

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