agentmods.dev

motion-design-principles

motion-design-principles is a skill for Claude Code from latestaiagents/agent-skills. It costs 147 tokens per session (2,131 once invoked), scanned A, original, MIT.

A set of practical rules for designing and reviewing animation in videos and user interfaces. It explains timing, easing, readable text, screen layouts, and accessibility settings such as reduced motion.

In plain words
What is it for?
Use it to set animation timing, design titles and captions for different screen shapes, review busy drafts, and check for flashing or reduced-motion concerns.
Why use it?
Animation can become distracting, hard to read, or uncomfortable when every element moves at once. These rules help motion clarify changes and guide attention instead of adding noise.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the video-motion plugin — 5 skills shipped together , and of latestaiagents

not rated 6repo 9d ago A scan 147 tokens original MIT

Good fit Use it to set animation timing, design titles and captions for different screen shapes, review busy drafts, and check for flashing or reduced-motion concerns.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/latestaiagents/agent-skills/motion-design-principles
View source ↗ latestaiagents/agent-skills latestaiagents.com
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add latestaiagents/agent-skills --skill motion-design-principles
Clone the repo
git clone --depth 1 https://github.com/latestaiagents/agent-skills

Made for: Claude Code.

Or install video-motion, the plugin that ships this one along with the rest of its 5 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for motion-design-principles

README.md
[![agentmods](https://agentmods.dev/badge/skills/latestaiagents/agent-skills/motion-design-principles/github.svg)](https://agentmods.dev/skills/latestaiagents/agent-skills/motion-design-principles)
Your own site
<a href="https://agentmods.dev/skills/latestaiagents/agent-skills/motion-design-principles"><img src="https://agentmods.dev/badge/skills/latestaiagents/agent-skills/motion-design-principles/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for motion-design-principles

Your own site · 80×15
<a href="https://agentmods.dev/skills/latestaiagents/agent-skills/motion-design-principles"><img src="https://agentmods.dev/badge/skills/latestaiagents/agent-skills/motion-design-principles.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 147 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,131 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00147 $0.02131
Opus 5.5 $0.00059 $0.00852
Sonnet 5.5 $0.00029 $0.00426
Haiku 4.5 $0.00015 $0.00213

Measured 9d ago against content hash eb0fccdb6fdc, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

motion-design-principles scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/video-motion/motion-design-principles/SKILL.md · 142 lines

How it starts

The opening of the file, as written. The whole thing — 142 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Motion Design Principles

Motion should explain, direct attention, or connect two states. If it does none of those, cut it.

Agents tend to over-animate: everything slides, bounces, and fades at once. This skill gives concrete defaults and a critique checklist. It is framework-neutral; apply it in Remotion, HyperFrames, CSS, or any keyframe tool.

When to Use

  • Choosing durations and easing for a composition
  • Laying out titles, lower thirds, and captions across aspect ratios
  • Critiquing a draft render that feels busy, slow, or hard to read
  • Making animated output accessible (reduced motion, flashing)

Workflow

Step 1: Think in Frames, Not Milliseconds

Video renders at a fixed frame rate, so durations are frame counts. Convert once and keep a table in the project.

Duration 24 fps 30 fps 60 fps
0.2 s 4.8 → 5 6 12
0.5 s 12 15 30
1 s 24 30 60

Round to whole frames. Keep the composition frame rate equal to the source footage frame rate; YouTube's upload guidance is to encode at the frame rate the content was recorded at.

Step 2: Pick Durations by Distance and Importance

Starting points, then judge by eye:

Motion Typical range Notes
Small UI feedback (highlight, press) ~0.1–0.2 s Should feel instant
Element entering / leaving ~0.25–0.5 s Larger distance → longer
Full-frame transition / scene change ~0.4–0.8 s Longer feels "cinematic", then "slow"
Hold on readable text Long enough to read twice See Step 5

For reference, Material Design 3's motion tokens span 50 ms (short1) to 1000 ms (extra-long4); UI transitions generally sit in the short-to-medium band. Video titles can hold longer because the viewer is not trying to act.

Step 3: Ease Almost Everything

Linear motion reads as mechanical. Use linear only for continuous motion (tickers, progress bars, rotation loops) or when matching a physical constant speed.

Read the full file on GitHub · 142 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 9d ago First seen · 142 lines · 147 tokens per session scan A eb0fccdb6fdc

Subscribe to this mod's changes

motion-design-principles is a skill published in the GitHub repository latestaiagents/agent-skills (6 stars, last pushed 9d ago), licensed MIT. It adds 147 tokens to every session and 2,131 once invoked, about $0.0006 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-11-04.

Creative and mediaDesign and UXagentic-aiagentic-ragagentic-workflowagentshubagentskillsai
Related

motion-design-principles compared with skills from other repositories

motion-design-principles next to 6 skills from other repositories
ModTypeStarsLast pushLicenceScanTokensWorks with
motion-design-principleslatestaiagents/agent-skillsSkill69d agoMITA147Claude Code
ai-accessibilityskillsaiagent/aiskillsSkill55mo agononeA75Codex
ai-baoyu-image-cardsskillsaiagent/aiskillsSkill55mo agononeA80Codex
ai-design-briefskillsaiagent/aiskillsSkill55mo agononeA71Codex
ai-design-taste-frontendskillsaiagent/aiskillsSkill55mo agononeA80Codex
ai-extract-design-systemskillsaiagent/aiskillsSkill55mo agononeA73Codex
ai-frontend-designskillsaiagent/aiskillsSkill55mo agononeA72Codex