implement_lenis_scroll — скилл для Claude Code
Скилл подключает Lenis к React или Next.js: агент ставит пакет, пишет компонент-обёртку и вставляет его в layout. Нужен, когда хочется плавного скролла без ручной сборки.
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a claude-codeЧто делает implement_lenis_scroll
Агент проходит три шага. Сначала ставит lenis, потом создаёт компонент SmoothScroll.tsx с 'use client': внутри useEffect заводится экземпляр Lenis с длительностью прокрутки, easing и настройками колеса, а requestAnimationFrame крутит lenis.raf. При размонтировании Lenis уничтожается через destroy().
На третьем шаге обёртка ложится в layout.tsx вокруг children. Это отдельный клиентский компонент, поэтому в App Router без директивы 'use client' он не заработает — и скролл просто останется каким был. Для GSAP ScrollTrigger в скилле есть подсказка: обновлять его на событии scroll и вести тикер через gsap.ticker.
Перед запуском нужен React или Next.js проект — других условий не требуется. Версию пакета @studio-freight/lenis скилл предлагает как альтернативу текущему lenis.
Какие задачи решает
- подключить Lenis к Next.js App Router без ручного переписывания хуков
- создать клиентскую обёртку для плавного скролла в layout
- отменить Lenis при размонтировании компонента
- связать Lenis со ScrollTrigger из GSAP
- выбрать между
lenisи@studio-freight/lenis
Примеры запросов агенту
- Добавь плавный скролл через Lenis в мой Next.js проект.
- Создай компонент
SmoothScrollи оберни имchildrenвlayout.tsx. - Подруби Lenis к ScrollTrigger, чтобы анимации не отставали.
Как установить implement_lenis_scroll
1Через Skills CLI (Vercel)
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a claude-code2Вручную: положить файлы
~/.claude/skills/implement_lenis_scroll/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/implement_lenis_scroll/
1Через Skills CLI (Vercel)
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a codex2Вручную: положить файлы
.agents/skills/implement_lenis_scroll/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a cursor2Вручную: положить файлы
.cursor/skills/implement_lenis_scroll/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install jerrar670/surf-website implement_lenis_scroll2Вручную: положить файлы
.github/skills/implement_lenis_scroll/SKILL.md1Через Skills CLI (Vercel)
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a gemini-cli2Командой платформы
gemini skills install https://github.com/jerrar670/surf-website --path .agent/skills/implement_lenis_scrollВручную: положить файлы
.devin/skills/implement_lenis_scroll/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о implement_lenis_scroll
Как установить implement_lenis_scroll в Claude Code?
Выполните npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a claude-code, файл скилла окажется по пути ~/.claude/skills/implement_lenis_scroll/SKILL.md.
Что делает implement_lenis_scroll?
Проводит агента по подключению Lenis в React или Next.js: установка пакета, компонент с requestAnimationFrame и вставка обёртки в layout.
Нужен ли GSAP, чтобы пользоваться скиллом?
Нет. ScrollTrigger упомянут отдельным советом для тех, у кого он уже стоит: обновлять триггер на событии scroll и гнать Lenis через gsap.ticker.
