feat(docs): add CopyPrompt component for LLM-assisted setup

Adds a new CopyPrompt React component to the docs site that lets users
copy a tailored AI prompt to their clipboard with one click. Integrates
the component into every installation section across the getting-started
and framework guide pages (React, Web Components, JavaScript, Svelte, Vue).

The component shows a "Copy AI prompt" button with clipboard feedback and
a collapsible details element to preview the prompt text. On large screens
the button and details are horizontally aligned with the button on the right;
on small screens they stack with the button on top.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: p-m-p

packages/docs/docs/getting-started/01-installation.md

@@ -2,6 +2,8 @@
 title: Installation
 ---
 
+import { CopyPrompt } from '@site/src/components/CopyPrompt'
+
 The BoxSlider library is available as React components, Web Components and
 as a core JavaScript/TypeScript library.
 
@@ -14,6 +16,18 @@ for detailed instructions.
 npm install --save @boxslider/react
 ```
 
+<CopyPrompt
+prompt={`Help me install and set up @boxslider/react in my project.
+
+Install command: npm install --save @boxslider/react
+
+Please provide a quick start example showing:
+
+- A basic carousel slider using the CarouselSlider component
+- Navigation controls using SliderControls
+- The minimum required CSS to make the slider display correctly`}
+  />
+
 ## Web Components
 
 The Web components package can also be installed via NPM or used directly from a CDN. See the
@@ -41,6 +55,19 @@ Use from CDN
 </bs-slider-controls>
 ```
 
+<CopyPrompt
+prompt={`Help me install and set up @boxslider/components (BoxSlider Web Components) in my project.
+
+Install command: npm install --save @boxslider/components
+Or use from CDN: <script type="module" src="https://cdn.jsdelivr.net/npm/@boxslider/components/+esm"></script>
+
+Please provide a quick start example showing:
+
+- A basic carousel slider using the bs-carousel web component
+- Navigation controls using bs-slider-controls
+- The minimum required CSS to make the slider display correctly`}
+  />
+
 ## JavaScript
 
 The core slider package can be installed via NPM or used directly from a CDN. See the
@@ -61,3 +88,16 @@ Use directly from a CDN
   const slider = createFadeSlider('#slider')
 </script>
 ```
+
+<CopyPrompt
+prompt={`Help me install and set up @boxslider/slider (BoxSlider JavaScript library) in my project.
+
+Install command: npm install --save @boxslider/slider
+Or import from CDN: import { createFadeSlider } from 'https://cdn.jsdelivr.net/npm/@boxslider/slider/+esm'
+
+Please provide a quick start example showing:
+
+- The required HTML structure for a carousel slider
+- Creating the slider using createCarouselSlider
+- The minimum required CSS to make the slider display correctly`}
+  />

packages/docs/docs/guides/01-react.md

@@ -2,6 +2,8 @@
 title: React
 ---
 
+import { CopyPrompt } from '@site/src/components/CopyPrompt'
+
 BoxSlider React components are a thin wrapper around the [Web Components](/docs/guides/web-components) for each
 slide effect and the slider controls.
 
@@ -11,6 +13,24 @@ slide effect and the slider controls.
 npm i --save @boxslider/react@latest
 ```
 
+<CopyPrompt
+prompt={`I'm setting up BoxSlider React components in my project.
+
+Install: npm i --save @boxslider/react@latest
+
+The package provides these components:
+
+- CarouselSlider, FadeSlider, CubeSlider, TileSlider — slide effects, options passed as props
+- SliderControls — navigation buttons, wraps the slider component
+
+Key requirements:
+
+- Sliders need explicit display, height, and width CSS to function
+- Slider options (speed, timeout, autoScroll, pauseOnHover, loop, swipe) are passed as props
+
+Please provide a complete React component example with a carousel slider wrapped in SliderControls and the required styles.`}
+/>
+
 ## Components
 
 Each slide effect has a matching React component. The options for the slider and the effect are passed as props.

packages/docs/docs/guides/02-web-components.md

@@ -2,6 +2,8 @@
 title: Web Components
 ---
 
+import { CopyPrompt } from '@site/src/components/CopyPrompt'
+
 BoxSlider Web Components provide ready to us slider elements for each slide
 effect and the slider controls.
 
@@ -37,6 +39,24 @@ Alternatively use from CDN.
 </bs-slider-controls>
 ```
 
+<CopyPrompt
+prompt={`I'm setting up BoxSlider Web Components in my project.
+
+Install: npm i --save @boxslider/components
+Then import in your entry file: import '@boxslider/components'
+
+Or use from CDN: <script type="module" src="https://cdn.jsdelivr.net/npm/@boxslider/components/+esm"></script>
+
+Available web components:
+
+- bs-carousel, bs-cube, bs-fade, bs-tile — slide effects (camelCase options become kebab-case attributes, e.g. autoScroll → auto-scroll)
+- bs-slider-controls — navigation buttons, wraps the slider element
+
+Key requirements: The slider element needs display, height, and width set via CSS.
+
+Please provide a complete HTML example with a carousel slider wrapped in bs-slider-controls and the required styles.`}
+/>
+
 To import a single component use the individual exports.
 
 ```ts

packages/docs/docs/guides/03-javascript.md

@@ -2,6 +2,8 @@
 title: JavaScript
 ---
 
+import { CopyPrompt } from '@site/src/components/CopyPrompt'
+
 More advanced users may want to use the core JavaScript library directly. The core library provides
 a simple API for creating a slider and manipulating it programmatically. For ready to use components
 view the [React](/docs/guides/react) and [Web Components](/docs/guides/web-components) guides.
