v1.1.0 to git:20260925.04c929c

- description: 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.

- version: 1.1.0

- # 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