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

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

@@ -0,0 +1,32 @@
+# CdsBadge — 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.
+
+## _CdsBadge.variables.scss
+
+```scss
+@use '../../../styles/tools';
+@use '../../../styles/settings';
+
+// Default
+$badge-background: rgb(var(--cds-color-status-indication-surface)) !default;
+$badge-color: rgb(var(--cds-color-content-inverse)) !default;
+$badge-line-height: 1 !default;
+$badge-font-size: var(--cds-font-size-100) !default;
+$badge-border-radius: 10px !default;
+$badge-wrapper-margin: 0 !default;
+$badge-min-width: tools.to-rem(16px) !default;
+$badge-height: tools.to-rem(16px) !default;
+$badge-padding: 0 var(--cds-spacing-100) !default;
+$badge-icon-padding: var(--cds-spacing-50) var(--cds-spacing-200) !default;
+$badge-transition: .225s settings.$standard-easing !default;
+$badge-gap: var(--cds-spacing-50) !default;
+$badge-inline-vertical-align: middle !default;
+
+// Dot
+$badge-dot-border-radius: 50% !default;
+$badge-dot-height: tools.to-rem(8px) !default;
+$badge-dot-width: tools.to-rem(8px) !default;
+```

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

@@ -0,0 +1,83 @@
+# CdsBreadcrumbs — 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)
+
+Breadcrumbs show the path to the current page in the hierarchy of sections and take you back to any level above in one click. The list is built from the `items` array or by hand — from `CdsBreadcrumbsItem` and `CdsBreadcrumbsDivider`.
+
+Family: [CdsBreadcrumbs](#cdsbreadcrumbs) + subcomponents: [CdsBreadcrumbsDivider](#cdsbreadcrumbsdivider), [CdsBreadcrumbsItem](#cdsbreadcrumbsitem).
+
+## CdsBreadcrumbs
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeClass` | `string \| undefined` | — | no | Class applied to the component when it is in the active state |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `color` | `string \| undefined` | — | no | Component color |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `divider` | `string \| undefined` | `'/'` | no | Divider between the child components |
+| `icon` | `IconValue \| undefined` | — | no | Icon displayed next to the component |
+| `items` | `readonly BreadcrumbItem[] \| undefined` | `[]` | no | Array of strings or objects used to build the child components automatically |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'ul'` | no | Custom HTML tag or component to render |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Default content |
+| `divider` | `{ item: BreadcrumbItem; index: number; }` | Divider content between the items; can be overridden for each item |
+| `item` | `{ item: InternalBreadcrumbItem; index: number; }` | Item content; can be overridden for each item |
+| `prepend` | `any` | Content at the start |
+| `title` | `{ item: InternalBreadcrumbItem; index: number; }` | Content inside each item; can be overridden for each item |
+
+---
+
+## CdsBreadcrumbsDivider
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `divider` | `string \| number \| undefined` | — | no | Divider |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Default content |
+
+---
+
+## CdsBreadcrumbsItem
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `active` | `boolean \| undefined` | — | no | Active state of the component; usually marks the current page in the navigation |
+| `activeClass` | `string \| undefined` | — | no | Class applied to the component when it is in the active state |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `color` | `string \| undefined` | — | no | Component color |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `exact` | `boolean \| undefined` | — | no | If true, the active state applies only on an exact route match |
+| `href` | `string \| undefined` | — | no | The `href` attribute of the link. When set, the component behaves as a regular link |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `replace` | `boolean \| undefined` | — | no | If true, navigation replaces the current history entry instead of pushing a new one |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'li'` | no | Custom HTML tag or component to render |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `title` | `string \| undefined` | — | no | Item title displayed in the component |
+| `to` | `LinkTo \| undefined` | — | no | Target route or route location object for RouterLink. When set, the component behaves as a RouterLink |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Default content |

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

@@ -0,0 +1,219 @@
+# CdsBreadcrumbs — 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.
+
+Breadcrumbs show the path to the current page in the hierarchy of sections and take you back to any level above in one click. The list is built from the `items` array or by hand — from `CdsBreadcrumbsItem` and `CdsBreadcrumbsDivider`.
+
+## Items
+
+The `items` array builds the breadcrumbs automatically: a string turns into text, an object turns into a link with `href` or `to`. The component marks the last item as the current page itself: it disables the link and paints it in a neutral color.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsBreadcrumbs } from '@central-design-system/components';
+
+const items = [
+  { title: 'Главная', href: '#' },
+  { title: 'Каталог', href: '#' },
+  { title: 'Оргтехника', href: '#' },
+  { title: 'Принтеры' }
+];
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsBreadcrumbs :items="items" />
+  </div>
+</template>
+```
+
+## Divider
+
+By default the items are separated by `/`. The `divider` prop replaces the character, and the `divider` slot replaces the whole markup — with a chevron icon, for example.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsBreadcrumbs, CdsIcon } from '@central-design-system/components';
+
+const items = [{ title: 'Главная', href: '#' }, { title: 'Документы', href: '#' }, { title: 'Отчёт за июль' }];
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <CdsBreadcrumbs :items="items" divider="→" />
+
+    <CdsBreadcrumbs :items="items">
+      <template #divider>
+        <CdsIcon icon="chevron-right" :size="16" />
+      </template>
+    </CdsBreadcrumbs>
+  </div>
+</template>
+```
+
+## Icon
+
+The `icon` prop renders an icon before the list — a sign of the root section, for example. The `prepend` slot replaces it with arbitrary content.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsBreadcrumbs } from '@central-design-system/components';
+
+const items = [{ title: 'Главная', href: '#' }, { title: 'Настройки', href: '#' }, { title: 'Профиль' }];
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsBreadcrumbs :items="items" icon="workspace" />
+  </div>
+</template>
+```
+
+## Slots
+
+Slots override parts of the list without giving up the automatic assembly from `items`. The `title`, `divider` and `item` slots receive `item` and `index`, so the content can be changed for every item separately.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsBreadcrumbs, CdsIcon } from '@central-design-system/components';
+
+const items = [{ title: 'Главная', href: '#' }, { title: 'Проекты', href: '#' }, { title: 'Редизайн сайта' }];
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsBreadcrumbs :items="items">
+      <template #title="{ item, index }">
+        <CdsIcon v-if="index === 0" icon="workspace" :size="16" start />
+        {{ item.title }}
+      </template>
+    </CdsBreadcrumbs>
+  </div>
+</template>
+```
+
+## Manual assembly
+
+When the path is not described by a flat array — you need your own handlers or non-standard items — build the list in the `default` slot from `CdsBreadcrumbsItem` and `CdsBreadcrumbsDivider`. Mark the current page with `disabled`, and limit a long title with `max-width` — the text is truncated with an ellipsis.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsBreadcrumbs, CdsBreadcrumbsDivider, CdsBreadcrumbsItem } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsBreadcrumbs>
+      <CdsBreadcrumbsItem href="#">Главная</CdsBreadcrumbsItem>
+      <CdsBreadcrumbsDivider />
+      <CdsBreadcrumbsItem href="#" max-width="140">Документы отдела продаж</CdsBreadcrumbsItem>
+      <CdsBreadcrumbsDivider />
+      <CdsBreadcrumbsItem disabled>Отчёт за июль</CdsBreadcrumbsItem>
+    </CdsBreadcrumbs>
+  </div>
+</template>
+```
+
+## Section navigation
+
+Breadcrumbs lead the user through the catalog tree: links in the list open deeper sections, a click on a crumb returns one level up. In an application with vue-router, pass `to` to the items instead of handlers — the navigation and the active state of the link work on their own.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsBreadcrumbs, CdsBreadcrumbsDivider, CdsBreadcrumbsItem, CdsLink } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+interface Section {
+  title: string;
+  children?: Section[];
+}
+
+const catalog: Section = {
+  title: 'Каталог',
+  children: [
+    {
+      title: 'Офисная техника',
+      children: [{ title: 'Принтеры' }, { title: 'Мониторы' }]
+    },
+    {
+      title: 'Мебель',
+      children: [{ title: 'Столы' }, { title: 'Кресла' }]
+    },
+    { title: 'Канцтовары' }
+  ]
+};
+
+const path = ref<Section[]>([catalog]);
+
+const current = computed(() => path.value[path.value.length - 1]);
+
+const open = (section: Section) => path.value.push(section);
+const goTo = (index: number) => (path.value = path.value.slice(0, index + 1));
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-3 m-auto">
+    <CdsBreadcrumbs>
+      <template v-for="(section, index) in path" :key="section.title">
+        <CdsBreadcrumbsDivider v-if="index > 0" />
+        <CdsBreadcrumbsItem v-if="index < path.length - 1" href="#" @click.prevent="goTo(index)">
+          {{ section.title }}
+        </CdsBreadcrumbsItem>
+        <CdsBreadcrumbsItem v-else disabled>{{ section.title }}</CdsBreadcrumbsItem>
+      </template>
+    </CdsBreadcrumbs>
+
+    <ul class="m-0 flex list-none flex-col gap-1 p-0">
+      <li v-for="child in current.children" :key="child.title">
+        <CdsLink href="#" :text="child.title" @click.prevent="open(child)" />
+      </li>
+      <li v-if="!current.children">В разделе «{{ current.title }}» пока пусто — вернитесь по крошкам выше.</li>
+    </ul>
+  </div>
+</template>
+```
+
+## Long path
+
+Collapse a deep hierarchy down to the first level, an ellipsis and the last two steps — the path stays on a single line. A click on the ellipsis expands the full list.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsBreadcrumbs, CdsBreadcrumbsDivider, CdsBreadcrumbsItem } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const path = ['Главная', 'Документы', 'Договоры', '2026', 'Поставщики', 'Договор № 114'];
+
+const expanded = ref(false);
+
+const visible = computed(() => (expanded.value ? path : [path[0], '…', ...path.slice(-2)]));
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsBreadcrumbs>
+      <template v-for="(title, index) in visible" :key="title">
+        <CdsBreadcrumbsDivider v-if="index > 0" />
+        <CdsBreadcrumbsItem v-if="title === '…'" href="#" title="…" @click.prevent="expanded = true" />
+        <CdsBreadcrumbsItem v-else-if="index < visible.length - 1" href="#" :title="title" @click.prevent />
+        <CdsBreadcrumbsItem v-else disabled :title="title" />
+      </template>
+    </CdsBreadcrumbs>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsBreadcrumbs — 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 |
+| --- | --- |
+| The last item is the current page: no link, neutral color. | The current page is styled as a link — clicking it leads nowhere and confuses the reader. |
+| Short level names — the path reads at a glance. | Full page titles stretch the path and wrap onto several lines. |
+| With a single level of nesting, a link back to the parent is enough. | Breadcrumbs of two items do not help you navigate and just take up space. |

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

@@ -0,0 +1,24 @@
+# CdsBreadcrumbs — 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.
+
+## _CdsBreadcrumbs.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$breadcrumbs-gap: var(--cds-spacing-200) !default;
+$breadcrumbs-padding: 0 !default;
+$breadcrumbs-margin: 0 !default;
+$breadcrumbs-vertical-align: middle !default;
+$breadcrumbs-item-link-text-decoration: underline !default;
+
+// Colors
+$breadcrumbs-colors: (
+  'content': rgb(var(--cds-color-content-primary)),
+  'link': rgb(var(--cds-color-content-link)),
+  'divider': rgb(var(--cds-color-content-primary)),
+) !default;
+```

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

