Agent skill
lenis
Set up Lenis smooth scroll. Use when: - User mentions "smooth scroll", "lenis", "scroll behavior" - User wants to add smooth scrolling to the app - Setting up scroll-based animations
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/lenis
SKILL.md
Lenis Smooth Scroll Setup
Set up Lenis for smooth scrolling in a Next.js/React app.
Installation
bun add lenis@latest
Basic Setup (Satus already includes this)
Create Lenis Provider
// components/lenis/index.tsx
'use client'
import { ReactLenis } from 'lenis/react'
interface LenisProps {
children: React.ReactNode
}
export function Lenis({ children }: LenisProps) {
return (
<ReactLenis
root
options={{
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
orientation: 'vertical',
smoothWheel: true,
}}
>
{children}
</ReactLenis>
)
}
Add to Layout
// app/layout.tsx
import { Lenis } from '@/components/lenis'
export default function RootLayout({ children }) {
return (
<html>
<body>
<Lenis>{children}</Lenis>
</body>
</html>
)
}
Using Lenis
Scroll to Element
import { useLenis } from 'lenis/react'
function Component() {
const lenis = useLenis()
const scrollToSection = () => {
lenis?.scrollTo('#section-id', { duration: 1.5 })
}
return <button onClick={scrollToSection}>Scroll</button>
}
Scroll Events
useLenis(({ scroll, velocity, direction }) => {
// React to scroll
console.log({ scroll, velocity, direction })
})
With GSAP ScrollTrigger
import { useLenis } from 'lenis/react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)
useLenis(() => {
ScrollTrigger.update()
})
Satus Note
If using Satus starter, Lenis is already configured. Check:
components/lenis/index.tsxapp/layout.tsx
Remember
- Always fetch latest docs before implementing
- Store any gotchas as learnings
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?