Agent Skills

Use Blossom Carousel Agent Skills to guide AI coding assistants.

Blossom Carousel's Agent Skills help AI coding assistants give package-specific guidance.

Install the skills

Compatible agents (Cursor, Claude Code, etc.) can discover and use skills automatically.

To manually install with the skills CLI:

Terminal

npx skills add https://www.blossom-carousel.com

Available skills

Skill	Use it when
`blossom-carousel-core`	You are working with the framework-agnostic Core package, direct DOM setup, lazy loading, `init()`, or `destroy()`
`blossom-carousel-vue`	You are using Blossom Carousel in Vue or Nuxt
`blossom-carousel-react`	You are using Blossom Carousel in React or Next.js
`blossom-carousel-svelte`	You are using Blossom Carousel in Svelte or SvelteKit
`blossom-carousel-web`	You are using the Web Component package or CDN setup

How to use a skill

When your AI coding agent supports skills, you can ask for the package or framework directly. The agent can then use the matching skill automatically.

Good prompts name the framework, the desired carousel pattern, and any constraints that matter.

Build an accessible testimonial carousel in React.

Create a product carousel with semantic list markup in Nuxt.

Create an RTL carousel with Web Components.

For implementation details, use the matching framework guide.

What the skills help with

The skills keep implementation guidance consistent across packages.

Use the right package import for the chosen framework.
Import @blossom-carousel/core/style.css from the right place.
Use the framework component instead of the Web Component when working in Vue, React, or Svelte.
Use the as prop for semantic root elements in framework wrappers.
Use Blossom(element), init(), and destroy() for direct Core usage.
Check common setup problems such as missing styles, invalid slide structure, and duplicate Core initialization.

Accessibility Guide

Build accessible carousels with semantic structure, clear controls, keyboard support, motion controls, and tested ARIA patterns.

Embla

Migrate from Embla Carousel to Blossom Carousel by moving layout and behavior back to native scrolling and CSS.