What is the recommended animation duration?

For most UI transitions, the skill recommends a duration between 200ms and 400ms to ensure the interface feels responsive and snappy.

How does it handle accessibility?

The skill includes specific patterns for the useReducedMotion hook and CSS media queries to respect user system preferences and prevent motion-related discomfort.

Can I use it with Tailwind CSS?

Yes, it includes configuration patterns for Tailwind's animation and keyframe utilities as well as standard transition classes.

Is it optimized for performance?

Absolutely, it emphasizes GPU-accelerated properties like transform and opacity while providing guidance on avoiding layout thrashing.

Does this skill support Framer Motion?

Yes, it provides comprehensive snippets and best practices for Framer Motion, including AnimatePresence, layout transitions, and spring physics.

Animation & Motion Design

Name: Animation & Motion Design
Author: HouseGarofalo

byHouseGarofalo

0•

デザインツール

Enhances user interfaces with smooth, performance-optimized animations and interactive micro-interactions using Framer Motion and CSS.

The Animation & Motion Design skill provides a comprehensive framework for implementing purposeful motion in web applications. It offers standardized patterns for Framer Motion and CSS animations, covering everything from simple fade-ins to complex scroll-triggered effects, layout transitions, and gesture-based interactions. By focusing on performance optimization—prioritizing GPU-accelerated properties—and accessibility—respecting reduced-motion preferences—this skill ensures that animations improve the user experience without sacrificing speed or inclusivity.

主な機能

01Pre-configured gesture interactions for hover, tap, and drag states

020 GitHub stars

03Performance-first CSS keyframes and Tailwind transition utilities

04Advanced scroll-triggered animations and parallax effect implementations

05Built-in accessibility support for users with motion sensitivities

06Standardized Framer Motion patterns for enter, exit, and layout transitions

ユースケース

01Developing performance-optimized skeleton screens and loading states

02Building polished page transitions and modal dialog animations

03Creating interactive feedback loops for user gestures like hovering and tapping

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add housegarofalo/claude-code-base animation-motion

For use in Claude.ai and ChatGPT

Download Skill