К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

scroll-experience — скилл Claude Code: установка и возможности

Скилл помогает проектировать скролл-анимации, параллакс и интерактивное повествование для веб-страниц. Пригодится для сцен, которые раскрываются при прокрутке.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add sickn33/agentic-awesome-skills --skill scroll-experience -a claude-code
Открыть на GitHub

Что делает scroll-experience

scroll-experience направляет агента на создание скролл-анимаций, параллакс-эффектов, интерактивных историй и кинематографичных веб-сцен. Он рассматривает прокрутку как часть повествования, а не только навигацию по странице.

В работе скилл опирается на GSAP ScrollTrigger и Framer Motion, а также учитывает производительность визуальных эффектов. Перед выполнением нужно прочитать references/detailed-guide.md: в нём собраны порядок работы, требования безопасности и проверки.

У скилла отмечен критический уровень риска, поэтому без нужных разрешений, границ безопасности или критериев результата агент должен запросить уточнение. Это повод проверить задачу до внесения изменений.

Какие задачи решает

  • добавить анимации при прокрутке страницы
  • собрать параллакс-сцену для повествования
  • связать интерактивную историю со скроллом
  • применить GSAP ScrollTrigger для эффектов прокрутки
  • проверить влияние визуальных эффектов на производительность

Примеры запросов агенту

  • «Используй scroll-experience и добавь скролл-анимации для этой страницы.»
  • «С помощью scroll-experience сделай параллакс-повествование в этом интерфейсе.»
  • «Примени scroll-experience для интерактивной истории при прокрутке.»

Как установить scroll-experience

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/scroll-experience/

Из того же набора80

Весь набор →
docker-expert sickn33 Скилл для ИИ-агента, который разбирает Dockerfile, multi-stage сборки и безопасность контейнеров. Пригодится, когда нужно навести порядок в образах и Compose. Claude Code CX Codex Cursor +1 27 200установок typescript-expert sickn33 Скилл для работы с TypeScript и JavaScript: разбирает типы, ускоряет проверку и помогает с миграциями. Пригодится, когда проект на TS растёт и компилятор начинает тормозить. Claude Code CX Codex Cursor +1 12 600установок browser-automation sickn33 Скилл помогает проверять браузерные сценарии по состоянию интерфейса и результату операции. Подходит для UI-тестов, диагностики таймингов и разрешённого сбора данных. Claude Code CX Codex Cursor +1 6 700установок nextjs-supabase-auth sickn33 Скилл настраивает Supabase Auth в Next.js App Router: клиенты, middleware, OAuth callback и Server Actions. Пригодится для защиты маршрутов и работы с сессиями. Claude Code CX Codex Cursor +1 6 500установок 3d-web-experience sickn33 Помогает создавать и отлаживать 3D-сцены, конфигураторы товаров и портфолио для веба. Разбирает выбор стека, загрузку моделей и производительность. Claude Code CX Codex Cursor +1 5 200установок prisma-expert sickn33 Скилл помогает разбирать схемы Prisma, миграции и запросы. Пригодится, когда нужно найти причину ошибки или проверить изменения перед деплоем. Claude Code CX Codex Cursor +1 4 200установок playwright-skill sickn33 Скилл для написания и запуска тестов браузера через Playwright: проверка вёрстки на разных экранах, скриншоты, тесты логина и заполнения форм. Код выполняется локально через Node. Claude Code CX Codex Cursor +1 3 900установок game-development sickn33 Координирует структуру игры: задаёт базовые принципы архитектуры и перенаправляет агента к подскиллам для веба, ПК, мобильных платформ или VR. Claude Code CX Codex Cursor +1 3 800установок

Похожие

fullstack-guardian https://github.com/Jeffallan Скилл помогает создавать веб-приложения со сквозной защитой от базы данных до интерфейса. Пригодится при сборке REST API с формами CRUD и сквозными потоками данных. Claude Code CX Codex Cursor +1 5 600установок react-expert https://github.com/Jeffallan Скилл для разработки на React 18+, Next.js App Router и create-react-app. Генерирует компоненты, хуки, чинит рендер и переводит классовые компоненты на функциональные. Claude Code CX Codex Cursor +1 5 500установок appllama-app-design-skill Appllama (appllama.io) Скилл для создания нативных мобильных интерфейсов под iOS и Android на Expo и React Native. Помогает проектировать экраны, потоки, анимацию и навигацию по стандартам Apple HIG и Material Design, с верификацией в симуляторе. Claude Code CX Codex Cursor +1 4 700установок state-machine jakubkrehel Создаёт временную страницу со всеми достижимыми состояниями одного компонента, мок-данными и переключателем. Нужен для правки визуальных состояний без изменений в самом компоненте. Claude Code CX Codex Cursor +1 3 500установок shopify-expert https://github.com/Jeffallan Скилл для разработки тем Shopify, приложений и headless-витрин через Storefront API. Пригодится, когда нужно собрать тему на Liquid, кастомный чекаут или Hydrogen-сторфронт. Claude Code CX Codex Cursor +1 5 000установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок

Вопросы о scroll-experience

Как установить scroll-experience в Claude Code?

Выполните npx skills add sickn33/agentic-awesome-skills --skill scroll-experience -a claude-code, затем повторите npx skills add sickn33/agentic-awesome-skills --skill scroll-experience -a claude-code. Файл скилла: ~/.claude/skills/scroll-experience/SKILL.md.

Что делает scroll-experience?

Скилл помогает агенту создавать скролл-анимации, параллакс и интерактивные веб-сцены. Он также охватывает работу с GSAP ScrollTrigger, Framer Motion и производительностью.

Что нужно сделать перед запуском scroll-experience?

Перед выполнением требуется прочитать references/detailed-guide.md. Если не хватает разрешений, границ безопасности или критериев успеха, агент должен запросить уточнение.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором