implement_lenis_scroll — Claude Code skill
A skill that walks the agent through wiring Lenis into a React or Next.js app: package install, a wrapper component, layout integration. Useful when you want smooth scrolling without writing the hook yourself.
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a claude-codeWhat implement_lenis_scroll does
The agent works in three passes. First it installs lenis. Then it writes SmoothScroll.tsx marked 'use client', where a useEffect builds the Lenis instance with a duration, easing and wheel settings, and requestAnimationFrame keeps calling lenis.raf. Cleanup runs destroy() on unmount.
Finally the wrapper goes into layout.tsx around children. It is a client component, so in the App Router it needs the 'use client' line; skip that and the page scrolls exactly as before. For GSAP ScrollTrigger the skill suggests listening to Lenis scroll events and driving the ticker with gsap.ticker.
You need a React or Next.js project to start. The skill also lists @studio-freight/lenis as the older package name if your setup still uses it.
What it helps with
- add Lenis scrolling to a Next.js App Router layout
- extract smooth scrolling into a reusable client component
- destroy the Lenis instance when the component unmounts
- keep GSAP ScrollTrigger in sync with Lenis
- pick between the
lenisand@studio-freight/lenispackages
Example prompts for the agent
- Add Lenis smooth scrolling to this Next.js app.
- Create
SmoothScrolland wrapchildrenwith it inlayout.tsx. - Hook Lenis up to ScrollTrigger so the animations keep pace.
How to install implement_lenis_scroll
1Skills CLI (Vercel)
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a claude-code2Manually: put the files in place
~/.claude/skills/implement_lenis_scroll/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/implement_lenis_scroll/
1Skills CLI (Vercel)
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a codex2Manually: put the files in place
.agents/skills/implement_lenis_scroll/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a cursor2Manually: put the files in place
.cursor/skills/implement_lenis_scroll/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install jerrar670/surf-website implement_lenis_scroll2Manually: put the files in place
.github/skills/implement_lenis_scroll/SKILL.md1Skills CLI (Vercel)
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a gemini-cli2Platform CLI
gemini skills install https://github.com/jerrar670/surf-website --path .agent/skills/implement_lenis_scrollManually: put the files in place
.devin/skills/implement_lenis_scroll/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about implement_lenis_scroll
How do I install implement_lenis_scroll in Claude Code?
Run npx skills add jerrar670/surf-website --skill implement_lenis_scroll -a claude-code; the skill file lands at ~/.claude/skills/implement_lenis_scroll/SKILL.md.
What does implement_lenis_scroll do?
It tells the agent how to set up Lenis in React or Next.js: install the package, write a component that drives lenis.raf from requestAnimationFrame, then wrap the layout with it.
Does it require GSAP?
No. ScrollTrigger gets a short note for projects that already use it: refresh the trigger on Lenis scroll and feed Lenis through gsap.ticker.
