mcpField
C
css-animation-creator

css-animation-creator

github.com/onewave-aiDesign & UI393811 installsUpdated 1w ago
Repository

About css-animation-creator

css-animation-creator is a skill for designing motion in web interfaces, aimed at developers building UI experiences. It draws on CSS, Tailwind, and Framer Motion patterns and references, with attention to accessibility, GPU efficiency, and testing on low-end devices.

Key features

  1. 01Choose techniques based on the motion's purpose
  2. 02Reference transitions, keyframes, and interaction patterns
  3. 03Limit animated properties to transform and opacity
  4. 04Respect reduced-motion preferences
  5. 05Check low-end devices and layout thrashing

Use cases

  1. 01Add state feedback to buttons and forms
  2. 02Build loading indicators and skeleton screens
  3. 03Create page transitions or scroll animations

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/onewave-ai/claude-skills --skill css-animation-creator

After installing, type/css-animation-creatorin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
accessibility.md
keyframe-library.md
loading-animations.md
micro-interactions.md
page-transitions.md
performance.md
principles-and-timing.md
scroll-animations.md
tailwind-config.md
transitions.md

Details

From the project README

CSS Animation Creator

Build production-grade, accessible, GPU-efficient motion for web UIs using CSS, Tailwind, and Framer Motion.

Workflow

  1. Identify the purpose of the motion: feedback, delight, guidance, or storytelling.
  2. Choose the technique: CSS transitions for state changes, keyframes for looping or multi-step motion, Framer Motion or JS for orchestration and scroll-linked effects.
  3. Set timing and easing to match the interaction. Apply the timing and easing tables in references/principles-and-timing.md.
  4. Author the animation. Pull ready-made keyframes and patterns from the reference files below rather than writing from scratch.
  5. Constrain animated properties to transform and opacity for GPU acceleration. Apply references/performance.md.
  6. Honor reduced-motion preferences for every animation. Apply references/accessibility.md.
  7. Verify on low-end devices and confirm no layout thrash before shipping.

Contents

  • references/principles-and-timing.md — Disney 12 principles mapped to UI, duration and easing tables.
  • references/transitions.md — Transition syntax, easing functions, cubic-bezier presets, Tailwind transitions.
  • references/keyframe-library.md — Keyframe syntax plus fade, scale, bounce, rotate, slide, and attention-seeker keyframes.
  • references/loading-animations.md — Spinners, dots, skeleton loaders, shimmer, progress bars.
  • references/micro-interactions.md — Button, hover, icon, form, and success/error interactions.
  • references/page-transitions.md — View Transitions API, Framer Motion page and shared-layout transitions, staggered lists.
  • references/scroll-animations.md — Intersection Observer, Framer Motion scroll hooks, native CSS scroll-driven animations.
  • references/accessibility.md — prefers-reduced-motion CSS, Tailwind motion-safe/reduce, React hook.
  • references/tailwind-config.md — Drop-in tailwind.config.js animation and keyframe definitions.
  • references/performance.md — GPU-accelerated properties, will-change, contain, performance checklist.

Comments

Markdown supported