web-animation-design

Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

78%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 highly actionable, well-organized animation reference with copy-paste code and clear decision guidance. Its main gap is a missing referenced bundle file (PRACTICAL-TIPS.md) and minor over-explanatory prose.

Suggestions

Add the missing PRACTICAL-TIPS.md bundle file (or create a references/ directory holding it) so the inline reference resolves, lifting progressive_disclosure.

Trim explanatory asides like 'Why it works: Acceleration at the start...' and 'Linear feels robotic and unnatural' that restate knowledge Claude already has.

Consider an explicit 'Verify' step after animation implementation (e.g., check prefers-reduced-motion and GPU properties) to add a feedback checkpoint to the workflow.

Dimension	Reasoning	Score
Conciseness	Overwhelmingly actionable tables and code with little padding, but includes a few explanatory asides Claude largely already knows ('Why it works...', 'Linear feels robotic').	4 / 5
Actionability	Provides concrete cubic-bezier values, duration tables, executable CSS/JS/JSX snippets, and a decision flowchart that are copy-paste ready across common cases.	5 / 5
Workflow Clarity	Quick Start questions and the Easing Decision Flowchart give a clear sequenced decision path; no explicit validation checkpoints, but this is a design guide rather than a destructive/batch operation so the validation cap does not apply.	4 / 5
Progressive Disclosure	Good one-level-deep structure with an inline summary table pointing to PRACTICAL-TIPS.md, but that referenced bundle file is not present in the repository, so the navigation target is broken.	3 / 5
	Total	16 / 20 Passed

Description

95%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, trigger-rich description that clearly states both capability and activation conditions with extensive natural and technical keywords. The only minor weakness is a touch of fluff and action-listing that falls just short of fully comprehensive.

Dimension	Reasoning	Score
Specificity	Names the domain ('Design and implement web animations') plus several concrete sub-capabilities (easing, timing, duration, springs, transitions), but stops short of a full enumerated action list; 'feel natural and purposeful' is slightly fluffy.	4 / 5
Completeness	Explicitly answers both what ('Design and implement web animations...') and when ('Use this skill proactively whenever...', 'Triggers on:...') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Comprehensive keyword coverage spanning natural user phrases ('feels janky', 'make it smooth', 'button press feel') and technical/library terms (cubic-bezier, Framer Motion, GSAP, prefers-reduced-motion).	5 / 5
Distinctiveness Conflict Risk	Occupies a clear, narrow animation niche with distinctive triggers and minimal overlap risk with other skills.	5 / 5
	Total	19 / 20 Passed

Validation

87%

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 — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning
relative_links	Relative link issues: 2 missing	Warning

	Total	14 / 16 Passed

Repository: Kiz8-Team/open-agents
Path: .agents/skills/web-animation-design/SKILL.md
Commit: 411da81

Reviewed: ~19 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.