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

81%

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

The canonical home for this skill is figma-implement-motion in figma/mcp-server-guide

SKILL.md
Quality
Evals
Security

Quality

Content

67%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, deeply actionable skill for a genuinely complex domain: the tool分工, merge precedence, and validation-before-batching rules are concrete and specific, and the six reference files are real, well-signaled, and one level deep. The main weakness is token efficiency — significant rule repetition, duplicated reference-loading instructions, and dense multi-clause sentences that could be tightened, plus some gotcha-level detail that could migrate to the references.

Suggestions

State the exact-nodeId-over-fallbackNodeId precedence rule once (in Step 3) and reference it from the Overview and Step 2 instead of re-explaining the instance-vs-backing-component rationale in three places.

Consolidate reference-loading instructions into the References section's per-file 'Load when...' conditions, keeping only the first inline mention per file, to remove the 3-4 repeated 'Load references/gotchas.md' directives.

Move the detailed transformTemplate composition formula and interleaved-transform offset arithmetic into references/examples-and-anti-examples.md (already the designated home for worked examples), keeping only the wrapper > static-transform > inner nesting rule and a pointer in the body.

DimensionReasoningScore

Conciseness

The body is dense with genuinely novel Figma-specific signal (no padding with concepts Claude already knows), but key rules are repeated: exact-vs-fallbackNodeId matching is explained three times (Overview, Step 2, Step 3), and load-this-reference instructions for gotchas.md/examples-and-anti-examples.md appear in 3–4 places each. Several sentences (the transformTemplate composition bullet, Rule 1's exception chain) are long and winding and could be tightened, matching 'mostly efficient but could be tightened' rather than anchor 4's 'minor instances'.

3 / 5

Actionability

Concrete tool-call signatures (get_design_context(fileKey=..., nodeId=...)), exact timing formulas ("startMs + orderPosition * staggerStepMs"), explicit precedence rules (exact id > fallbackNodeId > name/position), and usable code patterns (transformTemplate={(_, generated) => "<css> " + generated}) give mostly executable guidance. Not 5 because the inline snippets are fragments with placeholder arguments and complete worked examples are delegated to a reference file rather than covering the common cases inline.

4 / 5

Workflow Clarity

Five clearly sequenced steps with per-step sub-instructions, and Step 5 plus Critical Rule 4 provide an explicit validation checkpoint with a feedback loop ("Spot-check one animation runs end-to-end (reload, observe, iterate) before batching") — so the batch-operation cap does not apply. Below anchor 5 because there is no consolidated checklist for the intricate Step 3 merge (id matching, wrappers, split nodes, SVG paths) and error recovery beyond 'iterate' is mostly implicit.

4 / 5

Progressive Disclosure

All six referenced files exist in references/ and are one level deep, each linked inline at point-of-need and catalogued in a References section with 'Load when...' conditions — good structure and easy navigation. Below anchor 5 because the SKILL.md body itself carries heavy gotcha-level detail inline (e.g., the full interleaved-transform and transformTemplate-composition mechanics) that belongs in the examples/gotchas references, and load instructions are duplicated across Step 3, Step 5, Critical Rules, Examples, and References sections.

4 / 5

Total

15

/

20

Passed

Description

87%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: concrete capability statement, explicit and multi-conditional 'Use when...' triggers in natural user language, and a tightly scoped Figma-motion niche with MCP-tool signals that make mis-triggering unlikely. The only soft spot is that it names a single action rather than enumerating several specific capabilities.

DimensionReasoningScore

Specificity

"Translates Figma motion and animations into production-ready application code" names the domain precisely and states one highly concrete action. It sits above anchor 3 because the action is far more specific than generic 'Processes PDF files'-style phrasing, but below anchor 5 because only one capability is listed — output formats (motion.dev, CSS keyframes, SwiftUI) and merge/adaptation steps are not enumerated.

4 / 5

Completeness

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" followed by four concrete trigger conditions). This is a direct match for the anchor-5 example pattern of capability statement plus 'Use when...' with concrete trigger phrases; not 4 because the 'when' clause is fully explicit, not merely present.

5 / 5

Trigger Term Quality

Includes natural user phrases — "implement this motion", "add animation from Figma", "animate this component", "provides a Figma URL whose node is animated" — plus tool-signal triggers ("get_design_context returns motion data"). Good coverage, but common synonyms like "transition", "micro-interaction", or "motion design" are missing, so it does not reach comprehensive anchor 5.

4 / 5

Distinctiveness Conflict Risk

Clear niche (Figma-sourced motion → code) with triggers anchored to Figma URLs, animated nodes, and MCP tool responses — signals no other skill would produce. Overlap with a generic Figma-implementation skill is prevented by the motion/animation qualifier. Minimal conflict risk, matching anchor 5.

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