Carousel
- 990 installs
- 787 repo stars
- Updated June 9, 2026
- kostja94/marketing-skills
carousel is a marketing-skills agent skill at version 1.1.0 that guides developers through designing, optimizing, and auditing carousel and slider layouts for testimonials, hero sections, galleries, and sequential conten
About
carousel is a component layout skill from kostja94/marketing-skills (version 1.1.0) focused on slider patterns that show one or a few items at a time with swipe or click navigation. The skill applies to testimonial rotators, quote sliders, logo strips, and gallery highlights where horizontal space is limited. On first invoke it walks through layout, motion, and carousel accessibility concerns so teams avoid autoplay traps and keyboard gaps. Developers reach for carousel when users mention carousel, slider, testimonial carousel, gallery carousel, or carousel accessibility; the skill defers hero-area patterns to hero-generator. It complements frontend implementation rather than replacing a component library.
- Decides when to use carousel versus grid, list, or masonry layouts
- Provides accessibility, performance, and UX best practices for sliders
- Guides implementation of hero-area, testimonial, quote, logo, and gallery carousels
- Includes comparison tables and decision frameworks for limited-space content rotation
- First-use explanation of value before delivering main output
Carousel by the numbers
- 990 all-time installs (skills.sh)
- +5 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #398 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/kostja94/marketing-skills --skill carouselAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 990 |
|---|---|
| repo stars | ★ 787 |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 9, 2026 |
| Repository | kostja94/marketing-skills ↗ |
How do you build accessible carousel sliders for testimonials?
Get expert guidance on designing, optimizing, or auditing carousel and slider layouts for testimonials, hero sections, galleries, and other sequential content dis
Who is it for?
Frontend developers implementing testimonial, gallery, or logo carousels who need layout, UX, and accessibility guidance during design or audit.
Skip if: Full hero-section generation—use hero-generator—or native mobile ViewPager implementations without web slider context.
When should I use this skill?
The user mentions carousel, slider, testimonial carousel, gallery carousel, image slider, or carousel accessibility on a web page.
What you get
Carousel layout spec with navigation pattern, content rotation rules, and accessibility audit notes for slider UI.
- carousel layout recommendations
- accessibility audit notes
- slider navigation pattern
By the numbers
- Marketing-skills carousel skill version 1.1.0
Files
Components: Carousel Layout
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.
When to Use Carousel
| 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.
Carousel vs Grid vs List vs Masonry
| 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 |
Best Practices
Accessibility
- Keyboard navigation: Arrow keys to move; Enter/Space to activate; focus visible
- User control: Don't auto-advance too fast; allow pause; avoid auto-advance if
prefers-reduced-motionis set - Announcements: Screen reader users need to know current slide and total (e.g., "Slide 2 of 5")
- Touch targets: ≥44×44px for prev/next buttons on mobile
Performance
- Lazy load: Load off-screen slides on demand; avoid loading all images upfront
- Reserve space: Reserve space for slides to avoid layout shift (CLS)
SEO
- Content in DOM: All carousel content must be in the initial HTML at page load. Google does not simulate clicks; content loaded via AJAX on slide change is not discoverable. Same as tab-accordion.
- Recommendation: Server-render all slides in HTML; use CSS/JS only to show/hide. See rendering-strategies.
Use Cases
| 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 |
Related Skills
- grid: Grid for full catalog; when carousel is too restrictive
- list: List for text-heavy scan
- masonry: Masonry for varying-height gallery
- card: Card structure within carousel slides
- testimonials-generator: Testimonial carousel; testimonials as content
- showcase-page-generator: Gallery format options (grid, masonry, carousel)
- tab-accordion: Similar SEO requirement—content in DOM at load
- rendering-strategies: SSR, SSG; content in initial HTML for crawlers
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Choose carousel for rotating content blocks and slider accessibility; use hero-generator when the task is primarily hero-area layout.
FAQ
What content types does the carousel skill target?
The carousel skill targets sequential content displays such as testimonials, quotes, client logos, and gallery highlights where only one or a few items show at a time and users advance by swipe or click.
Does the carousel skill handle hero sections?
The carousel skill focuses on carousel and slider layouts for rotating content blocks. For hero-area patterns, the skill directs developers to use the separate hero-generator skill instead.
Is Carousel safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.