carousel
starsforks
How to install carousel?
kostja94/marketing-skills/carousel
$npx -y skills add kostja94/marketing-skills --skill carouselWhen 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 h
SKILL.md
| 1 | # Components: Carousel Layout |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | **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. |
| 6 | |
| 7 | ## When to Use Carousel |
| 8 | |
| 9 | | Use carousel when | Use grid/list when | |
| 10 | |-------------------|---------------------| |
| 11 | | **Limited space** | Full catalog visible | |
| 12 | | One focus at a time; rotation desired | Browse, compare many items | |
| 13 | | Testimonials, quotes, logos, featured gallery | Products, templates, blog index | |
| 14 | | Above fold; hero or section highlight | Full listing; discovery | |
| 15 | |
| 16 | See **grid** for equal-hierarchy display; **list** for text-heavy scan; **masonry** for varying-height gallery. |
| 17 | |
| 18 | ## Carousel vs Grid vs List vs Masonry |
| 19 | |
| 20 | | Layout | Structure | Best for | |
| 21 | |--------|-----------|----------| |
| 22 | | **Grid** | Equal rows and columns; all visible | Products, templates, features | |
| 23 | | **List** | Single column; stacked | Blog index, docs, search results | |
| 24 | | **Masonry** | Columns; varying heights | Pinterest-style gallery | |
| 25 | | **Carousel** | Slides; one/few visible; swipe/click | Testimonials, logos, featured items | |
| 26 | |
| 27 | ## Best Practices |
| 28 | |
| 29 | ### Accessibility |
| 30 | |
| 31 | - **Keyboard navigation**: Arrow keys to move; Enter/Space to activate; focus visible |
| 32 | - **User control**: Don't auto-advance too fast; allow pause; avoid auto-advance if `prefers-reduced-motion` is set |
| 33 | - **Announcements**: Screen reader users need to know current slide and total (e.g., "Slide 2 of 5") |
| 34 | - **Touch targets**: ≥44×44px for prev/next buttons on mobile |
| 35 | |
| 36 | ### Performance |
| 37 | |
| 38 | - **Lazy load**: Load off-screen slides on demand; avoid loading all images upfront |
| 39 | - **Reserve space**: Reserve space for slides to avoid layout shift (CLS) |
| 40 | |
| 41 | ### SEO |
| 42 | |
| 43 | - **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**. |
| 44 | - **Recommendation**: Server-render all slides in HTML; use CSS/JS only to show/hide. See **rendering-strategies**. |
| 45 | |
| 46 | ## Use Cases |
| 47 | |
| 48 | | Use case | Format | Page Skill | |
| 49 | |----------|--------|------------| |
| 50 | | **Testimonials** | Quote carousel; multiple testimonials | **testimonials-generator** | |
| 51 | | **Showcase / Gallery** | Featured items; rotation | **showcase-page-generator** | |
| 52 | | **Press logos** | "As Seen In" logo strip or quote carousel | **press-coverage-page-generator** | |
| 53 | | **Community** | Banner carousel below hero | **community-forum** | |
| 54 | |
| 55 | ## Related Skills |
| 56 | |
| 57 | - **grid**: Grid for full catalog; when carousel is too restrictive |
| 58 | - **list**: List for text-heavy scan |
| 59 | - **masonry**: Masonry for varying-height gallery |
| 60 | - **card**: Card structure within carousel slides |
| 61 | - **testimonials-generator**: Testimonial carousel; testimonials as content |
| 62 | - **showcase-page-generator**: Gallery format options (grid, masonry, carousel) |
| 63 | - **tab-accordion**: Similar SEO requirement—content in DOM at load |
| 64 | - **rendering-strategies**: SSR, SSG; content in initial HTML for crawlers |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
