@central-design-system/skills 4.0.0-alpha.6

package/skills/cds-builder/references/components/cds-card/tokens.md

@@ -0,0 +1,46 @@
+# CdsCard — tokens (level 3)
+
+> Copy of the component's `styles/*.variables.scss`, taken by `bun run generate:skill`. Do not edit manually.
+> `--cds-*` are global level-2 tokens whose values come from the active theme: see [themes.md](../../tokens/themes.md).
+> Variables marked `!default` can be overridden at build time via SCSS.
+
+## CdsCard.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+// CdsCardHeader
+$card-header-flex: none !default;
+
+// CdsCard
+$card-overflow-wrap: break-word !default;
+$card-prepend-padding-inline-end: var(--cds-spacing-200) !default;
+$card-append-padding-inline-start: var(--cds-spacing-200) !default;
+$card-gap: var(--cds-spacing-400) !default;
+$card-border-radius: var(--cds-border-radius-300) !default;
+$card-border-width: var(--cds-border-100) solid !default;
+$card-outline-width: var(--cds-border-200) solid !default;
+$card-border-color: rgb(var(--cds-color-line-tertiary)) !default;
+$card-background-color: rgb(var(--cds-color-surface-primary)) !default;
+$card-text-color: rgb(var(--cds-color-content-primary)) !default;
+$card-outline-offset: var(--cds-spacing-50) !default;
+$card-disabled-opacity: 0.5 !default;
+$card-content-gap: var(--cds-spacing-100) !default;
+$card-hover-border-color: rgb(var(--cds-color-line-tertiary-hover)) !default;
+$card-selected-border-color: rgb(var(--cds-color-line-selected)) !default;
+$card-focus-border-color: rgb(var(--cds-color-line-focus-outline)) !default;
+
+// CdsCardItem
+$card-item-align-items: flex-start !default;
+$card-item-padding: var(--cds-spacing-400) !default;
+
+// CdsCardText
+$card-text-padding: var(--cds-spacing-400) !default;
+
+// CdsCardTitle
+$card-title-flex: none !default;
+
+
+// CdsCardSubtitle
+$card-subtitle-text-opacity: 0.8 !default;
+```

package/skills/cds-builder/references/components/cds-carousel/api.md

@@ -0,0 +1,107 @@
+# CdsCarousel — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Guidelines: [guidelines.md](guidelines.md) · Tokens: [tokens.md](tokens.md)
+
+A carousel shows images or arbitrary content slide by slide: promo banners, photo galleries, onboarding steps. Arrows and delimiter dots give you navigation, autoplay flips the slides on its own, and the progress bar shows the current position.
+
+Family: [CdsCarousel](#cdscarousel) + subcomponents: [CdsCarouselItem](#cdscarouselitem).
+
+## CdsCarousel
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string \| undefined` | — | no | Color of the active delimiter and of the progress bar |
+| `continuous` | `boolean \| undefined` | `true` | no | Loops the navigation: from the last slide you move to the first one and back |
+| `crossfade` | `boolean \| undefined` | — | no | Slides change with a smooth crossfade instead of a shift |
+| `cycle` | `boolean \| undefined` | — | no | Flips the slides automatically after the given interval |
+| `delimiterIcon` | `IconValue \| undefined` | `'delimiter'` | no | Icon of the delimiter (navigation dot) |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `height` | `string \| number \| undefined` | `500` | no | Height of the carousel |
+| `hideDelimiterBackground` | `boolean \| undefined` | — | no | Hides the backdrop under the delimiters |
+| `hideDelimiters` | `boolean \| undefined` | — | no | Hides the delimiters (navigation dots) |
+| `interval` | `string \| number \| undefined` | `6000` | no | Autoplay interval in milliseconds (when `cycle` is on) |
+| `mandatory` | `boolean \| "force" \| undefined` | `'force'` | no | Requires at least one item to stay selected |
+| `max` | `number \| undefined` | — | no | Maximum number of items that can be selected |
+| `modelValue` | `any` | — | no | Value of the selected items of the group |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several items at once |
+| `nextIcon` | `IconValue \| undefined` | `'next'` | no | Icon of the button that moves to the next slide |
+| `prevIcon` | `IconValue \| undefined` | `'prev'` | no | Icon of the button that moves to the previous slide |
+| `progress` | `string \| boolean \| undefined` | — | no | Shows the progress bar of the current slide. A string sets the color of the bar |
+| `required` | `boolean \| "force" \| undefined` | — | no | Requires at least one item to stay selected |
+| `reverse` | `boolean \| undefined` | — | no | Inverts the direction of the transition animation between slides |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `showArrows` | `string \| boolean \| undefined` | `true` | no | Shows the navigation arrows. `'hover'` — only while the pointer is over the component |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `touch` | `boolean \| TouchHandlers \| undefined` | — | no | Controls swipe navigation: `false` turns the gestures off, an object sets your own touch handlers |
+| `transitionDuration` | `number \| undefined` | — | no | Duration of the transition animation between slides, in milliseconds |
+| `verticalArrows` | `boolean \| "left" \| "right" \| undefined` | — | no | Places the navigation arrows vertically: `'left'` or `'right'` — the side, `true` — the default side |
+| `verticalDelimiters` | `boolean \| "left" \| "right" \| undefined` | — | no | Vertical placement of the delimiters: `left`, `right` or `true` (left) |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[]` | Fires when the active slide changes. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `{ group: GroupProvide; }` | Slides. The slot props carry the group state for controlling the active slide |
+| `item` | `{ props: CarouselDelimiterProps; item: { id: string; value: unknown; disabled: boolean \| undefined; }; }` | Custom delimiter (navigation dot) for each slide. |
+| `next` | `{ props: ControlProps; }` | Button that moves to the next slide. The slot props are ready to bind to your own button |
+| `prev` | `{ props: ControlProps; }` | Button that moves to the previous slide. The slot props are ready to bind to your own button |
+
+---
+
+## CdsCarouselItem
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `absolute` | `boolean \| undefined` | — | no | Positions the image with `position: absolute`, filling its parent. |
+| `alt` | `string \| undefined` | — | no | Alternative text of the image (the `alt` attribute). |
+| `aspectRatio` | `string \| number \| undefined` | — | no | Aspect ratio of the content. For example `1.7778` (16/9) or `'4/3'`. |
+| `color` | `string \| undefined` | — | no | Background color of the placeholder shown while loading. |
+| `contentClass` | `any` | — | no | CSS class applied to the content wrapper. |
+| `cover` | `boolean \| undefined` | — | no | Scales the image so that it covers the whole container (`object-fit: cover`). |
+| `crossorigin` | `"" \| "anonymous" \| "use-credentials" \| undefined` | — | no | Value of the `crossorigin` attribute. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `draggable` | `boolean \| "true" \| "false" \| undefined` | — | no | Controls whether the image can be dragged (the `draggable` attribute). |
+| `eager` | `boolean \| undefined` | — | no | Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO. |
+| `gradient` | `string \| undefined` | — | no | CSS gradient laid over the image. For example `'to top, rgba(0,0,0,.4), transparent'`. |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `imageClass` | `any` | — | no | CSS class applied to the inner `<img>` element. |
+| `inline` | `boolean \| undefined` | — | no | Renders the component as an inline block (`inline-flex`) instead of a block one. |
+| `lazySrc` | `string \| undefined` | — | no | Source of the low-quality placeholder image shown until the main one loads. |
+| `maxHeight` | `string \| number \| undefined` | — | no | Maximum component height |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `minHeight` | `string \| number \| undefined` | — | no | Minimum component height |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `options` | `IntersectionObserverInit \| undefined` | `{}` | no | `IntersectionObserver` options for lazy loading. |
+| `position` | `string \| undefined` | — | no | Value of `object-position` that places the image inside the container. |
+| `referrerpolicy` | `"origin" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url" \| undefined` | — | no | Value of the `referrerpolicy` attribute. |
+| `reverseTransition` | `string \| boolean \| undefined` | — | no | Transition used when the slide appears in the reverse direction. A transition component name, or `false` to turn the animation off |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `sizes` | `string \| undefined` | — | no | Value of the `sizes` attribute for responsive images. |
+| `src` | `string \| CdsImageSrcObject \| undefined` | `''` | no | Image source. A string or an object with `src`/`srcset`/`lazySrc`/`aspect`. |
+| `srcset` | `string \| undefined` | — | no | Set of image sources for different resolutions (the `srcset` attribute). |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `transition` | `string \| boolean \| undefined` | — | no | Transition used when the slide appears in the forward direction. A transition component name, or `false` to turn the animation off |
+| `value` | `any` | — | no | Value of the component within the group |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content shown over the image. |
+| `error` | `any` | Content shown when the image fails to load. |
+| `placeholder` | `any` | Content shown while the image is loading. |
+| `sources` | `any` | Extra `<source>` elements for the `<picture>` tag. |

