Guide · Agent skill
How to use the Marquee Loop agent skill: setup and examples
Updated · written with AI from the project's own documentation and checked against our catalogue data
Marquee Loop is an agent skill, a set of written instructions that teaches an AI coding agent how to build one specific web design pattern: a row of logos, testimonials, screenshots or feature chips that scrolls in a continuous loop with no visible jump. This guide covers what the skill changes, how to install it, how to ask for it in plain language, and the safety and quality points to check. By the end you will be able to add the skill to your agent and request a working marquee for a landing page.
Marquee LoopMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the marquee-loop ZIP from the directory page.
- 2Unzip the folder. Extract the contents so SKILL.md sits inside the marquee-loop folder.
- 3Place the skill. Move the folder into ~/.claude/skills/ for personal use, or into the project's .claude/skills/ folder for one project.
- 4Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 5Ask for a marquee. Describe your logo bar, testimonial strip or feature chips and mention a seamless loop.
- 6Review the code. Check for duplicated items, a linear 0 to -50% animation, stable widths, faded edges and reduced-motion support.
What the marquee-loop skill makes the agent do
The skill guides the agent through a fixed technique. It duplicates the item sequence so the end of the row matches the beginning, then animates the track with a linear transform from 0 to -50%. Because the copy sits exactly where the original ends, the loop appears endless.
The skill also covers details that usually go wrong: keeping item widths stable so the loop does not jump, masking or fading the edges where the marquee meets the page, pausing on hover only when that helps, and respecting prefers-reduced-motion with a static layout or very slow movement.
It is guidance for writing front-end code. It does not change anything on its own and does not run scripts.
Install the marquee-loop skill
Download the ZIP for the skill from the directory page and unzip it. Then place the folder in one of two locations. For a personal setup available across your projects, use ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder.
If you use the Claude apps instead of a local setup, you can upload the skill in the app under Settings → Capabilities → Skills.
- Personal: unzip into ~/.claude/skills/
- Single project: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Trigger the skill with a natural request
You do not need a special command. Describe the design you want and mention that the marquee should loop seamlessly. The skill's description covers seamless infinite marquee loops using duplicated items, so requests about logo bars, testimonial strips and feature chips are the right fit.
The bundled demo prompts show the style of request that works. They name the skill with $marquee-loop and describe the page, its purpose and the content it should contain.
- Make a scrolling logo bar for our landing page using $marquee-loop.
- Add a looping testimonial strip under the hero, with edges faded and reduced-motion support.
- Use $marquee-loop to build a standalone responsive HTML page with a feature-chip marquee.
Use $marquee-loop to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.Check the output against the skill's rules
Review what the agent produces against the workflow. The items should appear twice in the markup, the animation should be linear and move from 0 to -50%, and the item widths should be fixed so the loop stays seamless. Edges should be masked or faded, and the motion should be disabled or reduced under prefers-reduced-motion.
Keep the guardrails in mind. Do not use the marquee for text people need to read closely, and avoid heavy shadows or filters on every moving item, since these can slow the page.
- Items are duplicated so the end matches the beginning
- Animation is linear, from 0 to -50%
- Widths are stable during the loop
- Edges are faded where the marquee enters or exits a section
- prefers-reduced-motion is respected
Safety notes: scripts and network
According to the listing, this skill runs no scripts and uses no network access. It requires nothing beyond the agent itself. Its files are demo/index.html, demo/PROMPT.md, demo/source.json and SKILL.md. The demo files are reference material for the visual and interaction finish you can ask for.
As with any skill, read the files before installing and treat generated code as code you should review before shipping.
- Runs scripts: no
- Uses network: no
- Requires: nothing listed
What people use it for
- A landing page logo bar showing customer or partner logos in a continuous scroll.
- A testimonial strip under the hero section with short quotes.
- A row of feature chips or tags that loops across the top of a product page.
- A standalone responsive HTML demo of a marquee for a component library.
Frequently asked questions
How do I install the marquee-loop skill?
Download the ZIP from the directory page and unzip it. Place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder for one project. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
Does marquee-loop require anything else to run?
The listing states that it requires nothing and runs no scripts. It does not use the network. It is written guidance that the agent follows while writing front-end code.
Is the marquee-loop skill free?
The skill is listed under the MIT licence. Check the licence file in the repository for the full terms before you reuse the code in a commercial project.
Why does the marquee sometimes jump instead of looping smoothly?
A jump usually means the duplicated sequence does not match the original width, or the item widths change during the animation. The skill asks the agent to duplicate the items so the end matches the beginning and to keep widths stable.
Does the marquee respect reduced motion settings?
The skill tells the agent to respect prefers-reduced-motion with a static wrap or very slow movement. Ask the agent to confirm this in the output and test it in your browser's reduced-motion setting.
Should I use a marquee for all my content?
No. The skill warns against animating unique content that users must read carefully. Use it for logos, short testimonials, screenshots, tags and feature chips rather than dense text.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Marquee Loop is a good fit for front-end developers and designers who want an agent to produce a clean, accessible scrolling logo bar or testimonial strip with sensible guardrails. It is not the right choice if you need to present dense or unique content people must read, or if your page already has many heavy moving elements that could slow the browser.
Download the skill