css-animation-creator — скилл для Claude Code: CSS-анимации и переходы
Скилл для ИИ-кодинга, который помогает писать CSS-анимации, переходы, микроинтеракции и анимации по скроллу. Пригодится, когда нужно добавить движение в интерфейс без ручного подбора таймингов.
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a claude-codeЧто делает css-animation-creator
Скилл ведёт агента по шагам: сначала определить назначение движения, потом выбрать технику. Для смены состояний это CSS-переходы, для циклов и многошаговых сцен — keyframes, для оркестрации и эффектов, привязанных к скроллу, — Framer Motion или JavaScript. Дальше агент берёт тайминги и кривые из справочных таблиц, а не придумывает их сам.
Внутри десять файлов-справочников в references/: принципы и тайминги, переходы и cubic-bezier, библиотека keyframes, загрузочные состояния, микроинтеракции, переходы между страницами, анимации по скроллу, доступность, конфиг Tailwind и производительность. Анимируемые свойства скилл советует ограничить transform и opacity ради GPU-ускорения, а для каждой анимации — учитывать prefers-reduced-motion. Готовые keyframes и паттерны предлагается брать из справочников, а не писать с нуля.
Перед выкаткой скилл просит проверить анимацию на слабых устройствах и убедиться, что нет layout thrash. Это заметно меняет результат: без такой проверки плавная на десктопе анимация легко превращается в дёргающуюся на бюджетном телефоне. Ставится одной командой, отдельных ключей API или зависимостей не требует.
Какие задачи решает
- написать keyframes для пульсирующей кнопки
- подобрать кривую и длительность для hover-эффекта
- сделать скелетон-загрузку со shimmer
- добавить анимацию появления секций при скролле
- учесть prefers-reduced-motion в готовой анимации
Примеры запросов агенту
- Добавь плавное появление карточек при скролле, используя css-animation-creator
- Сделай hover-эффект на кнопке и подбери тайминг по справочнику скилла
- Перепиши эту анимацию так, чтобы она не вызывала layout thrash и уважала prefers-reduced-motion
Как установить css-animation-creator
1Через Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a claude-code2Вручную: положить файлы
~/.claude/skills/css-animation-creator/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/css-animation-creator/
1Через Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a codex2Вручную: положить файлы
.agents/skills/css-animation-creator/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a cursor2Вручную: положить файлы
.cursor/skills/css-animation-creator/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install OneWave-AI/claude-skills css-animation-creator2Вручную: положить файлы
.github/skills/css-animation-creator/SKILL.md1Через Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a gemini-cli2Командой платформы
gemini skills install https://github.com/OneWave-AI/claude-skills --path css-animation-creatorВручную: положить файлы
.devin/skills/css-animation-creator/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о css-animation-creator
Как установить css-animation-creator в Claude?
Выполните npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a claude-code. После этого файл скилла появится по пути ~/.claude/skills/css-animation-creator/SKILL.md.
Что делает css-animation-creator?
Помогает агенту создавать CSS-анимации, переходы, микроинтеракции и анимации по скроллу. Агент выбирает технику, берёт тайминги из справочников и проверяет результат на доступность и производительность.
Какие технологии поддерживает скилл?
CSS, Tailwind и Framer Motion. Для оркестрации и эффектов, привязанных к скроллу, скилл обращается к Framer Motion или JavaScript.
Исходный текст
SKILL.md · MIT
--- name: css-animation-creator description: 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 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.
© OneWave-AI · MIT · OneWave-AI/claude-skills
