[{"data":1,"prerenderedAt":457},["ShallowReactive",2],{"navigation_docs":3,"-docs-ai-agent-skills":215,"-docs-ai-agent-skills-surround":452},[4,20,50,165,175,185],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-sprout",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"children":24,"page":6},"Framework Guides","\u002Fdocs\u002Fframework-guides","docs\u002F2.framework-guides",[25,30,35,40,45],{"title":26,"path":27,"stem":28,"icon":29},"Vue and Nuxt","\u002Fdocs\u002Fframework-guides\u002Fvue-nuxt","docs\u002F2.framework-guides\u002F1.vue-nuxt","i-simple-icons-vuedotjs",{"title":31,"path":32,"stem":33,"icon":34},"React and Next.js","\u002Fdocs\u002Fframework-guides\u002Freact-nextjs","docs\u002F2.framework-guides\u002F2.react-nextjs","i-simple-icons-react",{"title":36,"path":37,"stem":38,"icon":39},"Svelte and SvelteKit","\u002Fdocs\u002Fframework-guides\u002Fsvelte-sveltekit","docs\u002F2.framework-guides\u002F3.svelte-sveltekit","i-simple-icons-svelte",{"title":41,"path":42,"stem":43,"icon":44},"Web Components","\u002Fdocs\u002Fframework-guides\u002Fweb-components","docs\u002F2.framework-guides\u002F4.web-components","i-simple-icons-webcomponentsdotorg",{"title":46,"path":47,"stem":48,"icon":49},"Core","\u002Fdocs\u002Fframework-guides\u002Fcore","docs\u002F2.framework-guides\u002F5.core","i-lucide-braces",{"title":51,"path":52,"stem":53,"children":54,"page":6},"Examples","\u002Fdocs\u002Fexamples","docs\u002F3.examples",[55,100,135],{"title":56,"icon":6,"defaultOpen":6,"path":57,"stem":58,"children":59,"page":6},"Basic","\u002Fdocs\u002Fexamples\u002Fbasic","docs\u002F3.examples\u002F1.basic",[60,65,70,75,80,85,90,95],{"title":61,"path":62,"stem":63,"icon":64},"Simple","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsimple","docs\u002F3.examples\u002F1.basic\u002F1.simple","i-lucide-square",{"title":66,"path":67,"stem":68,"icon":69},"Snapping","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsnap","docs\u002F3.examples\u002F1.basic\u002F2.snap","i-lucide-magnet",{"title":71,"path":72,"stem":73,"icon":74},"Masonry","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fmasonry","docs\u002F3.examples\u002F1.basic\u002F3.masonry","i-lucide-grid-3x3",{"title":76,"path":77,"stem":78,"icon":79},"Right to Left","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fright-to-left","docs\u002F3.examples\u002F1.basic\u002F4.right-to-left","i-lucide-arrow-left-from-line",{"title":81,"path":82,"stem":83,"icon":84},"Sticky Slides","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsticky","docs\u002F3.examples\u002F1.basic\u002F5.sticky","i-lucide-pin",{"title":86,"path":87,"stem":88,"icon":89},"Buttons","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fbuttons","docs\u002F3.examples\u002F1.basic\u002F6.buttons","i-lucide-circle-arrow-right",{"title":91,"path":92,"stem":93,"icon":94},"Dots","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fdots","docs\u002F3.examples\u002F1.basic\u002F7.dots","i-lucide-rectangle-ellipsis",{"title":96,"path":97,"stem":98,"icon":99},"Thumbnails","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fthumbnails","docs\u002F3.examples\u002F1.basic\u002F8.thumbnails","i-lucide-layout-list",{"title":101,"icon":6,"defaultOpen":6,"path":102,"stem":103,"children":104,"page":6},"Advanced","\u002Fdocs\u002Fexamples\u002Fadvanced","docs\u002F3.examples\u002F2.advanced",[105,110,115,120,125,130],{"title":106,"path":107,"stem":108,"icon":109},"Cover Flow","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcover-flow","docs\u002F3.examples\u002F2.advanced\u002F1.cover-flow","i-lucide-gallery-horizontal-end",{"title":111,"path":112,"stem":113,"icon":114},"Slideshow","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fslideshow","docs\u002F3.examples\u002F2.advanced\u002F2.slideshow","i-lucide-presentation",{"title":116,"path":117,"stem":118,"icon":119},"Stories","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fstories","docs\u002F3.examples\u002F2.advanced\u002F2.stories","i-lucide-circle-fading-plus",{"title":121,"path":122,"stem":123,"icon":124},"Smart Stack","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fsmart-stack","docs\u002F3.examples\u002F2.advanced\u002F3.smart-stack","i-lucide-layers",{"title":126,"path":127,"stem":128,"icon":129},"Cards","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcards","docs\u002F3.examples\u002F2.advanced\u002F4.cards","i-lucide-images",{"title":131,"path":132,"stem":133,"icon":134},"Flipbook","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fflipbook","docs\u002F3.examples\u002F2.advanced\u002F5.flipbook","i-lucide-swatch-book",{"title":136,"icon":6,"defaultOpen":6,"path":137,"stem":138,"children":139,"page":6},"Experimental","\u002Fdocs\u002Fexamples\u002Fexperimental","docs\u002F3.examples\u002F3.experimental",[140,145,150,155,160],{"title":141,"path":142,"stem":143,"icon":144},"CSS Controls","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fcss-controls","docs\u002F3.examples\u002F3.experimental\u002F1.css-controls","i-lucide-eclipse",{"title":146,"path":147,"stem":148,"icon":149},"Scroll State Query","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-state-queries","docs\u002F3.examples\u002F3.experimental\u002F2.scroll-state-queries","i-lucide-anvil",{"title":151,"path":152,"stem":153,"icon":154},"Scroll Snap Events","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-snap-changing","docs\u002F3.examples\u002F3.experimental\u002F3.scroll-snap-changing","i-lucide-megaphone",{"title":156,"path":157,"stem":158,"icon":159},"Repeat","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Frepeat","docs\u002F3.examples\u002F3.experimental\u002F4.repeat","i-lucide-repeat",{"title":161,"path":162,"stem":163,"icon":164},"Scroll Trigger","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-trigger","docs\u002F3.examples\u002F3.experimental\u002F5.scroll-trigger","i-lucide-bow-arrow",{"title":166,"path":167,"stem":168,"children":169,"page":6},"A11y","\u002Fdocs\u002Fa11y","docs\u002F4.a11y",[170],{"title":171,"path":172,"stem":173,"icon":174},"Accessibility Guide","\u002Fdocs\u002Fa11y\u002Faccessibility-guide","docs\u002F4.a11y\u002Faccessibility-guide","i-lucide-person-standing",{"title":176,"path":177,"stem":178,"children":179,"page":6},"Ai","\u002Fdocs\u002Fai","docs\u002F5.AI",[180],{"title":181,"path":182,"stem":183,"icon":184},"Agent Skills","\u002Fdocs\u002Fai\u002Fagent-skills","docs\u002F5.AI\u002F1.agent-skills","i-lucide-sparkles",{"title":186,"icon":6,"path":187,"stem":188,"children":189,"page":6},"Migration Guides","\u002Fdocs\u002Fmigration-guides","docs\u002F6.migration-guides",[190,195,200,205,210],{"title":191,"path":192,"stem":193,"icon":194},"Embla","\u002Fdocs\u002Fmigration-guides\u002Fembla","docs\u002F6.migration-guides\u002F1.embla","i-lucide-atom",{"title":196,"path":197,"stem":198,"icon":199},"Swiper","\u002Fdocs\u002Fmigration-guides\u002Fswiper","docs\u002F6.migration-guides\u002F2.swiper","i-lucide-circle-slash",{"title":201,"path":202,"stem":203,"icon":204},"Splide","\u002Fdocs\u002Fmigration-guides\u002Fsplide","docs\u002F6.migration-guides\u002F3.splide","i-lucide-diamond",{"title":206,"path":207,"stem":208,"icon":209},"Slick","\u002Fdocs\u002Fmigration-guides\u002Fslick","docs\u002F6.migration-guides\u002F4.slick","i-lucide-ampersand",{"title":211,"path":212,"stem":213,"icon":214},"Flickity","\u002Fdocs\u002Fmigration-guides\u002Fflickity","docs\u002F6.migration-guides\u002F5.flickity","i-lucide-smartphone",{"id":216,"title":181,"body":217,"description":443,"extension":444,"links":445,"meta":446,"navigation":447,"path":182,"seo":448,"stem":183,"__hash__":451},"docs\u002Fdocs\u002F5.AI\u002F1.agent-skills.md",{"type":218,"value":219,"toc":436},"minimark",[220,224,229,232,235,385,389,392,432],[221,222,223],"p",{},"Blossom Carousel's Agent Skills help AI coding assistants give package-specific guidance.",[225,226,228],"h2",{"id":227},"install-the-skills","Install the skills",[221,230,231],{},"Compatible agents (Cursor, Claude Code, etc.) can discover and use skills automatically.",[221,233,234],{},"To manually install with the skills CLI:",[236,237,238,268,272,349,353,356,359,366,370,374],"code-block",{},[239,240,246],"pre",{"className":241,"code":242,"filename":243,"language":244,"meta":245,"style":245},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx skills add https:\u002F\u002Fwww.blossom-carousel.com\n","Terminal","bash","",[247,248,249],"code",{"__ignoreMap":245},[250,251,254,258,262,265],"span",{"class":252,"line":253},"line",1,[250,255,257],{"class":256},"sBMFI","npx",[250,259,261],{"class":260},"sfazB"," skills",[250,263,264],{"class":260}," add",[250,266,267],{"class":260}," https:\u002F\u002Fwww.blossom-carousel.com\n",[225,269,271],{"id":270},"available-skills","Available skills",[273,274,275,288],"table",{},[276,277,278],"thead",{},[279,280,281,285],"tr",{},[282,283,284],"th",{},"Skill",[282,286,287],{},"Use it when",[289,290,291,309,319,329,339],"tbody",{},[279,292,293,299],{},[294,295,296],"td",{},[247,297,298],{},"blossom-carousel-core",[294,300,301,302,305,306],{},"You are working with the framework-agnostic Core package, direct DOM setup, lazy loading, ",[247,303,304],{},"init()",", or ",[247,307,308],{},"destroy()",[279,310,311,316],{},[294,312,313],{},[247,314,315],{},"blossom-carousel-vue",[294,317,318],{},"You are using Blossom Carousel in Vue or Nuxt",[279,320,321,326],{},[294,322,323],{},[247,324,325],{},"blossom-carousel-react",[294,327,328],{},"You are using Blossom Carousel in React or Next.js",[279,330,331,336],{},[294,332,333],{},[247,334,335],{},"blossom-carousel-svelte",[294,337,338],{},"You are using Blossom Carousel in Svelte or SvelteKit",[279,340,341,346],{},[294,342,343],{},[247,344,345],{},"blossom-carousel-web",[294,347,348],{},"You are using the Web Component package or CDN setup",[225,350,352],{"id":351},"how-to-use-a-skill","How to use a skill",[221,354,355],{},"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.",[221,357,358],{},"Good prompts name the framework, the desired carousel pattern, and any constraints that matter.",[360,361,365],"prompt",{":actions":362,"description":363,"icon":364},"[\"copy\"]","Build an accessible testimonial carousel in React.","i-lucide-square-chevron-right","Use Blossom Carousel React to build an accessible testimonial carousel. Keep layout in CSS and use scroll snap.",[360,367,369],{":actions":362,"description":368,"icon":364},"Create a product carousel with semantic list markup in Nuxt.","Use Blossom Carousel Vue in Nuxt. Register the component globally and create a product carousel with semantic list markup.",[360,371,373],{":actions":362,"description":372,"icon":364},"Create an RTL carousel with Web Components.","Use Blossom Carousel Web Components from a CDN. Create an RTL carousel and include the required stylesheet link.",[375,376,379,380,384],"note",{"color":377,"icon":378},"primary","i-lucide-lightbulb","For implementation details, use the matching ",[381,382,383],"a",{"href":27},"framework guide",".",[225,386,388],{"id":387},"what-the-skills-help-with","What the skills help with",[221,390,391],{},"The skills keep implementation guidance consistent across packages.",[393,394,395,399,406,409,416,429],"ul",{},[396,397,398],"li",{},"Use the right package import for the chosen framework.",[396,400,401,402,405],{},"Import ",[247,403,404],{},"@blossom-carousel\u002Fcore\u002Fstyle.css"," from the right place.",[396,407,408],{},"Use the framework component instead of the Web Component when working in Vue, React, or Svelte.",[396,410,411,412,415],{},"Use the ",[247,413,414],{},"as"," prop for semantic root elements in framework wrappers.",[396,417,418,419,422,423,425,426,428],{},"Use ",[247,420,421],{},"Blossom(element)",", ",[247,424,304],{},", and ",[247,427,308],{}," for direct Core usage.",[396,430,431],{},"Check common setup problems such as missing styles, invalid slide structure, and duplicate Core initialization.",[433,434,435],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":245,"searchDepth":437,"depth":437,"links":438},2,[439,440,441,442],{"id":227,"depth":437,"text":228},{"id":270,"depth":437,"text":271},{"id":351,"depth":437,"text":352},{"id":387,"depth":437,"text":388},"Use Blossom Carousel Agent Skills to guide AI coding assistants.","md",null,{},{"icon":184},{"title":449,"description":450},"Blossom Carousel Agent Skills for AI coding assistants","Use Blossom Carousel Agent Skills to guide AI coding assistants when implementing Core, Vue, React, Svelte, and Web Component carousel integrations.","ooZcZYqCoIRlL--MNZXifuWwHC4c9hGxvEb06fUoU5Q",[453,455],{"title":171,"path":172,"stem":173,"description":454,"icon":174,"children":-1},"Build accessible carousels with semantic structure, clear controls, keyboard support, motion controls, and tested ARIA patterns.",{"title":191,"path":192,"stem":193,"description":456,"icon":194,"children":-1},"Migrate from Embla Carousel to Blossom Carousel by moving layout and behavior back to native scrolling and CSS.",1780251481875]