scroll-craft

Установка

npx skillfoxx add skills/scroll-craft

npx skills add nateherkai/scroll-craft --skill scroll-craft -a claude-code -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .claude/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .claude/skills/scroll-craft

npx skills add nateherkai/scroll-craft --skill scroll-craft -a cursor -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craft

npx skills add nateherkai/scroll-craft --skill scroll-craft -a github-copilot -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .github/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .github/skills/scroll-craft

npx skills add nateherkai/scroll-craft --skill scroll-craft -a codex -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craft

npx skills add nateherkai/scroll-craft --skill scroll-craft -a gemini-cli -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craft

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .devin/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .devin/skills/scroll-craft

npx skills add nateherkai/scroll-craft --skill scroll-craft -a cline -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .cline/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .cline/skills/scroll-craft

npx skills add nateherkai/scroll-craft --skill scroll-craft -a roo -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .roo/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .roo/skills/scroll-craft

npx skills add nateherkai/scroll-craft --skill scroll-craft -a opencode -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craft

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craft

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craft

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл ведет агента через сборку скролл-лендинга как процесс, а не как одну анимацию. Он задает бриф, грамматику страницы из восьми взаимоисключающих типов, карту пути посетителя, кривую эмоций с одним выверенным пиком, обязательную уникальную механику и ворота отпечатка, чтобы сборки не повторяли друг друга. Дизайн держится на явном минимуме: не больше двух шрифтовых семейств, шкала отступов, шесть цветовых ролей и один акцент, пять инструментов глубины. Ассеты берутся из ваших фото и видео или по желанию генерируются через kie.ai, разметка пишется семантическим HTML, а headless-браузер проходит готовую страницу и проверяет контраст, мертвый скролл и недекодированное видео на каждой позиции прокрутки. Поставляется как папка скилла для Codex и других агентов и как плагин Claude Code.

Для кого. Для дизайнеров и фронтенд-разработчиков, которым нужен нешаблонный скролл-лендинг с контролем качества, а не типовая анимация.

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

Собери скролл-лендинг для нашего бренда кофе, придумай уникальную механику скролла и проверь читаемость на мобильном

Ограничения

Для сборки и проверки нужны Node 18 и выше, полноценная сборка ffmpeg, playwright-core с Chrome. Генерация ассетов через kie.ai требует ключа KIE_AI_API_KEY и оплаты, но сборка из собственных фото и видео работает без ключа и без трат. Скилл рассчитан на агента, который умеет читать инструкции, редактировать файлы, запускать команды оболочки и осматривать браузер, а имена инструментов и способ обнаружения скилла у разных агентов отличаются.

Как отключить. Удалите плагин nateherk-design через /plugin или папку scroll-craft из каталога скиллов вашего агента.

Проверка безопасности

• Запускает node, ffmpeg и headless-браузер и пишет файлы сборки
• Опционально ходит в сеть для генерации ассетов по ключу kie.ai

Коротко о README

README описывает скилл для скролл-сайтов, который держит интерактив и дизайн как одну задачу. Внутри восемь взаимоисключающих грамматик страницы, требование уникальной механики, ворота отпечатка против повторов, типографический и цветовой минимум и пять инструментов глубины. Сборка идет из собственных материалов или через генерацию ассетов kie.ai, затем headless-браузер проверяет контраст, мертвый скролл и недекодированное видео на каждой позиции прокрутки. Ставится как папка скилла для Codex и других агентов или как плагин Claude Code, версия 0.3.0. Лицензия MIT.

SKILL.md

---
name: scroll-craft
description: >
  Build premium scroll-driven landing pages for service, product, food, and
  drink brands. Plan the visitor journey, page grammar, emotional peak, and
  bespoke signature move. Create dimensional heroes with independent visual
  planes, restrained motion, and separate mobile composition. Use supplied
  photos and footage or generate photoreal assets through kie.ai, write semantic
  HTML, and verify desktop, mobile, and reduced-motion scroll states visually.
allowed-tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion
---

# scroll-craft

Scroll is the only input every visitor already knows how to use. This skill
treats it as a timeline: the wheel is a scrubber, the page is a film with real
text on top, and each section behaves differently enough that the visitor keeps
going to find out what the next one does.

**What you produce:** an interview brief, a page grammar, a customer-journey map,
a feeling curve with one engineered peak, a scroll score, one signature move,
generated assets, one real HTML page on a token-driven design floor, and a strip
of screenshots proving it holds up at every scroll position.

Похожие