Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/onewave-ai/claude-skills --skill css-animation-creatorAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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.
