marquee-loop — скилл для Claude Code: циклы бегущей строки
Скилл помогает собрать бесконечную бегущую строку из логотипов, отзывов или скриншотов. Пригодится для секций, где элементы должны прокручиваться по кругу без заметного стыка.
npx skills add MengTo/Skills --skill marquee-loop -a claude-codeЧто делает marquee-loop
Скилл предлагает продублировать последовательность элементов и двигать её линейной трансформацией от 0 до -50%. Ширина элементов должна оставаться стабильной, иначе при повторе появятся скачки. Края бегущей строки можно скрыть маской или плавным затуханием.
Для взаимодействия с лентой можно приостанавливать или замедлять её при наведении. При настройке движения нужно учитывать prefers-reduced-motion: вместо прокрутки подойдёт статичное расположение элементов или очень медленное движение. Контент, который нужно внимательно читать, не следует прокручивать; тяжёлые тени и фильтры на движущихся элементах тоже создают лишнюю нагрузку на CPU.
Какие задачи решает
- зациклить прокрутку логотипов без видимого стыка
- показать отзывы в движущейся ленте
- собрать карусель из скриншотов или тегов
- снизить риск скачков при повторе анимации
Примеры запросов агенту
- Сделай бесконечную ленту логотипов с плавным переходом между концом и началом.
- Добавь прокрутку отзывов и учти настройку
prefers-reduced-motion. - Покажи скриншоты в бегущей строке, которая замедляется при наведении.
Как установить marquee-loop
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill marquee-loop -a claude-code2Вручную: положить файлы
~/.claude/skills/marquee-loop/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/marquee-loop/
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill marquee-loop -a codex2Вручную: положить файлы
.agents/skills/marquee-loop/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill marquee-loop -a cursor2Вручную: положить файлы
.cursor/skills/marquee-loop/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install MengTo/Skills marquee-loop2Вручную: положить файлы
.github/skills/marquee-loop/SKILL.md1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill marquee-loop -a gemini-cli2Командой платформы
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/marquee-loopВручную: положить файлы
.devin/skills/marquee-loop/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill marquee-loop -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о marquee-loop
Как установить marquee-loop в Claude Code?
Выполните npx skills add MengTo/Skills --skill marquee-loop -a claude-code. Файл скилла находится по пути ~/.claude/skills/marquee-loop/SKILL.md.
Что делает marquee-loop?
Скилл описывает, как зациклить бегущую строку из повторяющихся элементов и избежать скачка при переходе к началу.
Как marquee-loop учитывает настройку уменьшения движения?
Для prefers-reduced-motion он предлагает статичное расположение элементов или очень медленную прокрутку.
Исходный текст
SKILL.md · MIT
--- name: marquee-loop description: "Apply seamless infinite marquee loops using duplicated items." --- # Marquee Skill ## Use When - A design needs a seamless infinite loop for logos, testimonials, screenshots, tags, or short feature chips. ## Workflow 1. Duplicate the item sequence so the end and beginning match perfectly. 2. Animate the track with a linear transform from 0 to -50%. 3. Keep item widths stable to prevent jumps during the loop. 4. Mask or fade the edges when the marquee enters or exits a section. 5. Pause or slow the marquee on hover only when interaction is useful. 6. Respect prefers-reduced-motion with a static wrap or very slow movement. ## Guardrails - Do not animate unique content that users must read carefully. - Do not use large CPU-heavy shadows or filters on every moving item.
© MengTo · MIT · MengTo/Skills