CtrlK
BlogDocsLog inGet started
Tessl Logo

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`.

70

Quality

86%

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

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.

The content is well-structured: a clear 5-step workflow with explicit validation and feedback loops, strong actionability via concrete tool calls and field semantics, and exemplary progressive disclosure to six real reference files. The main weakness is conciseness — several rules are restated across Step 3, Critical Rules, and the interleaved-transforms section, adding length without new information.

Suggestions

Consolidate the exact-id-over-fallbackNodeId rule into a single canonical statement; it is currently explained in Step 3, Critical Rule 1's framing, and the componentized-child-motion bullet.

Tighten the interleaved-transforms subsection by folding the duplicate 'keep layout transforms separate from Motion transforms' guidance (Step 3 bullet) into the interleaved-transforms list so each rule appears once.

Move some of the denser Step 3 edge cases (display:contents wrappers, componentized-child matching) into gotchas.md and keep SKILL.md to the core merge rule plus a one-line pointer, to cut token cost.

DimensionReasoningScore

Conciseness

The body is dense and avoids explaining basics Claude knows, but it is long (≈140 lines) with several paragraphs that restate the same rule multiple ways (e.g. exact-id-over-fallbackNodeId explained in Step 3, Critical Rules, and interleaved-transforms), so it is mostly efficient but could be tightened.

3 / 5

Actionability

Gives concrete tool invocations (`get_motion_context(fileKey=..., nodeId=..., recursive=true)`), specific field semantics, and explicit code patterns (transformTemplate composition, offset transforms), but motion.dev/CSS snippets themselves are referenced rather than shown inline, leaving minor gaps.

4 / 5

Workflow Clarity

A clear 5-step Required Workflow with an explicit validation step (Step 5: validate one animation end-to-end before batching), feedback-loop language ('reload, observe, iterate'), and a Critical Rules checklist covering failure recovery for a batch/destructive-prone task.

5 / 5

Progressive Disclosure

Overview body stays focused on the workflow while six well-signaled, one-level-deep reference files (all present in references/) are loaded on demand with explicit inline 'Load ... before continuing' cues, giving easy navigation with no nested-reference chains.

5 / 5

Total

17

/

20

Passed

Description

96%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 strong: it states concrete actions, gives natural user trigger phrases alongside tool-output triggers, and clearly answers both what and when. Minor overlap risk with adjacent Figma skills keeps distinctiveness just below a 5.

DimensionReasoningScore

Specificity

Lists multiple concrete actions and outputs ('Translates Figma motion and animations into production-ready application code') and ties them to specific tools (`get_design_context`, `get_motion_context`), giving comprehensive coverage of the skill's capability.

5 / 5

Completeness

Explicitly answers both 'what' (translate Figma motion/animations into production-ready code) and 'when' with concrete 'Use when...' trigger phrases including user utterances, URL-based, and tool-output-based triggers.

5 / 5

Trigger Term Quality

Includes natural user phrases users would actually say ('implement this motion', 'add animation from Figma', 'animate this component') plus the technical trigger of a Figma URL with an animated node, covering synonyms and the MCP-tool trigger path.

5 / 5

Distinctiveness Conflict Risk

Has a clear niche (Figma motion -> code) with distinct triggers, but shares the Figma-implement design space with sibling skills like figma-use, leaving minor overlap risk on the Figma URL trigger.

4 / 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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository
figma/mcp-server-guide
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.