«Claude без воды» собрали ролик в Claude Code пятью скиллами — от GSAP и Three.js до монтажа в Remotion
Видео: Claude без воды
Каждую сцену в Claude Code делал отдельный скилл, склейку и рендер взял на себя Remotion.
- В «Claude без воды» сделали ролик из четырёх сцен, каждую из которых в Claude Code собрал свой скилл. Сцены — это код, видеомодель не использовалась.
- Первая сцена — кинетическая типографика по таймлайну на GSAP. Для неё взяли gsap-skills — официальный набор от GreenSock из восьми скиллов: от базового API до ScrollTrigger и React. Лицензия — MIT.
- Вторая — тоннель из тысячи символов «/» со свечением на Three.js. Использовали threejs-skills организации CloudAI-X: десять скиллов, от геометрии и материалов до шейдеров и постобработки.
- Третья — генеративные пряди на p5.js, их сделал скилл algorithmic-art. Четвёртая — постер со списком скиллов, за него отвечал frontend-design. Оба входят в плагин example-skills из репозитория anthropics/skills.
- Монтаж сцен в mp4 выполнил Remotion — фреймворк для видео на React. У проекта есть собственный набор скиллов для агентов, он ставится командой npx skills add remotion-dev/skills.
- Скиллы GSAP в Claude Code подключаются командой /plugin marketplace add greensock/gsap-skills, скиллы Anthropic — командами /plugin marketplace add anthropics/skills и /plugin install example-skills@anthropic-agent-skills. В README threejs-skills команды установки ведут на другой репозиторий, поэтому его скопировали в .claude/skills вручную.
- Например, Three.js-скиллы Claude вызвал, только когда их назвали в задании: сам скилл не подхватился.
- В октябре 2026 года «Claude без воды» проверили, какие анимации Claude собирает кодом, — десять сцен интерфейса в одном ролике.
Промпты, инструменты и уроки по Claude — в Telegram-боте «Базы без воды».