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

87%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Quality

Content

85%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A high-quality, information-dense skill with precise executable tool guidance, a well-sequenced validated workflow, and exemplary progressive disclosure. The one real conciseness cost is overlap between the Critical Rules and the Required Workflow steps, which could be tightened.

Suggestions

Consolidate the Critical Rules that restate workflow steps (Rules 1, 2, and 4 echo Steps 2, 4, and 5) by keeping only the novel nuance in Critical Rules and cross-referencing the workflow for procedure.

Consider moving the longest procedural detour (interleaved-transform offset math) into its reference file with a one-line summary plus pointer in the body to further trim the core token footprint.

Dimension	Reasoning	Score
Conciseness	The body is dense, assumes Claude's competence, and avoids explaining concepts Claude already knows, but the Critical Rules section partially restates workflow Steps 2/4/5 (snippet regeneration, stack-matching, end-to-end validation) and could be consolidated for token efficiency.	2 / 3
Actionability	Provides executable tool calls with exact signatures (get_motion_context(fileKey=..., nodeId=..., recursive=true)), precise field names, explicit matching precedence, and concrete code patterns (transformTemplate, pathLength="1", x: "-50%"), with worked examples delegated to a real references file.	3 / 3
Workflow Clarity	Five clearly sequenced steps culminate in an explicit Step 5 "Validate" checkpoint with a reload-observe-iterate feedback loop ("Renders without error is not renders correctly"), and batch validation is addressed alongside a detailed interleaved-transform sub-procedure.	3 / 3
Progressive Disclosure	SKILL.md is an overview with six well-signaled one-level-deep references, all of which are real files, each carrying a "Load when..." trigger; content is appropriately split and navigation is easy, with only sibling cross-references rather than nested 2+-level chains.	3 / 3
	Total	11 / 12 Passed

Description

90%

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, third-person description with explicit "what" and "when" guidance and excellent natural-language trigger phrases. Its only weakness is capability specificity, which lists a single core action rather than enumerating the distinct motion targets it handles.

Suggestions

Enumerate the concrete motion deliverables in the description (e.g., CSS @keyframes, motion.dev components, framework-library adaptation, SVG path animation) to lift specificity from one action to several.

Optionally name the supported target stacks (React/vanilla/SwiftUI) in one phrase to sharpen distinctiveness from a general Figma skill.

Dimension	Reasoning	Score
Specificity	Names the domain and one concrete action ("Translates Figma motion and animations into production-ready application code"), but the "Use when" clause is trigger guidance rather than additional capabilities, so it does not list multiple specific actions like the anchor-3 example.	2 / 3
Completeness	Explicitly states what the skill does (translates Figma motion into production-ready code) and when to use it via an explicit "Use when..." clause with concrete triggers, satisfying both halves.	3 / 3
Trigger Term Quality	Quotes natural phrases users would actually say ("implement this motion", "add animation from Figma", "animate this component") plus concrete tool-trigger conditions, giving good coverage of natural trigger terms.	3 / 3
Distinctiveness Conflict Risk	Occupies a clear niche (Figma motion/animation to code) with distinct tool-based triggers (get_motion_context, animated-node URLs) that are unlikely to fire for unrelated skills.	3 / 3
	Total	11 / 12 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
relative_links	Relative link issues: 1 suspicious	Warning

	Total	15 / 16 Passed

Repository: openai/plugins
Path: plugins/figma/skills/figma-implement-motion/SKILL.md
Commit: 11c74d6

Reviewed: about 15 hours ago

Table of Contents

Discovery Implementation Validation

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.