Animation Designer

This is the animation skill you reach for when you need production-ready motion patterns instead of reinventing fade-ins for the hundredth time. It covers the essentials: staggered lists, modal transitions, scroll-triggered reveals, and all those micro-interactions that make interfaces feel polished. The patterns use Framer Motion with sensible spring physics and easing curves already dialed in. You also get practical CSS keyframe examples and loading states like skeleton loaders and pulsing dots. It's not trying to teach you animation theory, just giving you copy-paste starting points that actually look good. If you're building a React app and want animations that don't feel like an afterthought, this gets you there faster than scrolling through documentation.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 56
skills.sh installs: 1.9K
GitHub stars: 39
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add daffy0208/ai-dev-standards --skill animation-designer --agent claude-code

Installs into .claude/skills of the current project.

Files

Animation Designer Skill

I help you create smooth, professional animations for web applications using Framer Motion and CSS.

What I Do

UI Animations:

Page transitions
Component enter/exit animations
Hover effects, button interactions
Loading animations

Scroll Animations:

Parallax effects
Scroll-triggered animations
Progress indicators

Micro-interactions:

Button press feedback
Form field focus states
Success/error animations
Drag and drop feedback

Framer Motion Basics

Installation

npm install framer-motion

Basic Animation

import { motion } from 'framer-motion'

export function FadeIn({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  )
}