What animation libraries does this skill support?

This skill primarily specializes in Framer Motion for React, covering variants, motion components, and shared layout animations.

Can it help with mobile-friendly gestures?

Yes, it provides implementation patterns for drag, pan, and swipe gestures that are optimized for both touch and mouse interactions.

How does this skill handle animation performance?

It focuses on using GPU-accelerated properties like transform and opacity, and provides strategies to avoid layout thrashing to maintain a 60fps target.

Does it support accessibility and reduced motion?

Yes, the skill includes best practices for respecting 'prefers-reduced-motion' media queries to ensure animations are accessible to all users.

Animation Designer

Name: Animation Designer
Author: deve1993

bydeve1993

•

デザインツール

Creates fluid, production-ready UI animations and interactive experiences using Framer Motion and spring physics.

Animation Designer is a specialized Claude Code skill designed to streamline the creation of high-quality web animations within the React ecosystem. It provides deep expertise in Framer Motion, enabling developers to implement everything from simple entrance effects and micro-interactions to complex gesture-driven components and scroll-triggered parallax. By leveraging spring physics and animation orchestration, this skill ensures that UI transitions feel natural and responsive while maintaining peak performance through GPU acceleration and motion reduction best practices.

主な機能

01Performance-optimized animations using GPU-accelerated properties

02Sophisticated orchestration like staggered children and sequenced events

031 GitHub stars

04Advanced Framer Motion integration with reusable animation variants

05Spring physics implementation for natural-feeling UI motion

06Complex gesture handling including drag, pan, and tap interactions

ユースケース

01Developing accessible component libraries with smooth modal and layout transitions

02Creating polished marketing landing pages with complex scroll-triggered scroll effects

03Building interactive dashboards with animated data visualizations and micro-interactions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add deve1993/quickfy-website animation-designer

For use in Claude.ai and ChatGPT

Download Skill