awwwards-animations — скилл для Claude Code: анимации уровня Awwwards
Скилл для React-анимаций уровня Awwwards и FWA: скролл, кастомные курсоры, переходы страниц, генеративная графика. Пригодится, когда нужен плавный 60fps-скролл и сложные эффекты.
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a claude-codeЧто делает awwwards-animations
Скилл подсказывает агенту, какую библиотеку взять под конкретную задачу. Внутри — таблица выбора: GSAP с ScrollTrigger и useGSAP для скролл-анимаций, Lenis для плавного скролла, Motion (Framer Motion) для нативных React-анимаций, Anime.js 4.0 для лёгких эффектов. Отдельные разделы про Three.js и WebGL, физику на Matter.js, звук через Tone.js, генеративное искусство и геометрические головоломки.
Подход React-first: хуки, очистка эффектов, интеграция Lenis с ScrollTrigger через gsap.ticker. В репозитории лежат справочники по каждой теме — от текстовых эффектов и глитча до фракталов, L-систем и тесселяции. Есть готовые паттерны: магнитный курсор на GSAP, магнитная кнопка на Motion.
Ставить стоит, если проект уже на React. Скилл опирается на useGSAP, ReactLenis и хуки Motion, поэтому в проекте без React или на другой библиотеке компонентов паттерны придётся переписывать. Для установки нужен Node.js — команды идут через npx skills.
Какие задачи решает
- выбрать библиотеку анимации под конкретную задачу
- сделать плавный скролл, совместимый со ScrollTrigger
- добавить кастомный курсор и магнитные кнопки
- собрать переходы между страницами на React
- сгенерировать фракталы, L-системы и flow fields на canvas
Примеры запросов агенту
- Сделай плавный скролл на Lenis и подключи его к ScrollTrigger
- Добавь магнитный курсор и магнитную кнопку на Motion
- Собери горизонтальный скролл с pin-секциями и stagger-эффектом
Как установить awwwards-animations
1Через Skills CLI (Vercel)
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a claude-code2Вручную: положить файлы
~/.claude/skills/awwwards-animations/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/awwwards-animations/
1Через Skills CLI (Vercel)
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a codex2Вручную: положить файлы
.agents/skills/awwwards-animations/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a cursor2Вручную: положить файлы
.cursor/skills/awwwards-animations/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install DevMartinese/awwwards-animations-skill awwwards-animations2Вручную: положить файлы
.github/skills/awwwards-animations/SKILL.md1Через Skills CLI (Vercel)
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a gemini-cli2Командой платформы
gemini skills install https://github.com/DevMartinese/awwwards-animations-skillВручную: положить файлы
.devin/skills/awwwards-animations/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о awwwards-animations
Как установить awwwards-animations в Claude?
Выполните npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a claude-code. Скилл окажется в ~/.claude/skills/awwwards-animations/SKILL.md.
Что делает awwwards-animations?
Помогает агенту писать React-анимации уровня Awwwards: скролл-эффекты, переходы страниц, текстовые эффекты, генеративную графику. Внутри — таблица выбора библиотеки и готовые паттерны на GSAP, Motion, Anime.js и Lenis.
Какие библиотеки нужны для работы скилла?
GSAP с @gsap/react, Lenis, Motion и Anime.js 4.0 — их скилл и предлагает ставить. Подход React-first, поэтому проект должен быть на React.
