carousel

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.

313 stars

Best use case

carousel is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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.

Teams using carousel should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/carousel/SKILL.md --create-dirs "https://raw.githubusercontent.com/kostja94/marketing-skills/main/skills/components/layout/carousel/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/carousel/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How carousel Compares

Feature / AgentcarouselStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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-motion` is 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

website-structure

313
from kostja94/marketing-skills

When the user wants to plan website structure, decide which pages to build, or prioritize pages for a new or existing site. Also use when the user mentions "website structure," "site structure," "which pages do I need," "page planning," "sitemap planning," "Must Have pages," "website architecture," or "site hierarchy." For a specific page template (e.g. homepage), use homepage-generator or landing-page-generator as appropriate. Not for organic SEO roadmap alone; use seo-strategy.

seo-strategy

313
from kostja94/marketing-skills

When the user wants to plan SEO strategy, prioritize SEO work, or understand the SEO workflow. Also use when the user mentions "SEO strategy," "SEO plan," "SEO roadmap," "SEO priority," "SEO audit," "SEO workflow," "where to start SEO," "SEO approach," "organic growth strategy," "why SEO," "SEO value," or "search strategy." For technical/crawl audit execution, use seo-audit. For keyword research, use keyword-research. For AI search visibility, use generative-engine-optimization.

seo-audit

313
from kostja94/marketing-skills

When the user wants to run an SEO audit, technical SEO audit, or site health check. Also use when the user mentions "SEO audit," "technical audit," "site audit," "crawl audit," "indexing audit," "SEO health," or "fix SEO issues." For prioritization and organic strategy, use seo-strategy. For GSC data analysis, use google-search-console.

retention-strategy

313
from kostja94/marketing-skills

When the user wants to reduce churn, improve customer retention, or plan lifecycle marketing. Also use when the user mentions "retention," "churn," "customer lifecycle," "churn prevention," "at-risk customers," or "loyalty program." For lifecycle, use growth-funnel.

research-sources

313
from kostja94/marketing-skills

When the user wants to find information sources for content ideation, competitor monitoring, or industry tracking. Also use when the user mentions "research sources," "information sources," "content ideation," "industry monitoring," "competitor monitoring," "market intelligence," "content research," or "topic research." For keywords, use keyword-research.

product-launch

313
from kostja94/marketing-skills

When the user wants to plan a product launch, execute launch channels, or create a launch checklist. Also use when the user mentions "product launch," "launch strategy," "product announcement," "launch channels," or "market launch." For GTM motion and positioning, use gtm-strategy. For cold start and first users, use cold-start-strategy. For Product Hunt day-of, use product-hunt-launch.

pmf-strategy

313
from kostja94/marketing-skills

When the user wants to validate product-market fit, measure PMF, or plan before scaling. Also use when the user mentions "PMF," "product-market fit," "product market fit," "Sean Ellis test," "very disappointed," "vitamin vs painkiller," "PMF validation," "premature scaling," or "validate before scale." For GTM after validation, use gtm-strategy.

indie-hacker-strategy

313
from kostja94/marketing-skills

When the user wants indie hacker or bootstrapping founder strategy—growth, channels, Build in Public, or solo founder tactics. Also use when the user mentions "indie hacker," "indie developer," "bootstrapping," "bootstrapped founder," "solo founder," "Build in Public," "scratch your own itch," "Micro-SaaS," "first 100 users," or "solo company." For cold start, use cold-start-strategy.

gtm-strategy

313
from kostja94/marketing-skills

When the user wants to plan go-to-market strategy, GTM framework, or market entry. Also use when the user mentions "GTM," "go-to-market," "market entry," "new market," "repositioning," "PLG," "sales-led," "product-led," "marketing-led," "ICP," "buyer persona," "GTM motion," or "market expansion." For launch checklist, use product-launch.

growth-funnel

313
from kostja94/marketing-skills

When the user wants to plan growth using the AARRR framework, diagnose growth bottlenecks, or map actions across the customer lifecycle. Also use when the user mentions "growth funnel," "AARRR," "pirate metrics," "acquisition activation retention," "customer lifecycle metrics," or "growth framework." For retention tactics, use retention-strategy.

conversion-optimization

313
from kostja94/marketing-skills

When the user wants to improve conversion rates, run A/B tests, optimize funnels, or reduce friction. Also use when the user mentions "CRO," "conversion rate optimization," "A/B test," "split test," "funnel optimization," "checkout optimization," "form optimization," or "conversion funnel." For pricing psychology, use pricing-strategy.

cold-start-strategy

313
from kostja94/marketing-skills

When the user wants to plan cold start, get first users, or launch a new product with zero traction. Also use when the user mentions "cold start," "cold start problem," "first users," "seed users," "finding users," "finding early users," "Fiverr Upwork," "comment outreach," "Twitter search users," "product launch strategy," "0 to 1 growth," "early-stage acquisition," "launch channels," "get first customers," "Product Hunt launch," "AppSumo," "LTD," "indie hacker," "bootstrapping," or "solo founder." For directory listing copy and submissions, use directory-submission. For Product Hunt day-of execution, use product-hunt-launch. For GTM motion design, use gtm-strategy.