package/skills/cds-builder/references/components/cds-carousel/examples.md

@@ -0,0 +1,444 @@
+# CdsCarousel — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+A carousel shows images or arbitrary content slide by slide: promo banners, photo galleries, onboarding steps. Arrows and delimiter dots give you navigation, autoplay flips the slides on its own, and the progress bar shows the current position.
+
+## Images
+
+`CdsCarouselItem` combines a slide and [CdsImage](../cds-image/api.md) — pass it any image prop: `src`, `alt`, `cover`, `gradient`. The `height` prop sets the height of the carousel (500 by default).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+
+const slides = [
+  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
+  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
+  { src: '/images/temp/ny.webp', alt: 'Улицы Нью-Йорка' },
+  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
+];
+</script>
+
+<template>
+  <CdsCarousel v-model="slide" height="360" class="m-auto max-w-[640px]">
+    <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
+  </CdsCarousel>
+</template>
+```
+
+## Custom content
+
+A slide does not have to be an image: put any markup into the slot of `CdsCarouselItem` and it stretches over the whole frame.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';
+
+const slides = [
+  { text: 'Первый слайд', class: 'bg-brand-primary' },
+  { text: 'Второй слайд', class: 'bg-status-progress-fill' },
+  { text: 'Третий слайд', class: 'bg-surface-inverse' }
+];
+</script>
+
+<template>
+  <CdsCarousel height="220" class="m-auto max-w-[520px]">
+    <CdsCarouselItem v-for="slide in slides" :key="slide.text">
+      <div class="flex h-full items-center justify-center text-500 text-content-on-dark" :class="slide.class">
+        {{ slide.text }}
+      </div>
+    </CdsCarouselItem>
+  </CdsCarousel>
+</template>
+```
+
+## Autoplay
+
+The `cycle` prop flips the slides automatically, `interval` sets the pause in milliseconds (6000 by default). The timer restarts after a manual switch, so the reader always has time to finish looking at a slide.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';
+
+const slides = [
+  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
+  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
+  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
+];
+</script>
+
+<template>
+  <CdsCarousel cycle :interval="3000" height="220" class="m-auto max-w-[520px]">
+    <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
+  </CdsCarousel>
+</template>
+```
+
+## Progress
+
+The `progress` prop adds a position bar at the bottom of the carousel. A string value sets its color — any of the tokens that [CdsProgressBar](../cds-progress-bar/api.md) accepts.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';
+
+const slides = [
+  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
+  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
+  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
+];
+</script>
+
+<template>
+  <div class="flex flex-wrap items-start justify-center gap-6">
+    <div class="flex flex-col items-center gap-1">
+      <CdsCarousel progress hide-delimiters height="180" class="w-[280px]">
+        <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
+      </CdsCarousel>
+      <span class="text-100 text-content-secondary">progress</span>
+    </div>
+
+    <div class="flex flex-col items-center gap-1">
+      <CdsCarousel progress="brand-primary" hide-delimiters height="180" class="w-[280px]">
+        <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
+      </CdsCarousel>
+      <span class="text-100 text-content-secondary">progress="brand-primary"</span>
+    </div>
+  </div>
+</template>
+```
+
+## Delimiters
+
+Props control the navigation dots: `hide-delimiters` removes them completely, `hide-delimiter-background` removes only the backdrop, `vertical-delimiters` (`left` / `right`) puts the dots vertically along the edge, and `delimiter-icon` changes the dot icon.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';
+
+const slides = [
+  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
+  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
+  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
+];
+</script>
+
+<template>
+  <div class="flex flex-wrap items-start justify-center gap-6">
+    <div class="flex flex-col items-center gap-1">
+      <CdsCarousel hide-delimiter-background height="180" class="w-[280px]">
+        <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
+      </CdsCarousel>
+      <span class="text-100 text-content-secondary">hide-delimiter-background</span>
+    </div>
+
+    <div class="flex flex-col items-center gap-1">
+      <CdsCarousel vertical-delimiters="right" hide-delimiter-background height="180" class="w-[280px]">
+        <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
+      </CdsCarousel>
+      <span class="text-100 text-content-secondary">vertical-delimiters="right"</span>
+    </div>
+  </div>
+</template>
+```
+
+## Delimiters
+
+The `item` slot replaces a dot with your own element: it receives the ready-made delimiter props (click handler, `aria-label`, active class) and the group item itself — all that is left is to bind them with `v-bind`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsCarousel, CdsCarouselItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+
+const slides = [
+  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
+  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
+  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
+];
+</script>
+
+<template>
+  <CdsCarousel v-model="slide" height="220" class="m-auto max-w-[520px]">
+    <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
+
+    <template #item="{ props: itemProps, item }">
+      <CdsButton
+        v-bind="itemProps"
+        size="sm"
+        :appearance="slide === item.value ? 'primary' : 'inverse'"
+        :text="String(Number(item.value) + 1)"
+      />
+    </template>
+  </CdsCarousel>
+</template>
+```
+
+## Arrows
+
+The arrow props are inherited from [CdsSlideView](../cds-slide-view/api.md): `show-arrows="hover"` shows them on hover only, `:show-arrows="false"` removes them completely, `prev-icon` / `next-icon` change the icons, and the `prev` / `next` slots replace the buttons themselves.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';
+
+const slides = [
+  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
+  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
+  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
+];
+</script>
+
+<template>
+  <CdsCarousel show-arrows="hover" height="220" class="m-auto max-w-[520px]">
+    <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
+  </CdsCarousel>
+</template>
+```
+
+## Promo banners
+
+The classic banner rotation: `cycle` with a 5 second `interval` flips the slides on its own, `progress` shows when the next one comes. The text and the button live in the slide slot, and the `gradient` from CdsImage darkens the top of the frame beneath them — so they stay readable on any image.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsCarousel, CdsCarouselItem } from '@central-design-system/components';
+
+const banners = [
+  {
+    src: '/images/temp/city.webp',
+    alt: 'Вечерний город',
+    title: 'Городские туры выходного дня',
+    text: 'Скидка 20% на все маршруты до конца месяца'
+  },
+  {
+    src: '/images/temp/villa.webp',
+    alt: 'Вилла с бассейном',
+    title: 'Виллы у моря',
+    text: 'Раннее бронирование лета — уже открыто'
+  },
+  {
+    src: '/images/temp/desert.webp',
+    alt: 'Столовые горы на закате',
+    title: 'Экспедиции в пустыню',
+    text: 'Небольшие группы, опытные гиды'
+  }
+];
+</script>
+
+<template>
+  <CdsCarousel cycle :interval="5000" progress height="280" class="m-auto max-w-[640px]">
+    <CdsCarouselItem
+      v-for="banner in banners"
+      :key="banner.src"
+      :src="banner.src"
+      :alt="banner.alt"
+      gradient="to bottom, rgba(0, 0, 0, 0.7), transparent 60%"
+      cover
+    >
+      <div class="flex w-full items-start justify-between gap-2 p-4">
+        <div>
+          <p class="text-500 font-bold text-content-on-dark">{{ banner.title }}</p>
+          <p class="text-200 text-content-on-dark">{{ banner.text }}</p>
+        </div>
+        <CdsButton text="Подробнее" size="sm" />
+      </div>
+    </CdsCarouselItem>
+  </CdsCarousel>
+</template>
+```
+
+## Gallery with thumbnails
+
+The dots are replaced by thumbnails: `hide-delimiters` removes the built-in delimiters, and a click on a thumbnail changes `v-model`. The counter next to it reads the same `v-model` — the carousel, the thumbnails and the counter always stay in sync.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCarousel, CdsCarouselItem, CdsImage } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+
+const photos = [
+  { src: '/images/temp/villa.webp', alt: 'Вилла с бассейном' },
+  { src: '/images/temp/airbnb.webp', alt: 'Гостиная с камином' },
+  { src: '/images/temp/ny.webp', alt: 'Вид на город из окна' },
+  { src: '/images/temp/wallpaper.webp', alt: 'Озеро рядом с виллой' }
+];
+</script>
+
+<template>
+  <div class="m-auto flex w-[480px] flex-col gap-2">
+    <CdsCarousel v-model="slide" hide-delimiters height="280">
+      <CdsCarouselItem v-for="photo in photos" :key="photo.src" :src="photo.src" :alt="photo.alt" cover />
+    </CdsCarousel>
+
+    <div class="flex items-center justify-between">
+      <div class="flex gap-1">
+        <button
+          v-for="(photo, index) in photos"
+          :key="photo.src"
+          type="button"
+          class="cursor-pointer overflow-hidden rounded-100 border-2 border-solid p-0"
+          :class="slide === index ? 'border-brand-primary' : 'border-transparent'"
+          :aria-label="photo.alt"
+          @click="slide = index"
+        >
+          <CdsImage :src="photo.src" :alt="''" width="56" height="42" cover />
+        </button>
+      </div>
+      <span class="text-200 text-content-secondary">{{ slide + 1 }} / {{ photos.length }}</span>
+    </div>
+  </div>
+</template>
+```
+
+## Vertical feed
+
+A stories feed in the spirit of social networks: `direction="vertical"` flips the frames top to bottom, `vertical-arrows="left"` and `vertical-delimiters="right"` pull the arrows and the dots apart to the side edges and free up the frame. The author card and the counter sit in an absolute layer above the carousel: `pointer-events-none` lets clicks through to the arrows, and a transition keyed by `v-model` swaps the card together with the slide.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsAvatar, CdsCarousel, CdsCarouselItem, CdsTag } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const slide = ref(0);
+
+const stories = [
+  {
+    src: '/images/temp/space.webp',
+    alt: 'Звёздное небо',
+    author: 'Марина Соколова',
+    followers: '31 тыс. подписчиков',
+    avatar: 'https://i.pravatar.cc/80?img=47'
+  },
+  {
+    src: '/images/temp/desert.webp',
+    alt: 'Столовые горы на закате',
+    author: 'Григорий Ковалёв',
+    followers: '412 подписчиков',
+    avatar: 'https://i.pravatar.cc/80?img=59'
+  },
+  {
+    src: '/images/temp/city.webp',
+    alt: 'Вечерний город',
+    author: 'Эмма Королёва',
+    followers: '521 подписчик',
+    avatar: 'https://i.pravatar.cc/80?img=44'
+  },
+  {
+    src: '/images/temp/cat.webp',
+    alt: 'Рыжий кот',
+    author: 'Антон Макаров',
+    followers: '6 тыс. подписчиков',
+    avatar: 'https://i.pravatar.cc/80?img=68'
+  }
+];
+
+const current = computed(() => stories[slide.value]);
+</script>
+
+<template>
+  <div class="relative m-auto max-w-[560px] overflow-hidden rounded-200">
+    <CdsCarousel
+      v-model="slide"
+      direction="vertical"
+      vertical-arrows="left"
+      vertical-delimiters="right"
+      hide-delimiter-background
+      progress
+      height="360"
+    >
+      <CdsCarouselItem v-for="story in stories" :key="story.src" :src="story.src" :alt="story.alt" cover />
+    </CdsCarousel>
+
+    <div class="pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-between py-4">
+      <Transition name="jump-transition-right" mode="out-in" appear>
+        <div :key="slide" class="flex items-center gap-2 rounded-full bg-surface-primary p-1 pr-4">
+          <CdsAvatar :image="current.avatar" />
+          <div>
+            <p class="text-200 font-bold text-content-primary">{{ current.author }}</p>
+            <p class="text-100 text-content-secondary">{{ current.followers }}</p>
+          </div>
+        </div>
+      </Transition>
+
+      <CdsTag :text="`${slide + 1} / ${stories.length}`" size="sm" />
+    </div>
+  </div>
+</template>
+```
+
+## Onboarding
+
+Product introduction steps: the arrows are off (`:show-arrows="false"`), the movement is driven by the "Back" and "Next" buttons through `v-model`. On the last step "Next" turns into a call to action.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsCarousel, CdsCarouselItem, CdsIcon } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const slide = ref(0);
+
+const steps = [
+  { icon: 'search', title: 'Ищите быстрее', text: 'Единый поиск по проектам, файлам и обсуждениям.' },
+  {
+    icon: 'notification',
+    title: 'Ничего не пропускайте',
+    text: 'Уведомления о важных событиях — там, где вам удобно.'
+  },
+  { icon: 'winner', title: 'Отмечайте прогресс', text: 'Дашборд покажет, как продвигается работа команды.' }
+];
+
+const isLast = computed(() => slide.value === steps.length - 1);
+</script>
+
+<template>
+  <div class="m-auto flex w-[420px] flex-col gap-2">
+    <CdsCarousel v-model="slide" :show-arrows="false" hide-delimiter-background height="220">
+      <CdsCarouselItem v-for="step in steps" :key="step.title">
+        <div class="flex h-full flex-col items-center justify-center gap-2 bg-surface-secondary px-8 text-center">
+          <CdsIcon :icon="step.icon" :size="32" />
+          <p class="text-400 font-bold text-content-primary">{{ step.title }}</p>
+          <p class="text-200 text-content-secondary">{{ step.text }}</p>
+        </div>
+      </CdsCarouselItem>
+    </CdsCarousel>
+
+    <div class="flex justify-between">
+      <CdsButton appearance="tertiary" text="Назад" :disabled="slide === 0" @click="slide -= 1" />
+      <CdsButton v-if="!isLast" text="Далее" @click="slide += 1" />
+      <CdsButton v-else text="Начать работу" @click="slide = 0" />
+    </div>
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-carousel/guidelines.md