@@ -0,0 +1,66 @@
+# CdsButton — 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 button is the primary way to trigger an action: submit a form, open a modal, confirm a choice. Its appearance signals the role it plays: `primary` is the main action on the screen, `secondary` and `tertiary` are the supporting ones.
+
+## CdsButton
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `active` | `boolean \| undefined` | — | no | Controls the active state of the component |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `appearance` | `"primary" \| "secondary" \| "tertiary" \| "inverse" \| undefined` | `'primary'` | no | Visual appearance of the component |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon in the append slot, after the content |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `block` | `boolean \| undefined` | — | no | Stretches the button to the full width of its container |
+| `color` | `string \| undefined` | — | no | Component color |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `exact` | `boolean \| undefined` | — | no | If true, the active state applies only on an exact route match |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `href` | `string \| undefined` | — | no | The `href` attribute of the link. When set, the component behaves as a regular link |
+| `icon` | `boolean \| IconValue \| undefined` | — | no | Icon to display; the component renders as an icon-only button |
+| `loading` | `string \| boolean \| undefined` | — | no | Loading indicator for the component |
+| `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 |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon in the prepend slot, before the content |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `replace` | `boolean \| undefined` | — | no | If true, navigation replaces the current history entry instead of pushing a new one |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `spaced` | `"both" \| "start" \| "end" \| undefined` | — | no | Pushes the prepend and append slots apart to the edges of the button. |
+| `stacked` | `boolean \| undefined` | — | no | Stacks the icon above the text instead of placing them side by side |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'button'` | no | Custom HTML tag or component to render |
+| `text` | `string \| number \| undefined` | — | no | Text displayed in the component. |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `to` | `LinkTo \| undefined` | — | no | Target route or route location object for RouterLink. When set, the component behaves as a RouterLink |
+| `value` | `any` | — | no | Value of the component within the group |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `group:selected` | `[value: { value: boolean; }]` | Fires when the button is selected inside a group. `value` is a boolean that tells whether the button is now selected (true) or not (false). |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `any` | Content after the text |
+| `default` | `any` | Content inside the button |
+| `loader` | `any` | Loading indicator |
+| `prepend` | `any` | Content before the text |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `group` | `GroupItemProvide \| null` | Returns the current group context when the button is used inside a group component (for example, CdsButtonGroup). |