FlowCay logo
FlowCay
Components: Carousel Layout Skill

Components: Carousel Layout Skill

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…

1k

Install command

npx skills add https://github.com/kostja94/marketing-skills --skill carousel
SkillOpen SourceAll Platforms
Added on

Details

Overview

Components: Carousel Layout Skill is an open-source Agent Skill from the kostja94/marketing-skills collection (MIT). It teaches AI coding agents focused marketing / SEO workflows so they can produce production-ready guidance instead of generic advice.

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.

See grid for equal-hierarchy display; list for text-heavy scan; masonry for varying-height gallery.

Official skill id: carousel. Source path: skills/components/layout/carousel.

Key Features

  • K: eyboard navigation: Arrow keys to move; Enter/Space to activate; focus visible
  • U: ser control: Don't auto-advance too fast; allow pause; avoid auto-advance if prefers-reduced-motion is set
  • A: nnouncements: Screen reader users need to know current slide and total (e.g., "Slide 2 of 5")
  • T: ouch targets: ≥44×44px for prev/next buttons on mobile
  • L: azy load: Load off-screen slides on demand; avoid loading all images upfront
  • R: eserve space: Reserve space for slides to avoid layout shift (CLS)

How to Use

  1. Use a Skill-compatible agent such as Claude Code, Cursor, or Codex.
  2. Install from the terminal (Node.js required):
npx skills add https://github.com/kostja94/marketing-skills --skill carousel

Or paste the install prompt from this tool page into your agent and ask it to install for you. 3. Restart / reload the agent so the new Skill is loaded. 4. Invoke the Skill with its slash commands or by asking the agent to run the workflow described in Overview / Key Features. 5. Review outputs before publishing — treat model-generated copy, images, and data as drafts.

Pricing

Plan Billing Price Notes
Open source — Free MIT license; install via npx skills add
Full pack — Free Optional: install the entire marketing-skills repo

No paid tiers. Check the GitHub repository for license and updates.

Best For

Marketers, indie hackers, ecommerce / SaaS founders, and SEO operators who want agents to execute a specific marketing task with structured best practices.

Trigger context from the skill author: 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.

FAQ

How do I install this skill?

npx skills add https://github.com/kostja94/marketing-skills --skill carousel

Or copy the skill folder into .cursor/skills/, .agents/skills/, or .claude/skills/.

Does this skill run code on my machine?

No. Skills in this collection are pure Markdown instructions for agents — no executable payloads.

Can I install only this skill instead of the full pack?

Yes. Prefer --skill carousel for a single task. Install 2–3 related skills per job rather than the entire library.

Where should I add project context?

Copy templates/project-context.md from the repo into .cursor/ or .claude/ and fill in product, audience, and brand details so outputs stay tailored.