Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Motion Design Skill · lottiefiles | DecimalAI

design mediaby lottiefiles

Motion Design Skill

lottiefiles/motion-design

Source lottiefiles/motion-design-skill ↗License MIT

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI.

SkillScore77Maintained

Automatic

Design & UX Review pack

Last verified 8/16/2026

What it changes

Passed 16 of 21 test cases with the skill, and 6 of 21 without it.

Without skill27%

With skill77%

Checks it passed that the model alone missed

Specifies hover feedback duration under 100ms.
Specifies 0% overshoot for the error alert state.
Mandates adding an ambient background motion layer.

and 15 more in the full report

12 fixed5 passed either way4 still failing1 broke

Pass-rate lift: +50 pp
Tokens: +126%
Agent turns: 0%
Response time: -24%

Model gemini-3.6-flashMeasured 8/16/2026v117 of 22 cases passed with skill · 21 comparable

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/lottiefiles-motion-design/SKILL.md https://app.decimal.ai/s/lottiefiles-motion-design/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add lottiefiles-motion-design, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/lottiefiles-motion-design/ and pins it in .decimal/skills.lock

decimalai skills add lottiefiles-motion-design

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/lottiefiles-motion-design/SKILL.md https://app.decimal.ai/s/lottiefiles-motion-design/SKILL.md

Raw file: /s/lottiefiles-motion-design/SKILL.md ↗ · machine-readable summary at /s/lottiefiles-motion-design.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 11

Prompt

We are animating a sticky note / gel badge UI element being dropped onto a board. The visual asset team asked whether to treat this material as rigid metal or elastic rubber/gel. Provide the precise duration scaling factor and overshoot percentage range for an elastic material profile.

What was checked, without and with the skill
Checked	Without skill	With skill
Specifies a duration scaling multiplier of 0.8x for elastic materials.	Missed	Passed
Specifies overshoot percentage between 15% and 25% for elastic materials.	Missed	Passed

case-07 · gemini-3.6-flash · 8/16/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md301 linessingle file

Motion Design Skill

When to Apply

Use this skill when:

Creating UI animations (buttons, cards, modals, page transitions)
Designing micro-interactions and feedback animations
Building loading, success, or error states
Animating illustrations or decorative elements
Planning scroll-triggered or progress-based animations
Establishing brand motion identity
Choreographing multi-element sequences

Decision tree:

Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
Does it express brand personality? → Motion Personality archetypes
Does it tell a story or guide attention? → Disney principles + choreography
Is this a complex multi-element scene? → 1/3 Rule + stagger patterns

Quick Reference: 8-Step Checklist

Before creating any animation:

Emotional target? — joy, calm, urgency, elegance
Motion Personality? — Playful, Premium, Corporate, Energetic
Primary property? — position, scale, rotation, opacity
Duration? — see duration table below
Easing family? — entrance=decelerate, exit=accelerate
Hero element? — apply staging principles
Secondary + ambient layers? — add richness
1/3 rules? — motion distance, simultaneous elements

Three Pillars (CRITICAL)

Every animation must satisfy three pillars before any technical decisions:

Track record

Benchmark

16 / 21

test cases passed, vs 6 / 21 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

lottiefiles / motion-design-skill

skills/motion-design/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

Motion Design Skill

When to Apply

Quick Reference: 8-Step Checklist

Three Pillars (CRITICAL)

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills