landing-page-guide-v2 — скилл для Claude Code: лендинги на Next.js
Скилл ведёт агента через выбор эстетики, дизайн-системы и 11 обязательных элементов лендинга. Код — Next.js 14+ и ShadCN UI.
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a claude-codeЧто делает landing-page-guide-v2
Скилл задаёт агенту порядок работы над лендингом: сначала разобраться с продуктом и аудиторией, потом выбрать одну эстетическую линию и держать её до конца. Дальше идёт дизайн-система — шрифты, палитра, анимации, сетка. Только после этого пишется код.
Внутри — фреймворк из 11 элементов, которые должны быть на каждой странице. У каждого элемента два требования: функциональное (ради конверсии) и дизайнерское (ради запоминаемости). Например, заголовок в hero-блоке предлагается делать крупным, 4–6rem, и анимировать появление слов с задержкой.
Скилл прямо запрещает типовые шрифты вроде Inter, Roboto и Arial для заголовков и советует не сходиться на одном наборе от проекта к проекту. Это заметно меняет результат: страницы перестают выглядеть как шаблон. Учтите, что скилл рассчитан на Next.js 14+ и ShadCN UI — на другом стеке советы по компонентам не пригодятся.
Какие задачи решает
- выбрать эстетику лендинга и не свалиться в шаблон
- собрать дизайн-систему до написания кода
- проверить страницу по списку из 11 элементов
- подобрать шрифты для заголовков вместо системных
- расписать анимации появления и скролла
Примеры запросов агенту
- Сделай лендинг для нашего SaaS на Next.js 14 и ShadCN UI по этому скиллу
- Прогони мою страницу по 11 элементам и скажи, чего не хватает
- Выбери эстетическое направление под бренд и собери дизайн-систему
Как установить landing-page-guide-v2
1Через Skills CLI (Vercel)
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a claude-code2Вручную: положить файлы
~/.claude/skills/landing-page-guide-v2/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/landing-page-guide-v2/
1Через Skills CLI (Vercel)
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a codex2Вручную: положить файлы
.agents/skills/landing-page-guide-v2/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a cursor2Вручную: положить файлы
.cursor/skills/landing-page-guide-v2/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install bear2u/my-skills landing-page-guide-v22Вручную: положить файлы
.github/skills/landing-page-guide-v2/SKILL.md1Через Skills CLI (Vercel)
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a gemini-cli2Командой платформы
gemini skills install https://github.com/bear2u/my-skills --path skills/landing-page-guide-v2Вручную: положить файлы
.devin/skills/landing-page-guide-v2/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о landing-page-guide-v2
Как установить landing-page-guide-v2 в Claude?
Выполните npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a claude-code. Скилл окажется в ~/.claude/skills/landing-page-guide-v2/SKILL.md.
Что делает landing-page-guide-v2?
Проводит агента по шагам: контекст продукта, выбор эстетики, дизайн-система, затем код лендинга на Next.js 14+ и ShadCN UI. Отдельно требует закрыть 11 обязательных элементов страницы.
На каком стеке он работает?
Скилл написан под Next.js 14+ с ShadCN UI и TypeScript. На другом фреймворке часть советов по компонентам и структуре не применима.