@@ -0,0 +1,10 @@
+# CdsCarousel — guidelines
+
+> Extracted from `docs/demos/Guidelines.vue` by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md).
+
+| ✅ Do | ❌ Don't |
+| --- | --- |
+| Images with cover fill the whole slide — the carousel looks solid. | Without cover the image leaves empty margins, and the frame height jumps from slide to slide. |
+| Up to 5–7 slides: the dots stay readable and you can tell how many are left. | A dozen and a half slides blur into a strip of dots — nobody scrolls through to the important content. |
+| Text over an image sits on a gradient — it reads on any frame. | Text without a backdrop gets lost on a busy image. |

package/skills/cds-builder/references/components/cds-carousel/tokens.md

@@ -0,0 +1,17 @@
+# CdsCarousel — tokens (level 3)
+
+> Copy of the component's `styles/*.variables.scss`, taken by `bun run generate:skill`. Do not edit manually.
+> `--cds-*` are global level-2 tokens whose values come from the active theme: see [themes.md](../../tokens/themes.md).
+> Variables marked `!default` can be overridden at build time via SCSS.
+
+## _CdsCarousel.variables.scss
+
+```scss
+$carousel-controls-size: 50px !default;
+$carousel-controls-background: rgb(var(--cds-color-surface-overlay)) !default;
+$carousel-controls-color: rgb(var(--cds-color-content-on-dark)) !default;
+$carousel-dot-margin: 0 var(--cds-spacing-100) !default;
+$carousel-dot-inactive-opacity: 0.5 !default;
+$carousel-dot-active-opacity: 1 !default;
+$carousel-dot-hover-opacity: 0.8 !default;
+```