gsap-awwwards-website — скилл для Claude Code: лендинг на GSAP
Скилл разворачивает шаблон продуктового лендинга на React 19 с GSAP-анимациями по скроллу и Tailwind CSS 4.
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a claude-codeЧто делает gsap-awwwards-website
Скилл даёт агенту готовый рецепт: клонировать шаблон, поставить зависимости, собрать и выложить статический сайт. Внутри — React 19, сборка на Vite, анимации на GSAP, стили на Tailwind CSS 4, менеджер пакетов npm. Порт разработки — 5173, результат сборки уходит в dist.
Установка шаблона идёт через git clone с флагом --depth 1. Если каталог не пустой, скилл предлагает клонировать во временную папку и перенести файлы оттуда. Дальше npm install и npm run build. История git при желании сносится.
Для Vercel в скилле прописано жёсткое правило: сначала vercel build --prod, потом vercel deploy --prebuilt --prod. Прямой vercel --prod не годится. Переменные окружения не нужны, потому что сайт статический. И ещё: npm run dev в виртуальной машине запускать не стоит.
Какие задачи решает
- развернуть шаблон лендинга в пустом каталоге
- собрать статику в папку
dist - выложить проект на Vercel без ошибок сборки
- перенести файлы шаблона в непустую папку
- поднять локальный сервер на порту 5173
Примеры запросов агенту
- разверни шаблон gsap-awwwards-website в текущей папке
- собери проект и подготовь деплой на Vercel
- перенеси шаблон в непустой каталог и поставь зависимости
Как установить gsap-awwwards-website
1Через Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a claude-code2Вручную: положить файлы
~/.claude/skills/gsap-awwwards-website/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/gsap-awwwards-website/
1Через Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a codex2Вручную: положить файлы
.agents/skills/gsap-awwwards-website/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a cursor2Вручную: положить файлы
.cursor/skills/gsap-awwwards-website/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install rebyteai-template/rebyte-skills gsap-awwwards-website2Вручную: положить файлы
.github/skills/gsap-awwwards-website/SKILL.md1Через Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a gemini-cli2Командой платформы
gemini skills install https://github.com/rebyteai-template/rebyte-skills --path gsap-awwwards-websiteВручную: положить файлы
.devin/skills/gsap-awwwards-website/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о gsap-awwwards-website
Как установить gsap-awwwards-website в Claude?
Выполните npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a claude-code. После этого файл скилла лежит в ~/.claude/skills/gsap-awwwards-website/SKILL.md.
Что делает gsap-awwwards-website?
Разворачивает шаблон продуктового лендинга на React 19 с анимациями GSAP по скроллу и Tailwind CSS 4, собирает его через Vite и подсказывает команды деплоя.
Почему нельзя деплоить на Vercel командой vercel --prod?
В скилле это помечено как критичное: нужна сборка vercel build --prod, а затем vercel deploy --prebuilt --prod. Прямой вызов даст другой результат.
