Locomotive Scroll
Add smooth scroll, parallax, and scroll-triggered motion to marketing or product sites using Locomotive Scroll patterns in agent-assisted frontend work.
Overview
locomotive-scroll is an agent skill for the Build phase that helps implement Locomotive Scroll-style smooth scroll and parallax motion in frontend pages.
Install
npx skills add https://github.com/freshtechbro/claudedesignskills --skill locomotive-scrollWhat is this skill?
- Claude Design Skills entry for the Locomotive Scroll scroll-animation stack
- Aimed at premium marketing-site motion common in indie SaaS landings
- Listed on skills.sh under freshtechbro/claudedesignskills with GitHub source bundle
- Fits agent-guided implementation alongside other claudedesignskills UI helpers
- Performance and accessibility caveats apply when binding scroll listeners and transforms
Adoption & trust: 762 installs on skills.sh; 227 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a high-end scrolling experience on your landing page but Locomotive Scroll setup, markup, and lifecycle hooks are easy to misconfigure.
Who is it for?
Indie founders shipping marketing sites or portfolios that need scroll-driven storytelling beyond basic CSS.
Skip if: Data-heavy app dashboards where scroll gimmicks hurt usability, or teams that must prioritize strict reduced-motion-only UX without alternatives.
When should I use this skill?
User wants smooth scroll, parallax, or Locomotive Scroll-style motion on a marketing or portfolio frontend.
What do I get? / Deliverables
You get agent-guided integration steps so scroll sections, parallax, and updates behave correctly in your frontend stack.
- Locomotive Scroll integration steps for target pages
- Markup and init pattern for scroll sections
Recommended Skills
Journey fit
How it compares
Scroll-animation integration skill—not a full design-system or page copy generator.
Common Questions / FAQ
Who is locomotive-scroll for?
Solo developers and designers using Claude or Cursor who are building frontend pages and want Locomotive Scroll-style motion patterns.
When should I use locomotive-scroll?
During Build frontend work when adding smooth scroll, parallax, or scroll-triggered reveals to a site, especially for launch or portfolio pages.
Is locomotive-scroll safe to install?
Use the Security Audits panel on this catalog page and inspect the freshtechbro/claudedesignskills repository before installing into your agent.
SKILL.md
READMESKILL.md - Locomotive Scroll
# locomotive-scroll Installs: 739 Source: freshtechbro/claudedesignskills { "id": "freshtechbro/claudedesignskills/locomotive-scroll", "url": "https://www.skills.sh/freshtechbro/claudedesignskills/locomotive-scroll", "name": "locomotive-scroll", "slug": "locomotive-scroll", "source": "freshtechbro/claudedesignskills", "installs": 739, "installUrl": "https://github.com/freshtechbro/claudedesignskills", "sourceType": "github" }