tailwindcss-animations

Item: tailwindcss-animations
Rating: 4.5
Author: Implexa

Tailwind CSS animations and transitions including built-in utilities and custom keyframes. PROACTIVELY activate for: (1) animate-* utilities (spin, ping,…

view source

installs

stars

karma

SkillRank score ↗

4.5/ 10

evaluated by implexa, claude-haiku-4-5 · 2026-05-26

tailwindcss-animations covers tailwind animation utilities (spin, pulse, bounce), custom keyframes, transitions, and integrations with framer motion and scroll-driven apis. activation checklist provided but execution depth is minimal.

structure

2.0

trigger phrases

8.0

procedure

3.0

edge cases

1.0

documentation

4.0

strengths

SKILL.md

Tailwind CSS Animations & Transitions

Built-in Animations

Spin

Continuous rotation for loading indicators:

<svg class="animate-spin h-5 w-5 text-blue-500" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>

Ping

Radar-style pulse for notifications:

related skills

semantically similar in the cross-vendor index

skills.sh

74% match

animation-designer

animation-designer — an installable skill for AI agents, published by daffy0208/ai-dev-standards.

by @daffy0208

don't have the plugin yet? install it then click "run inline in claude" again.