12 Principles Of Animation
Audits your animation code against Disney's 12 principles adapted for web interfaces. It scans CSS and component files for violations like transitions over 300ms, missing active states on buttons, linear easing on motion, or excessive stagger delays. The output is clean file:line findings you can action immediately, organized into timing, easing, physics, and staging categories. What's useful here is the opinionated ruleset: context menus shouldn't animate in, entrances need ease-out while exits need ease-in, and scale transforms should stay between 0.95 and 1.05. If you're building interfaces where animation quality matters and want programmatic checks instead of just eyeballing it, this gives you specific guard rails.
- skills.sh installs
- 2.2K
- GitHub stars
- 42
- last updated
- Aug 21, 2026
Install
$ npx -y skills add raphaelsalaja/skill --skill 12-principles-of-animation --agent claude-codeInstalls into .claude/skills of the current project.
Files
Audits your animation code against Disney's 12 principles adapted for web interfaces. It scans CSS and component files for violations like transitions over 300ms, missing active states on buttons, linear easing on motion, or excessive stagger delays. The output is clean file:line findings you can action immediately, organized into timing, easing, physics, and staging categories. What's useful here is the opinionated ruleset: context menus shouldn't animate in, entrances need ease-out while exits need ease-in, and scale transforms should stay between 0.95 and 1.05. If you're building interfaces where animation quality matters and want programmatic checks instead of just eyeballing it, this gives you specific guard rails.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/raphaelsalaja/skill
- Categories
- Code Review & Quality, Design & UI/UX
- First seen
- Jun 3, 2026
Recommended
More Code Review & Quality
markdown-mermaid-writingk-dense-ai/scientific-agent-skillsComprehensive markdown and Mermaid diagram writing skill. Use when creating any scientific document, report, analysis, or visualization. Establishes text-based 2.2Kskills.sh installs
astro-frameworkdelineas/astro-framework-agentsAstro framework specialist for building fast, content-driven websites with islands architecture. Use when creating Astro components, configuring hydration (clie2.2Kskills.sh installs
stylesandroid/skillsUse this skill to integrate the Jetpack Compose Styles API into an Android project. This skill guides you through upgrading dependencies, setting up component t2.2Kskills.sh installsbgpt-paper-searchk-dense-ai/scientific-agent-skillsSearch scientific papers and retrieve structured experimental data extracted from full-text studies via the BGPT MCP server. Returns 25+ fields per paper includ2.2Kskills.sh installs
cli-anythinghkuds/cli-anythingUse when the user wants Codex to build, refine, test, validate, or list CLI-Anything harnesses for GUI applications or source repositories. Adapts the full CLI-2.2Kskills.sh installs
app-store-preflight-skillstruongduy2611/app-store-preflight-skillsScan an iOS/macOS Xcode project for common App Store rejection patterns before submission. Use when preparing an app for App Store review, after receiving a rej2.1Kskills.sh installs