How does this skill handle accessibility for animations?

The skill provides standard patterns for using motion-safe and motion-reduce utilities to ensure your UI respects user preferences for reduced motion.

Are the provided animation patterns performance-optimized?

Yes, the skill emphasizes using GPU-accelerated properties like transforms and opacity rather than properties that trigger layout repaints like 'left' or 'top'.

What common UI patterns are covered?

The skill covers various patterns including loading dots, card lifts, button press effects, skeleton loaders, and hamburger-to-X menu transitions.

Can I create custom keyframe animations?

Absolutely. It includes guides for defining custom keyframes, duration, and easing functions within your CSS or Tailwind configuration.

Does this skill support Tailwind CSS v4?

Yes, it includes specific patterns for defining custom animations and easing functions using the new @theme directive introduced in Tailwind CSS v4.

Tailwind CSS Animations & Transitions

Name: Tailwind CSS Animations & Transitions
Author: mhbdev

bymhbdev

•

デザインツール

Enhances user interfaces with high-performance Tailwind CSS animations, transitions, and custom motion patterns.

This skill provides Claude with a comprehensive reference for implementing fluid animations and transitions using Tailwind CSS. It covers built-in utility classes like pulse and bounce, detailed configuration for transitions and transforms, and modern Tailwind v4 custom animation definitions. By using this skill, developers can quickly implement accessible, GPU-accelerated UI feedback, complex hover effects, and skeleton loaders while adhering to performance best practices and reduced-motion accessibility standards.

主な機能

011 GitHub stars

02Custom animation and easing definitions optimized for Tailwind v4

03Built-in utility animations including Spin, Ping, Pulse, and Bounce

04Comprehensive transition and transform configurations for interactive elements

05Performance-optimized, GPU-accelerated motion patterns to prevent repaints

06Accessibility-first implementation using motion-safe and motion-reduce utilities

ユースケース

01Developing accessible web animations that automatically respect user system motion preferences

02Implementing interactive hover and click effects for buttons, cards, and navigation menus

03Creating responsive loading indicators and skeleton screens for improved perceived performance

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mhbdev/git-pal tailwindcss-animations

For use in Claude.ai and ChatGPT

Download Skill