К основному содержанию
скилл CX Codex

marquee-loop — скилл для Claude Code: циклы бегущей строки

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

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

Что делает 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-code

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

~/.claude/skills/marquee-loop/SKILL.md

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

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Дизайн» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. 979 543установок codebase-design Matt Pocock Скилл помогает проектировать модули с небольшим интерфейсом и скрытой внутри сложностью. Подходит для рефакторинга, тестируемости и поиска чистого seam. 850 344установок

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

glass-dark-ui Настраивает тёмный глассморфизм с матовыми панелями и градиентными рамками через CSS-маски. Пригодится для карточек, дашбордов и модальных окон в React или Tailwind. CX Codex +1 1 500установок build-threejs-scroll-worlds Скилл помогает собирать интерактивные Three.js-миры, где нативный скролл ведёт через несколько сцен. Нужен для 3D-сторителлинга и пространственных веб-историй. CX Codex +1 1 500установок container-lines Скилл добавляет тонкие вертикальные линии по краям контентного контейнера и мини-квадраты в углах секций. Пригодится, когда макет выглядит рыхлым и нужен каркас. CX Codex +1 1 500установок company-logos Скилл настраивает добавление логотипов брендов через Iconify Simple Icons в сетке 64x64 вместо текстовых названий и случайных картинок. CX Codex +1 1 500установок matterjs Помогает агенту собрать сцену на Matter.js: движок, рендер, тела, ограничения и перетаскивание мышью. Пригодится, когда нужна физика на canvas. CX Codex +1 1 500установок css-border-gradient Добавляет в веб-интерфейс аккуратные градиентные рамки через CSS или Tailwind. Пригодится карточкам цен, модальным окнам и кнопкам, которым нужна сдержанная подсветка контура. CX Codex +1 1 500установок scroll-scrubbed-visual-sequence Собирает обратимые визуальные сцены, управляемые прокруткой: от сборки продукта до смены состояний интерфейса. Пригодится для интерактивных hero-блоков и диаграмм. CX Codex +1 1 500установок unsplash-asset-images Скилл подбирает фотографии Unsplash под аватары, хедшоты, фоны и обои и сразу называет нужные пропорции и разрешения. CX Codex +1 1 600установок

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

Компании, которые помогают держать аналитику открытой