Accessibility Issues
This one's for catching animation patterns that break accessibility, specifically targeting Disney-style animation principles that can trigger vestibular disorders or confuse assistive tech. It walks you through how squash and stretch, exaggeration, and arcs can cause real problems for users with motion sensitivity, then gives you the fixes. The troubleshooting checklist is solid, covering prefers-reduced-motion, screen reader announcements, and seizure-safe flash rates. What I appreciate is it doesn't tell you to kill all animation, just how to make it respectful. Includes the standard CSS reset pattern for reduced motion and a quick JS check. If you're implementing any UI animation beyond basic fades, run through this before shipping.
- skills.sh installs
- 525
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill accessibility-issues --agent claude-codeInstalls into .claude/skills of the current project.
Files
Accessibility Issues
Make animations inclusive using Disney's principles thoughtfully.
Problem Indicators
- Motion sickness complaints
- Vestibular disorder triggers
- Screen reader confusion
- Cognitive overload
- Seizure risk (flashing)
- Keyboard focus lost during animation
Diagnosis by Principle
Squash and Stretch
Issue: Excessive distortion causes disorientation
Fix: Reduce or eliminate squash/stretch for users with prefers-reduced-motion. Use opacity changes instead.
Secondary Action
Issue: Too many moving elements Fix: Limit to one animated element at a time. Secondary actions should be subtle or removed.
Exaggeration
Issue: Dramatic motion triggers vestibular responses Fix: Reduce scale, rotation, and position changes. Keep movements small and predictable.
Timing
Issue: Animations too fast or too slow Fix: Provide consistent, predictable timing. Avoid sudden speed changes.
Arcs
Issue: Curved motion paths cause tracking difficulty Fix: Use linear motion for essential UI. Save arcs for optional decorative elements.
Quick Fixes
Sponsors
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/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Universal Fallback525
- Instant 0 100ms524
- Ux Friction524
- Media Publishing521
- Slow 800 1200ms520
- Universal Mindset519
- Universal Timing519
- Animation Principles Absolute Beginner
- Animation Principles Advanced
- Animation Principles Deep Dive
- Animation Principles Expert
- Animation Principles Intermediate
- Animation Principles Master
- Animation Principles Novice
- Animation Principles Quick Start
- Animation Principles Refresher
- Animation Principles Teaching Others
- Animation Principles Troubleshooting
- Animation Principles Universal Reference
- Video Motion Graphics2.7K
- Mobile Touch2.4K
- Framer Motion1.8K
- Motion Designer1.7K
- Micro Interactions1.5K
Recommended
More Design & UI/UX
ux-frictiondylantarre/animation-principlesUse when animation causes user confusion, delays task completion, or creates frustration524skills.sh installs
ui-ux-pro-maxgalaxy-dawn/claude-scholarThis skill should be used when the user asks to design or review a UI, create a landing page or dashboard, choose colors or typography, improve accessibility, o514skills.sh installs
graphic-designtravisjneuman/.claudeProfessional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing514skills.sh installs
accessibilityjezweb/claude-skillsBuild WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboar505skills.sh installs
mck-ppt-designlikaku/mck-ppt-design-skillCreate professional, consultant-grade PowerPoint presentations from scratch using MckEngine (python-pptx wrapper) with McKinsey-style design. Use when user asks503skills.sh installs
ux-designeraj-geddes/claude-code-bmad-skillsDesigns user experiences, creates wireframes, defines user flows, ensures accessibility. Trigger keywords - UX design, wireframe, user flow, accessibility, WCAG493skills.sh installs