Agent skill · Design · mblode

ui-animation agent skill by mblode

Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, curve fitting from recordings, and sparse interface sound.

View on GitHub Read SKILL.md

At a glance

Publisher	mblode
Repository	mblode/agent-skills (28 listed skills)
Category	Frontend and Design
License	MIT
Last commit	October 17, 2026 (repository)
SKILL.md	220 lines, 3,077 words
Bundled files	25 files, including references, scripts
Quality score	86/100 · B Passes all seven graded checks
Security scan	Not scanned
README badge	Get the badges for this listing

Before you install

Read from the skill's files at the directory's October 19, 2026 snapshot: what ships with it, what its code reads, and the terms it is published under.

Bundled scripts: 3 script files (3 Python). Your agent may run them, so read them first.
License: MIT, an open-source or open-content license.

Install ui-animation

The skills CLI works with Claude Code, Codex, Cursor and other agents; the other routes copy the folder by hand.

Skills CLI

npx skills add https://github.com/mblode/agent-skills/tree/main/skills/ui-animation

Claude Code, project-level copy

tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/mblode/agent-skills.git "$tmp/repo"
mkdir -p .claude/skills
cp -R "$tmp/repo/"skills/ui-animation .claude/skills/
rm -rf "$tmp"

Codex installer

python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
    --repo mblode/agent-skills \
    --path skills/ui-animation

mblode/agent-skills is third-party code. Read SKILL.md and any bundled scripts before you install it.

How the author describes it

Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, curve fitting from recordings, and sparse interface sound. Use when asked to "add animation", "match this easing", "reverse engineer this motion", "add a click sound", or find animation opportunities.

From the description field of SKILL.md. Agents read this line to decide when to load the skill.

Sections in SKILL.md

Reference files
Core rules
Motion design principles
What to animate
Easing defaults
Transition decision rules
Spatial and sequencing
Accessibility
Performance
Anti-patterns
Workflow
Validation
Discovery workflow
Reverse-engineer workflow
Related skills

Files in the skill folder

SKILL.md
evals/discovery-mode.json
evals/evals.json
evals/fixtures/settings-panel.tsx
references/choreography.md
references/clip-path-techniques.md
references/code-output.md
references/component-patterns.md
references/contextual-animations.md
references/curve-fitting.md
references/debugging-symptoms.md
references/decision-framework.md
references/gesture-drag.md
references/interface-sfx.md
references/measurement-guide.md
references/performance-deep-dive.md
references/review-format.md
references/scroll-animations.md
references/spring-animations.md
references/svg-animation.md
references/transition-recipes.md
references/vocabulary.md
scripts/extract_frames.py
scripts/fit_curves.py

Showing 24 of 25 files. Browse the folder on GitHub.

Suede Skill Check: 86/100 · B

Report snapshot · October 19, 2026 · graded-v2

The rubric totals 100 points; published scores are capped at 99. Security scan: not scanned.

Source revision: 81d0af2f6d4b. Report version 539124e19ffe. Badge URLs follow the latest listing; save the report to keep this version.

Download report · Request a fresh review

What to review next

Boundary clause: 0 of 4 points. 4 when the description says when not to use the skill (“Not for …”, “Do not use …”, “Use … instead”).
Instruction depth: 4 of 7 points. 7 for a SKILL.md body of 500–3,000 words; 4 for 250–4,500; 1 for 100 or more.
Tool permissions declared: 0 of 2 points. 2 when the frontmatter declares allowed-tools.

Add declarations and bundled files when they describe the skill’s actual needs. Update the source, then request a fresh review with the changed commit or PR.

ui-animation passes the required frontmatter check and all seven graded checks, which cover the SKILL.md format, a declared license and a commit in the last year. Those checks earn 56 of the score’s points; the rest come from description quality, instruction depth, bundled files, maintenance and curated-list citations. How the score works.

See the checks and points

Check	Result
Frontmatter parses and declares a name and a description	Pass
Name uses lowercase letters, digits and hyphens, 64 characters or fewer	Pass
Name matches the skill's folder name	Pass
Description is between 50 and 1,024 characters	Pass
Description says when an agent should use the skill	Pass
SKILL.md body is 500 lines or fewer	Pass
A license is declared in the frontmatter or the repository	Pass
Repository has a commit in the last 12 months	Pass

Score component	Points
Structural checks	56 of 56
Description length	5 of 5
Boundary clause	0 of 4
Example request	3 of 3
Instruction depth	4 of 7
Reference files	3 of 3
Bundled scripts	2 of 2
Recent maintenance	9 of 9
Curated-list citations	4 of 7
Tool permissions declared	0 of 2
Compatibility declared	0 of 2

Two badges for ui-animation

Choose the numeric badge, the letter badge, or both. Each links to this skill’s Suede listing; either valid linked badge can qualify for the feature offer.

Markdown

[![Suede Skill Check: 86/100](https://skills.suedeai.ai/directory/mblode/agent-skills/ui-animation/score.svg)](https://skills.suedeai.ai/directory/mblode/agent-skills/ui-animation/)
[![Suede Skill Check: Grade B](https://skills.suedeai.ai/directory/mblode/agent-skills/ui-animation/badge.svg)](https://skills.suedeai.ai/directory/mblode/agent-skills/ui-animation/)

HTML

<a href="https://skills.suedeai.ai/directory/mblode/agent-skills/ui-animation/"><img src="https://skills.suedeai.ai/directory/mblode/agent-skills/ui-animation/score.svg" alt="Suede Skill Check: 86/100" width="160" height="175"></a>
<a href="https://skills.suedeai.ai/directory/mblode/agent-skills/ui-animation/"><img src="https://skills.suedeai.ai/directory/mblode/agent-skills/ui-animation/badge.svg" alt="Suede Skill Check: Grade B" width="160" height="175"></a>

Suede Certified on the shield refers to this published structural quality check. Security scan: not scanned. Read the methodology.

Limited-time feature offer: display either the numeric or letter badge in your repository or skill README (both also qualify), then request badge verification. Eligible skills scoring 80–99 can receive a featured placement after Suede verifies at least one valid badge linked to the skill’s listing. Suede has not announced an end date.