Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

scroll-experience — Claude Code skill: what it does, how to install

This skill guides an agent through scroll animations, parallax scenes, and interactive web narratives. Use it when scrolling should reveal part of a page’s story.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add sickn33/agentic-awesome-skills --skill scroll-experience -a claude-code
Open on GitHub

What scroll-experience does

scroll-experience guides an agent in building scroll animations, parallax effects, interactive narratives, and cinematic web scenes. It treats scrolling as a storytelling device rather than page navigation alone.

The skill covers GSAP ScrollTrigger, Framer Motion, and the performance impact of visual effects. Read references/detailed-guide.md before execution, as it contains the procedure, safety prerequisites, and validation requirements.

The skill is marked with a critical risk level, so the agent should ask for clarification when permissions, safety boundaries, required inputs, or success criteria are missing. Review the task before changes begin.

What it helps with

  • build animations triggered by page scrolling
  • create a parallax storytelling scene
  • connect an interactive narrative to scrolling
  • use GSAP ScrollTrigger for scroll effects
  • assess the performance impact of visual effects

Example prompts for the agent

  • “Use scroll-experience to add scroll animations to this page.”
  • “Use scroll-experience to build a parallax narrative for this interface.”
  • “Apply scroll-experience to create an interactive story driven by scrolling.”

How to install scroll-experience

1Skills CLI (Vercel)

npx skills add sickn33/agentic-awesome-skills --skill scroll-experience -a claude-code

2Manually: put the files in place

~/.claude/skills/scroll-experience/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/scroll-experience/

From the same set80

The whole set →
docker-expert sickn33 A skill that turns your AI agent into a Docker reviewer for Dockerfiles, multi-stage builds and container security. Useful when images and Compose files need a second look. Claude Code CX Codex Cursor +1 27,200installs typescript-expert sickn33 A skill for TypeScript and JavaScript work: it reads your project setup, fixes type errors and speeds up type checking. Useful once a TS codebase gets big. Claude Code CX Codex Cursor +1 12,600installs browser-automation sickn33 This skill builds browser checks around observed UI state and explicit outcomes. Use it for UI workflows, timing failures, or authorised page-data collection. Claude Code CX Codex Cursor +1 6,700installs nextjs-supabase-auth sickn33 This skill wires Supabase Auth into the Next.js App Router with clients, middleware, OAuth callbacks, and Server Actions. Use it when you need protected routes and session handling. Claude Code CX Codex Cursor +1 6,500installs 3d-web-experience sickn33 Helps build and debug web 3D scenes, product configurators, and portfolios. Covers stack choice, model loading, scroll interaction, and performance checks. Claude Code CX Codex Cursor +1 5,200installs prisma-expert sickn33 This skill helps inspect Prisma schemas, migrations, and queries. Use it to investigate an error or review database changes before deployment. Claude Code CX Codex Cursor +1 4,200installs playwright-skill sickn33 Write and run Playwright browser tests directly in Claude Code: responsive design checks, login flows, form submissions, screenshots. Executes locally via Node with a visible browser window. Claude Code CX Codex Cursor +1 3,900installs game-development sickn33 Guides game architecture decisions, platform choices, and core loop structure. Directs the assistant to specialized sub-skills for web, mobile, PC, or VR. Claude Code CX Codex Cursor +1 3,800installs

Similar

fullstack-guardian https://github.com/Jeffallan Builds security-focused full-stack web features across frontend and backend layers. Useful for shipping authenticated APIs, CRUD forms, and database flows. Claude Code CX Codex Cursor +1 5,600installs react-expert https://github.com/Jeffallan A skill for React 18+, Next.js App Router, and create-react-app work. It writes components and hooks, debugs rendering, and migrates class components to functions. Claude Code CX Codex Cursor +1 5,500installs appllama-app-design-skill Appllama (appllama.io) Skill for building native iOS and Android screens with Expo and React Native. Designs with Apple HIG fidelity, semantic colors, Reanimated motion, proper navigation semantics, and simulator-verified iteration. Claude Code CX Codex Cursor +1 4,700installs state-machine jakubkrehel Builds a throwaway page for every reachable state of one component, using mock data and a switcher. Use it when visual work needs isolated states without changing the component. Claude Code CX Codex Cursor +1 3,500installs shopify-expert https://github.com/Jeffallan Skill for building Shopify themes, apps, and headless storefronts via Storefront API. Useful when you need to assemble a Liquid theme, custom checkout, or Hydrogen storefront. Claude Code CX Codex Cursor +1 5,000installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs

Questions about scroll-experience

How do I install scroll-experience in Claude Code?

Run npx skills add sickn33/agentic-awesome-skills --skill scroll-experience -a claude-code, then run npx skills add sickn33/agentic-awesome-skills --skill scroll-experience -a claude-code again. The skill file is ~/.claude/skills/scroll-experience/SKILL.md.

What does scroll-experience do?

It guides an agent in creating scroll animations, parallax effects, interactive narratives, and cinematic web scenes. It also covers GSAP ScrollTrigger, Framer Motion, and visual performance.

What is required before running scroll-experience?

Read references/detailed-guide.md before execution. The agent should request clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Source text

SKILL.md · MIT 
---
name: scroll-experience
description: Expert in building immersive scroll-driven experiences - parallax
  storytelling, scroll animations, interactive narratives, and cinematic web
  experiences. Like NY Times interactives, Apple product pages, and
  award-winning web experiences.
risk: critical
source: vibeship-spawner-skills (Apache 2.0)
date_added: 2026-02-27
---

# Scroll Experience

Expert in building immersive scroll-driven experiences - parallax storytelling,
scroll animations, interactive narratives, and cinematic web experiences. Like
NY Times interactives, Apple product pages, and award-winning web experiences.
Makes websites feel like experiences, not just pages.

**Role**: Scroll Experience Architect

You see scrolling as a narrative device, not just navigation. You create
moments of delight as users scroll. You know when to use subtle animations
and when to go cinematic. You balance performance with visual impact. You
make websites feel like movies you control with your thumb.

### Expertise

- Scroll animations
- Parallax effects
- GSAP ScrollTrigger
- Framer Motion
- Performance optimization
- Storytelling through scroll

## Detailed Guide

Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

## When to Use
- User mentions or implies: scroll animation
- User mentions or implies: parallax
- User mentions or implies: scroll storytelling
- User mentions or implies: interactive story
- User mentions or implies: cinematic website
- User mentions or implies: scroll experience
- User mentions or implies: immersive web

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

© sickn33 · MIT · sickn33/agentic-awesome-skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor