awwwards-landing-page — скилл для Claude Code: обзор и сетап
Скилл обучает агента разворачивать шаблон дизайнерского портфолио на Next.js с анимациями. Пригодится для быстрой вёрстки статичного сайта с плавной прокруткой.
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a claude-codeЧто делает awwwards-landing-page
Скилл даёт ассистенту пошаговый алгоритм для создания портфолио дизайнера. В основе лежит стек из фреймворка Next.js и библиотек анимации: Locomotive Scroll, GSAP и Framer Motion. Шаблон скачивается из репозитория Eng0AI/awwwards-landing-page-template и не требует переменных окружения.
Инструкции содержат правила распаковки репозитория даже в непустую папку, установку пакетов через npm или pnpm и локальный запуск на порту 3000. В виртуальной машине команду npm run dev запускать нельзя. При развёртывании на Vercel нельзя вызывать команду vercel --prod напрямую: скилл требует предварительной сборки vercel build --prod с последующей выгрузкой артефактов через vercel deploy --prebuilt --prod. Также описан деплой на Netlify.
Какие задачи решает
- развернуть каркас портфолио на Next.js с готовыми анимациями
- клонировать шаблон сайта в непустую рабочую директорию
- собрать статичный проект и настроить деплой на Vercel через пребилд
- опубликовать готовый лендинг на платформе Netlify
Примеры запросов агенту
- Разверни шаблон awwwards-landing-page в текущей папке и установи зависимости через pnpm
- Подготовь проект к деплою на Vercel и выполни prebuilt-сборку с токеном
- Очисти историю Git в репозитории портфолио и сделай начальный коммит
Как установить awwwards-landing-page
1Через Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a claude-code2Вручную: положить файлы
~/.claude/skills/awwwards-landing-page/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/awwwards-landing-page/
1Через Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a codex2Вручную: положить файлы
.agents/skills/awwwards-landing-page/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a cursor2Вручную: положить файлы
.cursor/skills/awwwards-landing-page/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install rebyteai-template/rebyte-skills awwwards-landing-page2Вручную: положить файлы
.github/skills/awwwards-landing-page/SKILL.md1Через Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a gemini-cli2Командой платформы
gemini skills install https://github.com/rebyteai-template/rebyte-skills --path awwwards-landing-pageВручную: положить файлы
.devin/skills/awwwards-landing-page/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о awwwards-landing-page
Как установить awwwards-landing-page в Claude Code?
Выполните команду npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a claude-code. Агент также может подключить файл навыка из ~/.claude/skills/awwwards-landing-page/SKILL.md.
Что делает этот скилл?
Он передаёт ИИ-ассистенту инструкции по скачиванию шаблона портфолио на Next.js, настройке анимаций GSAP и Locomotive Scroll, а также правила безопасной сборки и публикации.
Почему для Vercel требуется специальная схема сборки?
Навык запрещает прямой запуск vercel --prod. Вместо этого обязательно выполняется предварительная компиляция vercel build --prod, после чего деплоятся уже готовые файлы через vercel deploy --prebuilt --prod.
