Individual skill
css-animation-creator
Create professional CSS animations, transitions, micro-interactions, and complex motion design. Use when adding animations, hover effects, loading states, page transitions, scroll animations, or any motion design work.
css-animation-creator/SKILL.md
Source commit b2267d9171af4f56848d82992381b20b89b44056
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Instructions only
- Last checked
- Nov 10, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 425
- Repository last updated
- Oct 20, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- agent-skills Repository topic
- ai-agents Repository topic
- anthropic Repository topic
- claude Repository topic
- claude-code Repository topic
- claude-skills Repository topic
- developer-tools Repository topic
- llm Repository topic
- prompt-engineering Repository topic
- sales-automation Repository topic
- design Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 2,356 bytesreferences/accessibility.mddoc · 1,396 bytesreferences/keyframe-library.mddoc · 6,709 bytesreferences/loading-animations.mddoc · 3,908 bytesreferences/micro-interactions.mddoc · 4,762 bytesreferences/page-transitions.mddoc · 2,791 bytesreferences/performance.mddoc · 984 bytesreferences/principles-and-timing.mddoc · 989 bytesreferences/scroll-animations.mddoc · 2,218 bytesreferences/tailwind-config.mddoc · 3,206 bytesreferences/transitions.mddoc · 1,925 bytes
Read excerpt
# 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.