@@ -26,6 +28,26 @@ Alternatively use from CDN.
 </script>
 ```
 
+<CopyPrompt
+prompt={`I'm setting up the BoxSlider JavaScript library in my project.
+
+Install: npm install --save @boxslider/slider
+Or import from CDN: import { createFadeSlider } from 'https://cdn.jsdelivr.net/npm/@boxslider/slider/+esm'
+
+Available helper functions (each takes a CSS selector or element + optional options):
+
+- createCarouselSlider, createFadeSlider, createCubeSlider, createTileSlider
+
+Options include: speed, timeout, autoScroll, pauseOnHover, loop, swipe, swipeTolerance
+
+Key requirements:
+
+- Create the HTML structure with a container and slide elements
+- Set display, height, and width CSS on the slider container
+
+Please provide a complete example with HTML, CSS, and JavaScript that creates a working carousel slider.`}
+/>
+
 ## Usage
 
 Create the HTML structure for your slider content.

packages/docs/docs/guides/04-svelte.md

@@ -2,6 +2,8 @@
 title: Svelte
 ---
 
+import { CopyPrompt } from '@site/src/components/CopyPrompt'
+
 Svelte applications can easily integrate the BoxSlider [Web Components](/docs/guides/web-components).
 
 ## Installation
@@ -10,6 +12,22 @@ Svelte applications can easily integrate the BoxSlider [Web Components](/docs/gu
 npm i --save @boxslider/components
 ```
 
+<CopyPrompt
+prompt={`I'm integrating BoxSlider into my Svelte application using Web Components.
+
+Install: npm i --save @boxslider/components
+
+In Svelte, import the package in your component script then use the web components directly in templates:
+
+- bs-carousel, bs-cube, bs-fade, bs-tile — slide effects (pass options as props, e.g. speed={500})
+- bs-slider-controls — navigation buttons, wraps the slider element
+- Use bind:this to access the BoxSlider instance via the element's .slider property
+
+Key requirements: Set display, height, and width on the slider element via CSS.
+
+Please provide a complete Svelte component example with a carousel slider wrapped in bs-slider-controls and the required styles.`}
+/>
+
 ## Components
 
 Svelte has first class support for web components and the best way to use BoxSlider is to use the web components directly

packages/docs/docs/guides/05-vue.md

@@ -2,6 +2,8 @@
 title: Vue
 ---
 
+import { CopyPrompt } from '@site/src/components/CopyPrompt'
+
 Vue applications can easily integrate the BoxSlider [Web Components](/docs/guides/web-components).
 
 ## Installation
@@ -10,6 +12,22 @@ Vue applications can easily integrate the BoxSlider [Web Components](/docs/guide
 npm i --save @boxslider/components
 ```
 
+<CopyPrompt
+prompt={`I'm integrating BoxSlider into my Vue application using Web Components.
+
+Install: npm i --save @boxslider/components
+
+In Vue, import the package in your component setup then use the web components directly in templates:
+
+- bs-carousel, bs-cube, bs-fade, bs-tile — slide effects (bind numeric/boolean options with :prop="value", strings without binding)
+- bs-slider-controls — navigation buttons, wraps the slider element
+- Use a template ref to access the BoxSlider instance via the element's .slider property
+
+Key requirements: Set display, height, and width on the slider element via CSS.
+
+Please provide a complete Vue component example with a carousel slider wrapped in bs-slider-controls and the required styles.`}
+/>
+
 ## Components
 
 Vue has first class support for web components and the best way to use BoxSlider is to use the web components directly

packages/docs/src/components/CopyPrompt/CopyPrompt.tsx

@@ -0,0 +1,46 @@
+import { useState, useCallback } from 'react'
+import { Copy, Check, ChevronDown } from 'lucide-react'
+import clsx from 'clsx'
+import { Button } from '../Button'
+import styles from './styles.module.css'
+
+interface CopyPromptProps {
+  prompt: string
+}
+
+export function CopyPrompt({ prompt }: CopyPromptProps) {
+  const [copied, setCopied] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(prompt)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [prompt])
+
+  return (
+    <div className={styles.container}>
+      <Button
+        onClick={handleCopy}
+        aria-label={
+          copied ? 'Prompt copied to clipboard' : 'Copy AI prompt to clipboard'
+        }>
+        {copied ? <Check size={14} /> : <Copy size={14} />}
+        {copied ? 'Copied!' : 'Copy AI prompt'}
+      </Button>
+      <details
+        className={styles.details}
+        onToggle={(e) => setOpen((e.target as HTMLDetailsElement).open)}>
+        <summary className={styles.summary}>
+          <ChevronDown
+            className={clsx(styles.chevron, open && styles.chevronOpen)}
+            size={14}
+            aria-hidden
+          />
+          View prompt
+        </summary>
+        <pre className={styles.promptText}>{prompt}</pre>
+      </details>
+    </div>
+  )
+}

packages/docs/src/components/CopyPrompt/index.ts

@@ -0,0 +1 @@
+export { CopyPrompt } from './CopyPrompt'

packages/docs/src/components/CopyPrompt/styles.module.css

@@ -0,0 +1,55 @@
+.container {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-block: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .container {
+    flex-direction: row-reverse;
+    gap: 1rem;
+  }
+}
+
+.details {
+  flex: 1;
+  min-width: 0;
+}
+
+.summary {
+  align-items: center;
+  color: var(--ifm-color-primary);
+  cursor: pointer;
+  display: flex;
+  font-size: var(--bs-text-sm);
+  gap: 0.25rem;
+  list-style: none;
+  user-select: none;
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.chevron {
+  flex-shrink: 0;
+  transition: transform 200ms ease;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.promptText {
+  background: var(--ifm-code-background);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 4px;
+  font-size: var(--bs-text-sm);
+  line-height: 1.6;
+  margin-block: 0.5rem 0;
+  padding: 0.75rem 1rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}