Agent skill · design visual · dylantarre
accessible-motion
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
Why this skill is useful
Provides specific guidelines for implementing accessible animations that enhance usability for users with motion sensitivity, which the AI may not generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2025-12-30. 69 stars on the source repository.
What this skill does
Accessible Motion Design Apply Disney's 12 animation principles while ensuring accessibility for users with vestibular disorders, motion sensitivity, and cognitive disabilities. Quick Reference Principle Accessible Implementation ----------- -------------------------- Squash & Stretch Opacity/color change instead Anticipation State change indication without motion Staging Focus management, not motion-based Straight Ahead / Pose to Pose Instant state changes Follow Through / Overlapping Eliminated or minimal fade Slow In / Slow Out Instant or very gentle ease Arc Straight or no movement Secondary Action Reduced or eliminated Timing Instant (0ms) or extended duration Exaggeration Removed entirely Solid Drawing Static visual clarity Appeal Clarity over personality Core Principle Animation should enhance understanding, never hinder it. When motion causes harm, provide alternatives that maintain functionality. Respecting User Preferences CSS Media Query JavaScript Detection Principle Adaptations Squash & Stretch → Replace with opacity or color changes. A button can darken on press instead of compressing. Loading indicators can pulse opacity instead of bouncing. Anticipation → Use static indicators. Show a loading state immediately rather than animated preparation. Hover states change color instantly rather than scaling. Staging → Use focus management and visual hierarchy. Scroll to content rather than animated reveals. Static highlighting over motion-based attention. Motion Types → Instant state changes replace transitions. Toggle switches snap position. Modals appear instantly. Menus show without animation. Follow Through → Eliminated. Elements reach final state immediately. No settling, bouncing, or overshoot effects. Easing → Either instant (0ms) or very gentle, extended duration (500ms+) with minimal distance. If using motion, slow and subtle. Arc/Paths → Straight movement only if any movement. Prefer opacity transitions over positional. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills dylantarre/accessible-motion