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

package/skills/cds-builder/references/components/cds-radio-group/examples.md

@@ -0,0 +1,320 @@
+# CdsRadioGroup — 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 radio group is a choice of one option out of a short mutually exclusive set: a payment method, a plan, a report period. The group keeps the selected value, captions the set with a heading and a description, shows messages and errors; the options themselves are [CdsRadio](../cds-radio/api.md) components with their own `value`.
+
+## Heading and description
+
+The `label` prop names the group, `description` explains the choice. Every button has its own `label` and `description`: name the option briefly in the label and move the details — the price, the deadlines, the limits — into the description.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const delivery = ref('pickup');
+</script>
+
+<template>
+  <div class="w-[350px] m-auto">
+    <CdsRadioGroup v-model="delivery" label="Способ получения" description="Изменить способ можно до отправки заказа">
+      <CdsRadio value="pickup" label="Самовывоз" description="Бесплатно, завтра из пункта выдачи" />
+      <CdsRadio value="courier" label="Курьер" description="Завтра с 10:00 до 18:00, 300 ₽" />
+      <CdsRadio value="post" label="Почта" description="5–7 дней, 250 ₽" />
+    </CdsRadioGroup>
+  </div>
+</template>
+```
+
+## Direction
+
+By default the buttons are stacked in a column. `direction="horizontal"` puts them in a row — handy for short sets of two or three options such as a period or a sort order.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const vertical = ref('year');
+const horizontal = ref('year');
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 w-[350px] m-auto">
+    <CdsRadioGroup v-model="vertical" label="Вертикально — по умолчанию" hide-details>
+      <CdsRadio value="year" label="Год" />
+      <CdsRadio value="quarter" label="Квартал" />
+      <CdsRadio value="month" label="Месяц" />
+    </CdsRadioGroup>
+
+    <CdsRadioGroup v-model="horizontal" label="Горизонтально" direction="horizontal" hide-details>
+      <CdsRadio value="year" label="Год" />
+      <CdsRadio value="quarter" label="Квартал" />
+      <CdsRadio value="month" label="Месяц" />
+    </CdsRadioGroup>
+  </div>
+</template>
+```
+
+## States
+
+`disabled` blocks the whole group and lowers the contrast, `readonly` forbids changing the choice but does not change the appearance. A single option is blocked by the `disabled` prop of the button itself.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const payment = ref('card');
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 w-[350px] m-auto">
+    <CdsRadioGroup model-value="card" label="Disabled" disabled hide-details>
+      <CdsRadio value="card" label="Картой онлайн" />
+      <CdsRadio value="invoice" label="По счёту" />
+    </CdsRadioGroup>
+
+    <CdsRadioGroup model-value="card" label="Readonly" readonly hide-details>
+      <CdsRadio value="card" label="Картой онлайн" />
+      <CdsRadio value="invoice" label="По счёту" />
+    </CdsRadioGroup>
+
+    <CdsRadioGroup v-model="payment" label="Заблокирована одна кнопка" hide-details>
+      <CdsRadio value="card" label="Картой онлайн" />
+      <CdsRadio value="invoice" label="По счёту" />
+      <CdsRadio value="cash" label="Наличными при получении" disabled />
+    </CdsRadioGroup>
+  </div>
+</template>
+```
+
+## Messages and errors
+
+`messages` shows a supporting text under the group, `error-messages` — a ready error message (the one coming from the server, for example) together with the error state on all the buttons. Validation rules through `rules` are in the "Submitting a form" scenario. `hide-details` removes the bottom block entirely.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const format = ref('pdf');
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 w-[350px] m-auto">
+    <CdsRadioGroup v-model="format" label="Формат выгрузки" messages="Файл придёт на почту после формирования">
+      <CdsRadio value="pdf" label="PDF" />
+      <CdsRadio value="xlsx" label="Excel" />
+    </CdsRadioGroup>
+
+    <CdsRadioGroup label="Способ оплаты" error-messages="Выберите способ оплаты">
+      <CdsRadio value="card" label="Картой онлайн" />
+      <CdsRadio value="invoice" label="По счёту" />
+    </CdsRadioGroup>
+  </div>
+</template>
+```
+
+## Colors
+
+`color` sets the color of the selected button, `base-color` — of the unselected ones. The values apply to all the buttons of the group at once.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 w-[350px] m-auto">
+    <CdsRadioGroup model-value="first" color="green" label="Зелёный при выборе (color)" hide-details>
+      <CdsRadio value="first" label="Выбранный вариант" />
+      <CdsRadio value="second" label="Невыбранный вариант" />
+    </CdsRadioGroup>
+
+    <CdsRadioGroup base-color="purple" label="Фиолетовый до выбора (base-color)" hide-details>
+      <CdsRadio value="first" label="Первый вариант" />
+      <CdsRadio value="second" label="Второй вариант" />
+    </CdsRadioGroup>
+  </div>
+</template>
+```
+
+## Slots
+
+`CdsRadio` has its own `label` and `description` slots — to highlight a part of the text or add an icon, for example.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const channel = ref('email');
+</script>
+
+<template>
+  <div class="w-[350px] m-auto">
+    <CdsRadioGroup v-model="channel">
+      <template #label>
+        <div>Уведомления о <span class="text-status-success-content font-bold">новых заказах</span></div>
+      </template>
+      <template #description>
+        <div>Канал можно поменять в настройках <cds-icon name="settings" /></div>
+      </template>
+      <CdsRadio value="email">
+        <template #label>Электронная почта</template>
+      </CdsRadio>
+      <CdsRadio value="telegram">
+        <template #label>Telegram</template>
+        <template #description>Сообщения приходят мгновенно</template>
+      </CdsRadio>
+    </CdsRadioGroup>
+  </div>
+</template>
+```
+
+## Submitting a form
+
+The choice is required: a rule in `rules` returns the error text while no value is selected. The button starts the check through the `validate()` of the [CdsForm](../cds-form/api.md).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsForm, CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+import { ref, unref } from 'vue';
+
+const payment = ref<string | null>(null);
+const sending = ref(false);
+const formRef = ref<InstanceType<typeof CdsForm>>();
+
+const rules = [(value: string | null) => !!value || 'Выберите способ оплаты'];
+
+async function submit() {
+  const form = unref(formRef);
+  if (!form) return;
+
+  const { valid } = await form.validate();
+  if (!valid) return;
+
+  sending.value = true;
+  setTimeout(() => {
+    sending.value = false;
+  }, 1500);
+}
+</script>
+
+<template>
+  <CdsForm ref="formRef" class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsRadioGroup v-model="payment" :rules="rules" label="Способ оплаты">
+      <CdsRadio value="card" label="Картой онлайн" />
+      <CdsRadio value="invoice" label="По счёту" description="Для юридических лиц" />
+      <CdsRadio value="cash" label="Наличными при получении" />
+    </CdsRadioGroup>
+
+    <CdsButton text="Оформить заказ" :loading="sending" @click="submit" />
+  </CdsForm>
+</template>
+```
+
+## Choosing a plan
+
+The descriptions of the buttons state the conditions, and the computed total under the group is updated on every choice — the user sees the consequences right away.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const tariffs = [
+  { value: 'start', label: 'Старт', description: '5 пользователей и базовые отчёты', price: 0 },
+  { value: 'business', label: 'Бизнес', description: '50 пользователей, отчёты и интеграции', price: 4900 },
+  { value: 'corp', label: 'Корпорация', description: 'Без ограничений, персональный менеджер', price: 19900 }
+];
+
+const selected = ref('business');
+
+const total = computed(() => {
+  const tariff = tariffs.find((item) => item.value === selected.value);
+  return tariff && tariff.price > 0 ? `${tariff.price.toLocaleString('ru-RU')} ₽/мес` : 'бесплатно';
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsRadioGroup v-model="selected" label="Тариф" hide-details>
+      <CdsRadio
+        v-for="tariff in tariffs"
+        :key="tariff.value"
+        :value="tariff.value"
+        :label="tariff.label"
+        :description="tariff.description"
+      />
+    </CdsRadioGroup>
+
+    <div>
+      Итого: <span class="font-bold">{{ total }}</span>
+    </div>
+  </div>
+</template>
+```
+
+## Sorting a list
+
+A horizontal group with `hide-details` works as a sorting panel: the selected value rebuilds the list on the fly through a computed.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsList, CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const products = [
+  { name: 'Монитор', price: 25400, added: '2026-05-14' },
+  { name: 'Ноутбук', price: 82000, added: '2026-07-02' },
+  { name: 'Клавиатура', price: 4300, added: '2026-06-20' },
+  { name: 'Док-станция', price: 11900, added: '2026-04-08' }
+];
+
+const sort = ref('new');
+
+const items = computed(() =>
+  [...products]
+    .sort((a, b) => {
+      if (sort.value === 'cheap') return a.price - b.price;
+      if (sort.value === 'name') return a.name.localeCompare(b.name);
+      return b.added.localeCompare(a.added);
+    })
+    .map((product) => ({ title: `${product.name} — ${product.price.toLocaleString('ru-RU')} ₽` }))
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsRadioGroup v-model="sort" label="Сортировка" direction="horizontal" hide-details>
+      <CdsRadio value="new" label="Сначала новые" />
+      <CdsRadio value="cheap" label="Дешевле" />
+      <CdsRadio value="name" label="По алфавиту" />
+    </CdsRadioGroup>
+
+    <CdsList :items="items" />
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-radio-group/guidelines.md

@@ -0,0 +1,10 @@
+# CdsRadioGroup — 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 |
+| --- | --- |
+| Radio buttons are for mutually exclusive options: exactly one can be selected. | Radio buttons do not fit independent options that are turned on together — use checkboxes. |
+| Preselect a default option — usually the most common or the safest one. | A group with no selected value makes the user guess what the form will submit if nothing is picked. |
+| Up to five options — radio buttons: the whole set is visible and the choice takes one click. | A long list bloats the form — fold it into CdsSelect. |

package/skills/cds-builder/references/components/cds-radio-group/tokens.md

@@ -0,0 +1,14 @@
+# CdsRadioGroup — 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.
+
+## _CdsRadioGroup.variables.scss
+
+```scss
+@use "../../../styles/tools";
+
+$radio-group-gap-vertical: var(--cds-spacing-100) !default;
+$radio-group-gap-horizontal: var(--cds-spacing-300) !default;
+```

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

@@ -0,0 +1,29 @@
+# CdsResponsive — 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 frame with constant proportions. Set `aspect-ratio` and the height of the block is calculated from its width on any screen. Anything that needs a fixed shape goes inside: a video, a map, an `iframe`, a category tile. The space for the content is taken right away, so the layout does not jump while it loads.
+
+## CdsResponsive
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `aspectRatio` | `string \| number \| undefined` | — | no | Aspect ratio of the content. For example `1.7778` (16/9) or `'4/3'`. |
+| `contentClass` | `any` | — | no | CSS class applied to the content wrapper. |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `inline` | `boolean \| undefined` | — | no | Renders the component as an inline block (`inline-flex`) instead of a block one. |
+| `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 |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `additional` | `any` | Extra content rendered on top of the sizer, outside the content wrapper. |
+| `default` | `any` | The main content of the component, wrapped so the aspect ratio is kept. |

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

@@ -0,0 +1,271 @@
+# CdsResponsive — 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 frame with constant proportions. Set `aspect-ratio` and the height of the block is calculated from its width on any screen. Anything that needs a fixed shape goes inside: a video, a map, an `iframe`, a category tile. The space for the content is taken right away, so the layout does not jump while it loads.
+
+## Aspect ratio
+
+The `aspect-ratio` prop accepts a fraction (`16/9`) or a number (`1.7778`). The width comes from the parent, the height is calculated by the component itself — and recalculated on every change of the width. The calculated height works as a minimum: content that does not fit into it stretches the frame and breaks the proportions.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsResponsive } from '@central-design-system/components';
+
+const ratios = ['16/9', '4/3', '1'];
+</script>
+
+<template>
+  <div class="flex flex-wrap items-start justify-center gap-4">
+    <div v-for="ratio in ratios" :key="ratio" class="w-[180px]">
+      <CdsResponsive :aspect-ratio="ratio">
+        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
+          {{ ratio }}
+        </div>
+      </CdsResponsive>
+    </div>
+  </div>
+</template>
+```
+
+## Sizes
+
+By default the frame takes the whole width of its parent. The `width`, `max-width` and `min-width` props limit it, and `height`, `max-height` and `min-height` limit its height; numbers turn into pixels, strings go into CSS as they are.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsResponsive } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[420px] flex-col gap-4">
+    <div>
+      <CdsResponsive aspect-ratio="16/9">
+        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
+          Во всю ширину родителя
+        </div>
+      </CdsResponsive>
+    </div>
+
+    <div>
+      <CdsResponsive aspect-ratio="16/9" max-width="260">
+        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
+          max-width 260
+        </div>
+      </CdsResponsive>
+    </div>
+
+    <div>
+      <CdsResponsive aspect-ratio="16/9" width="160">
+        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
+          width 160
+        </div>
+      </CdsResponsive>
+    </div>
+  </div>
+</template>
+```
+
+## Layout
+
+The `inline` prop turns the frame into `inline-flex` — it stops stretching and stands in a row with its neighbors. Set the width yourself in this case: it will not take it from the content.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsResponsive } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[360px] flex-col gap-4">
+    <div>
+      <CdsResponsive aspect-ratio="4/1">
+        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
+          Блочный
+        </div>
+      </CdsResponsive>
+    </div>
+
+    <div class="flex flex-wrap gap-4">
+      <CdsResponsive inline aspect-ratio="4/1" width="160">
+        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
+          inline
+        </div>
+      </CdsResponsive>
+
+      <CdsResponsive inline aspect-ratio="4/1" width="120">
+        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
+          inline
+        </div>
+      </CdsResponsive>
+    </div>
+  </div>
+</template>
+```
+
+## Slots
+
+The `content-class` prop puts classes on the wrapper of the `default` slot — that is how the inner paddings and the layout are set. The root of the component is positioned (`position: relative`), so the elements from `additional` can be placed absolutely relative to the frame.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsResponsive } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto w-[360px]">
+    <CdsResponsive aspect-ratio="16/9" class="rounded-200" content-class="flex items-end p-3">
+      <template #additional>
+        <div class="absolute inset-0 bg-surface-secondary" />
+        <span class="absolute right-3 top-3 rounded-200 bg-brand-primary px-2 py-1 text-xs text-content-on-dark">
+          02:14
+        </span>
+      </template>
+
+      <p class="text-content-primary">Подпись поверх подложки</p>
+    </CdsResponsive>
+  </div>
+</template>
+```
+
+## An embedded map or video
+
+Maps and video players arrive in an `iframe` with proportions of their own. Wrap the `iframe` into a `CdsResponsive` with the right `aspect-ratio` and stretch it with the `h-full w-full` classes — the player will look the same on a wide monitor and on a phone.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsResponsive } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto w-full max-w-[480px]">
+    <CdsResponsive aspect-ratio="16/9" class="rounded-200">
+      <div
+        class="flex h-full flex-col items-center justify-center gap-2 bg-surface-secondary text-content-secondary"
+        role="img"
+        aria-label="Карта офиса"
+      >
+        <CdsIcon icon="location" size="lg" />
+        <span class="text-sm">Здесь будет карта — iframe на всю рамку</span>
+      </div>
+    </CdsResponsive>
+  </div>
+</template>
+```
+
+## A grid of tiles
+
+In a grid of categories the tiles have to be square regardless of the length of the caption. The `aspect-ratio="1"` value gives a square, and the width of every tile comes from the grid column — the number of columns changes the size, not the shape.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsResponsive } from '@central-design-system/components';
+
+const categories = [
+  { icon: 'truck', title: 'Логистика' },
+  { icon: 'tool', title: 'Оборудование' },
+  { icon: 'doc', title: 'Услуги' },
+  { icon: 'education', title: 'Обучение' }
+];
+</script>
+
+<template>
+  <div class="m-auto grid w-full max-w-[480px] grid-cols-2 gap-4 sm:grid-cols-4">
+    <CdsResponsive v-for="category in categories" :key="category.title" aspect-ratio="1" class="rounded-200">
+      <button
+        type="button"
+        class="flex h-full w-full flex-col items-center justify-center gap-2 border-0 bg-surface-secondary text-content-secondary"
+      >
+        <CdsIcon :icon="category.icon" size="lg" />
+        <span class="text-sm">{{ category.title }}</span>
+      </button>
+    </CdsResponsive>
+  </div>
+</template>
+```
+
+## Space for a widget while it loads
+
+A report, a chart or a map arrives from the server a second or two later. A frame with proportions takes their place right away: while the loader spins inside, the caption and the buttons below the widget stay exactly where they will end up after the loading.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsLoader, CdsResponsive } from '@central-design-system/components';
+import { onMounted, ref } from 'vue';
+
+const loading = ref(true);
+
+const load = () => {
+  loading.value = true;
+
+  setTimeout(() => {
+    loading.value = false;
+  }, 2000);
+};
+
+onMounted(load);
+</script>
+
+<template>
+  <div class="m-auto flex w-full max-w-[420px] flex-col gap-3">
+    <CdsResponsive aspect-ratio="16/9" class="rounded-200">
+      <div class="flex h-full items-center justify-center bg-surface-secondary text-content-secondary">
+        <CdsLoader v-if="loading" description="Загружаем отчёт" />
+        <span v-else class="text-sm">Отчёт за июль: 128 закупок</span>
+      </div>
+    </CdsResponsive>
+
+    <p class="text-sm text-content-secondary">Подпись под виджетом остаётся на месте всё время загрузки.</p>
+
+    <CdsButton class="self-start" appearance="tertiary" text="Загрузить заново" :disabled="loading" @click="load" />
+  </div>
+</template>
+```
+
+## Switching the proportions
+
+The `aspect-ratio` value is reactive and the change of the height is animated — a crop switcher does not jerk the neighboring blocks.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonToggle, CdsResponsive } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const ratios = ['16/9', '4/3', '1'];
+const selected = ref(0);
+
+const ratio = computed(() => ratios[selected.value]);
+</script>
+
+<template>
+  <div class="m-auto flex w-full max-w-[420px] flex-col items-center gap-4">
+    <CdsButtonToggle v-model="selected" appearance="tertiary" mandatory>
+      <CdsButton v-for="item in ratios" :key="item" :text="item" />
+    </CdsButtonToggle>
+
+    <div class="w-full">
+      <CdsResponsive :aspect-ratio="ratio" class="rounded-200">
+        <div class="flex h-full items-center justify-center bg-surface-secondary text-content-secondary">
+          {{ ratio }}
+        </div>
+      </CdsResponsive>
+    </div>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsResponsive — 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 proportions are set in advance — the space for the widget is taken and the text below it is already in place. | A placeholder shorter than the future widget: when it arrives, everything below jumps down. |
+| For images take CdsImage — it can do proportions, lazy loading and a placeholder. | An img tag inside CdsResponsive repeats CdsImage by hand and stays without lazy loading. |
+| The content is stretched to the full height of the frame — the proportions hold. | Content taller than the frame stretches it: the set proportions are lost and the neighboring blocks stop lining up. |

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

@@ -0,0 +1,13 @@
+# CdsResponsive — 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.
+
+## _CdsResponsive.variables.scss
+
+```scss
+@use '../../../styles/settings';
+
+$responsive-sizer-transition: padding-bottom 0.2s settings.$standard-easing !default;
+```