When the user wants to design, optimize, or audit carousel/slider layouts for content display. Also use when the user mentions "carousel," "slider," "carousel layout," "testimonial carousel," "gallery carousel," "quote carousel," "image slider," or "carousel accessibility." For hero-area patterns, use hero-generator.
Guides carousel (slider) layout design for sequential content display. Carousels show one or few items at a time; users swipe or click to advance. Best when space is limited and multiple items need rotation—testimonials, quotes, logos, gallery highlights.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
| Use carousel when | Use grid/list when | |-------------------|---------------------| | Limited space | Full catalog visible | | One focus at a time; rotation desired | Browse, compare many items | | Testimonials, quotes, logos, featured gallery | Products, templates, blog index | | Above fold; hero or section highlight | Full listing; discovery |
See grid for equal-hierarchy display; list for text-heavy scan; masonry for varying-height gallery.
| Layout | Structure | Best for | |--------|-----------|----------| | Grid | Equal rows and columns; all visible | Products, templates, features | | List | Single column; stacked | Blog index, docs, search results | | Masonry | Columns; varying heights | Pinterest-style gallery | | Carousel | Slides; one/few visible; swipe/click | Testimonials, logos, featured items |
prefers-reduced-motion is set| Use case | Format | Page Skill | |----------|--------|------------| | Testimonials | Quote carousel; multiple testimonials | testimonials-generator | | Showcase / Gallery | Featured items; rotation | showcase-page-generator | | Press logos | "As Seen In" logo strip or quote carousel | press-coverage-page-generator | | Community | Banner carousel below hero | community-forum |
Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/carousel · pinned to the source commit
git clone https://github.com/kostja94/marketing-skills.git
cd marketing-skills
git checkout 70987bad4ebe9dce1f74858c1c64f3f8810f18e4
mkdir -p ".claude/skills/carousel"
cp -r "skills/components/layout/carousel" ".claude/skills/carousel"Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
Scanner static-checks@0.1.0 · commit 70987bad4ebe. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
No static rules matched. This is not a safety guarantee.