CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

figma-implement-motion

Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.

68

Quality

86%

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

77%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 well-engineered workflow document: fully sequenced steps with real validation checkpoints and an exemplary progressive-disclosure bundle. Its main cost is token efficiency — key rules (fallbackNodeId matching, tool linkage, when to load gotchas) are repeated across the Overview and Steps 2-3, and a few application steps rely on direction rather than shown code.

Suggestions

Consolidate the fallbackNodeId / exact-id-match guidance into a single Step 3 bullet — it is currently spread across the Overview, a Step 2 field description, and three separate Step 3 bullets, which costs tokens and risks divergence if one copy is edited.

Trim the Overview's tool-linkage paragraph ("The two are linked by node id, and that's the whole workflow…") since Step 3 restates the same merge rules in fuller, actionable form.

For the weakest actionable spots, inline a short concrete pattern for the two directional instructions — mapping a Figma easing to a Motion.dev spring/Bezier within groupDurationMs, and a minimal prefers-reduced-motion snippet — rather than leaving the adaptation fully implicit.

DimensionReasoningScore

Conciseness

The body is dense with non-obvious Figma-specific signal (no padding with concepts Claude already knows), but carries notable redundancy: fallbackNodeId/exact-id-match rules are explained in the Overview, in Step 2, and again across three separate Step 3 bullets, and the gotchas.md load instruction and Overview tool-linkage paragraph are repeated. This is 'includes some unnecessary explanation or could be tightened' rather than the minor-trim level of anchor 4.

3 / 5

Actionability

Concrete, executable guidance throughout: tool call signatures with parameters, field-by-field response semantics, and specific code patterns (transformTemplate={(_, generated) => "<css> " + generated}, the [45,125,125] → [0,80,80] offset, curl -L asset downloads, the // TODO: <nodeId> format). Minor gaps keep it below anchor 5: worked code examples are delegated to references and a few steps remain directional (e.g., "fit the supplied easing into groupDurationMs, including springs" without showing how).

4 / 5

Workflow Clarity

Five clearly sequenced steps (confirm design context → fetch motion → merge → apply → validate) with explicit validation checkpoints and feedback loops: "reload, observe, iterate" spot-checking before batching (Step 5 and Rule 4), an escalation path for unrepresentable nodes (TODO comment + call out in summary), and an explicit conflict-resolution rule (prefer get_motion_context).

5 / 5

Progressive Disclosure

Clean overview-plus-references structure: six one-level-deep reference files, each verified to exist, with load conditions stated both inline at the point of need ("Load references/gotchas.md before implementing this case") and in an indexed References section; cross-links are sibling-level with back-to-SKILL.md navigation, and deep material (gotchas, worked examples, SVG how-tos, library tables) is appropriately split out of the body.

5 / 5

Total

17

/

20

Passed

Description

90%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: third-person voice, explicit what-and-when structure, and natural quoted trigger phrases plus URL and tool-signal conditions. The only weakness is that it states a single capability rather than enumerating the concrete actions the skill performs.

DimensionReasoningScore

Specificity

"Translates Figma motion and animations into production-ready application code" names the domain and one concrete action, but does not list several distinct capabilities (e.g., keyframe extraction, snippet adaptation, timeline coordination), so it sits at 'names domain and 1-2 concrete actions' rather than the several-actions anchor above.

3 / 5

Completeness

It explicitly answers both questions: what ("Translates Figma motion and animations into production-ready application code") and when ("Use when implementing animation/motion from a Figma design…" with concrete trigger phrases), matching the anchor-5 example pattern exactly.

5 / 5

Trigger Term Quality

The description quotes natural phrases users would actually say ("implement this motion", "add animation from Figma", "animate this component"), covers motion/animation/animate synonyms, and adds URL-based and MCP tool-signal triggers — comprehensive natural-term coverage for this domain. It does not fit anchor 4 ('a few natural terms missing') since the common phrasings are all present.

5 / 5

Distinctiveness Conflict Risk

Clear niche (Figma motion → code) with distinct triggers — a Figma URL whose node is animated, and tool-signal conditions referencing get_design_context/get_motion_context. The single generic phrase ("animate this component") is scoped by the governing clause "from a Figma design", keeping conflict risk minimal.

5 / 5

Total

18

/

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

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository

figma/mcp-server-guide

Path

skills/figma-implement-motion/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.