Skip to main content
affpapa.org
RU EN
skill CX Codex

marquee-loop — Claude Code skill for infinite marquees

This skill guides an agent through building a looping marquee from repeated items. Use it for scrolling logos, testimonials, screenshots, or tags.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add MengTo/Skills --skill marquee-loop -a claude-code
Open on GitHub

What marquee-loop does

The skill describes duplicating the item sequence, then moving the track with a linear transform from 0 to -50%. Keep item widths stable to avoid a jump when the sequence restarts. A mask or fading edges can soften where the marquee enters or leaves a section.

The motion can pause or slow on hover when interaction calls for it. For prefers-reduced-motion, use a static arrangement or very slow movement. Avoid scrolling content people need to read carefully. Large shadows and filters on every moving item can also burden the CPU, so this skill advises against applying them across the track.

What it helps with

  • loop a row of logos without a visible break
  • present testimonials in a scrolling track
  • build a marquee from screenshots or tags
  • prevent jumps when the animation repeats

Example prompts for the agent

  • Create a logo marquee that loops without a visible break.
  • Add a testimonials track and account for prefers-reduced-motion.
  • Show these screenshots in a marquee that slows on hover.

How to install marquee-loop

1Skills CLI (Vercel)

npx skills add MengTo/Skills --skill marquee-loop -a claude-code

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/marquee-loop/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about marquee-loop

How do I install marquee-loop in Claude Code?

Run npx skills add MengTo/Skills --skill marquee-loop -a claude-code. The skill file is at ~/.claude/skills/marquee-loop/SKILL.md.

What does marquee-loop do?

It guides an agent in creating a repeating marquee from duplicated items and avoiding a jump at the loop point.

How does marquee-loop handle reduced motion?

For prefers-reduced-motion, it recommends a static layout or very slow movement.

Source text

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

Similar skills

Everything for Design →
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. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs 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. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set148

glass-dark-ui Builds dark glassmorphism layouts with frosted surfaces and gradient masked borders. Useful for dark dashboards, hero sections, and cards in HTML, Tailwind, or React. CX Codex +1 1,500installs build-threejs-scroll-worlds Builds scroll-controlled Three.js worlds that stay spatially continuous across authored chapters. Useful for interactive portfolios, product stories, exhibitions, and WebGL explainers. CX Codex +1 1,500installs container-lines This skill adds thin vertical guide lines at the edges of the content container, plus mini corner squares on sections. Useful when a layout feels loose and needs structure. CX Codex +1 1,500installs company-logos Guides agents to use Iconify Simple Icons in a 64x64 box instead of plain text names or random raster images. CX Codex +1 1,500installs matterjs Walks the agent through a Matter.js scene: engine, render, runner, bodies and mouse dragging. Useful when a canvas needs physics. CX Codex +1 1,500installs css-border-gradient Applies refined gradient border treatments to cards, modals, and buttons in CSS or Tailwind. Useful when surfaces need subtle edge highlights without loud glowing outlines. CX Codex +1 1,500installs scroll-scrubbed-visual-sequence Builds reversible visual scenes driven by native scrolling, from product assembly to interface walkthroughs. Useful for interactive hero sections, diagrams, and image sequences. CX Codex +1 1,500installs unsplash-asset-images This skill picks Unsplash photos for avatars, headshots, backgrounds and wallpapers, and names the ratios and resolutions you need. CX Codex +1 1,600installs

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