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.
- Installs
- 807
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/onewave-ai/claude-skills --skill css-animation-creator- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads css-animation-creator automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
CSS Animation Creator
Build production-grade, accessible, GPU-efficient motion for web UIs using CSS, Tailwind, and Framer Motion.
Workflow
- Identify the purpose of the motion: feedback, delight, guidance, or storytelling.
- 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.
- Set timing and easing to match the interaction. Apply the timing and easing tables in
references/principles-and-timing.md. - Author the animation. Pull ready-made keyframes and patterns from the reference files below rather than writing from scratch.
- Constrain animated properties to
transformandopacityfor GPU acceleration. Applyreferences/performance.md. - Honor reduced-motion preferences for every animation. Apply
references/accessibility.md. - 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-motionCSS, Tailwind motion-safe/reduce, React hook.references/tailwind-config.md— Drop-intailwind.config.jsanimation and keyframe definitions.references/performance.md— GPU-accelerated properties,will-change,contain, performance checklist.
FAQ
What does the css-animation-creator skill do?
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.
How do I install css-animation-creator?
Run npx skills add https://github.com/onewave-ai/claude-skills --skill css-animation-creator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/css-animation-creator/ (personal) or .claude/skills/css-animation-creator/ (project).
Which AI agents can use css-animation-creator?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is css-animation-creator safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains css-animation-creator?
It is published by onewave-ai in onewave-ai/claude-skills. It has 807 recorded installs.
More from onewave-ai/claude-skills
landing-page-copywriter
onewave-ai/claude-skills
Writes conversion-focused landing page copy - headlines, subheads, value propositions, feature and benefit blocks, social proof, FAQs, and CTA button text - using PAS, AIDA, or StoryBrand. Use when the user wants words for a landing page, sales page, product or pricing page, waitlist page, homepage hero, or ad-to-page flow, including rewriting weak copy, generating headline or CTA variants for A/B tests, or turning a product description into page sections. Use landing-page-optimizer instead for auditing an existing page's performance, and a frontend skill for building the page itself.
code-review-pro
onewave-ai/claude-skills
Performs a deep code review of files, modules, a diff, or a branch - finding security vulnerabilities (mapped to OWASP Top 10:2025), correctness bugs, performance problems, and maintainability issues - and returns severity-ranked findings with evidence and concrete fixes. Use when the user asks to review, audit, or sanity-check code, asks "is this safe", "what's wrong with this", "find bugs", or wants a security or performance pass before shipping. For posting line comments on a GitHub pull request, use git-pr-reviewer.
screenshot-to-code
onewave-ai/claude-skills
Turns a screenshot, mockup, Figma export, or photo of a UI into working front-end code - React + Tailwind CSS v4 by default, or Next.js, Vue, or plain HTML/CSS - matching layout, spacing, colors, and typography, then renders the result and compares it against the image to close visual gaps. Use whenever the user shares an image of a website, app screen, dashboard, component, or wireframe and wants it built, cloned, recreated, or "made real", or says "code this up", "build this design", or "match this screenshot".
csv-excel-merger
onewave-ai/claude-skills
Merges, appends, joins, and deduplicates multiple CSV, TSV, and Excel files (including multi-sheet workbooks) with pandas - mapping mismatched column names to one schema, normalizing keys, resolving conflicting values, tracking which file each row came from, and verifying the row math. Use when the user wants to combine spreadsheets or exports, stack monthly files, consolidate contact or lead lists, VLOOKUP-style join two sheets on an ID or email, or dedupe records across sources, even if they only say "put these together" or "clean up these lists into one".
technical-writer
onewave-ai/claude-skills
Writes and restructures technical documentation - READMEs, tutorials, how-to guides, user guides, architecture docs, onboarding guides, runbooks and SOPs, troubleshooting guides, release notes, and knowledge base articles - grounded in the actual code or product, with commands and examples verified where possible. Use when the user asks to document a project, feature, system, or process, write or fix a README, explain a codebase to new developers, turn notes into a guide, or make existing docs clearer. For endpoint-by-endpoint API reference or OpenAPI specs, use api-documentation-writer; for CLAUDE.md or AGENTS.md files, use claude-md-writer.
sports-betting-analyzer
onewave-ai/claude-skills
Analyze spreads, over/unders, prop bets. Historical trends, situational stats, value bet identification. For entertainment/education only.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.