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

Quality

83%

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.

An expertly structured skill: novel domain knowledge throughout, a fully sequenced workflow with explicit validation and feedback loops, and exemplary progressive disclosure with conditional load triggers and verified one-level-deep references. The weaknesses are duplicated guidance between the workflow steps and Critical Rules (and a triple-explained fallbackNodeId), plus a couple of dangling example pointers that cost both conciseness and actionability.

Suggestions

Deduplicate guidance repeated across sections: fallbackNodeId is explained in Step 2 and twice in Step 3, and Step 5's two bullets restate Critical Rules 2 and 4 — consolidate each into one location with a cross-reference.

Replace 'See the interleaved-transform example' with an explicit link to references/examples-and-anti-examples.md (and its specific section) so the pointer is navigable.

Trim the instruction to load gotchas.md from three places (Step 3 bullet, Step 5, References index) to the single most decision-relevant point.

DimensionReasoningScore

Conciseness

The body is dense with genuinely novel Figma-MCP signal and assumes Claude's competence, but contains real duplication: fallbackNodeId is explained in Step 2 and then twice more in Step 3, 'load gotchas.md' is instructed three times, and Step 5's bullets restate Critical Rules 2 and 4 — fitting the 'mostly efficient but could be tightened' anchor rather than the minor-trims anchor.

3 / 5

Actionability

Highly concrete — exact tool-call signatures, timing formulas (startMs + orderPosition * staggerStepMs), worked offset math ([45, 125, 125] -> [0, 80, 80]), and copy-paste transformTemplate patterns — but full worked examples are delegated to references and 'See the interleaved-transform example' is a dangling pointer without a link, leaving minor gaps.

4 / 5

Workflow Clarity

Five explicitly sequenced steps (confirm static context, fetch motion data, merge, apply, validate) with a dedicated validation step, an explicit feedback loop ('reload, observe, iterate'), and pre-batching validation for what is a batch operation — matching the top anchor's clear sequence, explicit validation, and error-recovery guidance.

5 / 5

Progressive Disclosure

Clear overview with six one-level-deep references that all exist on disk, each signaled with explicit 'Load when...' conditions and inline load instructions at decision points; cross-links between references are lateral siblings with back-navigation (no nested chains), and the deep-link anchor (#swiftui-translation) resolves — matching the top anchor.

5 / 5

Total

17

/

20

Passed

Description

82%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, concrete, and with exemplary explicit trigger guidance including quoted user phrases, URL shape, and MCP tool signals. The main gap is that the 'what' is a single action — enumerating the concrete output actions (motion.dev, CSS keyframes, SwiftUI translation) would lift specificity — and a few natural motion synonyms are absent.

Suggestions

Enumerate the concrete translation targets in the what-clause (e.g., '...into motion.dev, CSS keyframes, or SwiftUI animation code') to lift specificity from one action to several.

Add commonly-used Figma motion terms users say — 'transitions', 'effects', 'smart animate' — to the trigger clause for fuller natural-keyword coverage.

DimensionReasoningScore

Specificity

Names the domain and one concrete action — "Translates Figma motion and animations into production-ready application code" — but does not enumerate several distinct actions (e.g., which output targets: motion.dev, CSS keyframes, SwiftUI), matching the 1-2-concrete-actions anchor rather than the several-actions anchors.

3 / 5

Completeness

Explicitly answers both what ("Translates Figma motion and animations into production-ready application code") and when ("Use when... user mentions 'implement this motion'... provides a Figma URL whose node is animated, or when `get_design_context` returns motion data") with concrete quoted trigger phrases — a direct match for the top anchor.

5 / 5

Trigger Term Quality

Quotes natural user phrases ("implement this motion", "add animation from Figma", "animate this component") plus the Figma-URL and MCP-tool-signal triggers, but a few natural domain terms users would say ("transitions", "effects", "smart animate") are missing, fitting anchor 4 rather than comprehensive anchor 5.

4 / 5

Distinctiveness Conflict Risk

Clear niche (Figma motion to code) with motion-specific triggers that even scope the URL case to animated nodes ("provides a Figma URL whose node is animated"), giving minimal conflict risk with sibling Figma or frontend skills.

5 / 5

Total

17

/

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.