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

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

@@ -0,0 +1,349 @@
+# CdsSelectionControlGroup — 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 container for a set of selection controls: it holds the shared value, hands the nested [CdsSelectionControl](../cds-selection-control/api.md) the type, the icons, the colors and the states, and ties them together with a single `name` attribute. The radio button group of the design system is built on it.
+
+## Shared model and type
+
+The value of the selected control is held by the group: `v-model` is on it, every nested control only has its own `value`. The `type`, `true-icon` and `false-icon` props are handed by the group to all the controls, and the shared `name` attribute for the native `input` elements is created by the group itself — it can be overridden with the `name` prop.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl, CdsSelectionControlGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const delivery = ref('courier');
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsSelectionControlGroup v-model="delivery" type="radio" true-icon="radio-on" false-icon="radio-off">
+      <CdsSelectionControl value="courier" label="Курьером" class="gap-x-2" />
+      <CdsSelectionControl value="pickup" label="Самовывоз" class="gap-x-2" />
+      <CdsSelectionControl value="post" label="Почтой" class="gap-x-2" />
+    </CdsSelectionControlGroup>
+
+    <span class="text-content-secondary">Значение модели: {{ delivery }}</span>
+  </div>
+</template>
+```
+
+## Multiple selection
+
+An array in the model turns on `multiple` mode: every control adds its `value` to it. The mode is turned on automatically — the `multiple` prop is needed only to set it by hand.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl, CdsSelectionControlGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const channels = ref(['email']);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsSelectionControlGroup
+      v-model="channels"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      direction="vertical"
+    >
+      <CdsSelectionControl value="email" label="Почта" class="gap-x-2" />
+      <CdsSelectionControl value="sms" label="SMS" class="gap-x-2" />
+      <CdsSelectionControl value="push" label="Push-уведомления" class="gap-x-2" />
+    </CdsSelectionControlGroup>
+
+    <span class="text-content-secondary">Значение модели: {{ channels }}</span>
+  </div>
+</template>
+```
+
+## Direction
+
+By default the controls line up in a row and split the width of the group evenly. `direction="vertical"` puts them in a column — handier for long captions and for sets with descriptions.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl, CdsSelectionControlGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const horizontal = ref('year');
+const vertical = ref('year');
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-content-secondary">Горизонтально — по умолчанию</span>
+
+      <CdsSelectionControlGroup v-model="horizontal" type="radio" true-icon="radio-on" false-icon="radio-off">
+        <CdsSelectionControl value="year" label="Год" class="gap-x-2" />
+        <CdsSelectionControl value="quarter" label="Квартал" class="gap-x-2" />
+        <CdsSelectionControl value="month" label="Месяц" class="gap-x-2" />
+      </CdsSelectionControlGroup>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <span class="text-content-secondary">Вертикально</span>
+
+      <CdsSelectionControlGroup
+        v-model="vertical"
+        direction="vertical"
+        type="radio"
+        true-icon="radio-on"
+        false-icon="radio-off"
+      >
+        <CdsSelectionControl value="year" label="Год" class="gap-x-2" />
+        <CdsSelectionControl value="quarter" label="Квартал" class="gap-x-2" />
+        <CdsSelectionControl value="month" label="Месяц" class="gap-x-2" />
+      </CdsSelectionControlGroup>
+    </div>
+  </div>
+</template>
+```
+
+## States
+
+`disabled` blocks the whole group, `readonly` forbids changing the selection without changing the look, `error` puts every control into the error state. A single option is blocked by the `disabled` prop of the control itself.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl, CdsSelectionControlGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const disabled = ref('courier');
+const readonly = ref('courier');
+const partly = ref('courier');
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-content-secondary">disabled — заблокирована вся группа</span>
+
+      <CdsSelectionControlGroup
+        v-model="disabled"
+        disabled
+        type="radio"
+        color="green"
+        true-icon="radio-on"
+        false-icon="radio-off"
+      >
+        <CdsSelectionControl value="courier" label="Курьером" class="gap-x-2" />
+        <CdsSelectionControl value="pickup" label="Самовывоз" class="gap-x-2" />
+      </CdsSelectionControlGroup>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <span class="text-content-secondary">readonly — вид прежний, выбор не меняется</span>
+
+      <CdsSelectionControlGroup
+        v-model="readonly"
+        readonly
+        type="radio"
+        color="green"
+        true-icon="radio-on"
+        false-icon="radio-off"
+      >
+        <CdsSelectionControl value="courier" label="Курьером" class="gap-x-2" />
+        <CdsSelectionControl value="pickup" label="Самовывоз" class="gap-x-2" />
+      </CdsSelectionControlGroup>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <span class="text-content-secondary">Отдельный контрол блокируется своим disabled</span>
+
+      <CdsSelectionControlGroup v-model="partly" type="radio" color="green" true-icon="radio-on" false-icon="radio-off">
+        <CdsSelectionControl value="courier" label="Курьером" class="gap-x-2" />
+        <CdsSelectionControl value="pickup" disabled label="Самовывоз" class="gap-x-2" />
+      </CdsSelectionControlGroup>
+    </div>
+  </div>
+</template>
+```
+
+## Colors and icons
+
+`color` sets the color of the selected control, `base-color` the color of the unselected ones, `true-icon` and `false-icon` the pair of state icons. The values apply to all the controls of the group at once.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl, CdsSelectionControlGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const plan = ref('pro');
+const favorites = ref(['first']);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-content-secondary">color — выбранный, base-color — остальные</span>
+
+      <CdsSelectionControlGroup
+        v-model="plan"
+        type="radio"
+        color="green"
+        base-color="purple"
+        true-icon="radio-on"
+        false-icon="radio-off"
+      >
+        <CdsSelectionControl value="base" label="Базовый" class="gap-x-2" />
+        <CdsSelectionControl value="pro" label="Профи" class="gap-x-2" />
+      </CdsSelectionControlGroup>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <span class="text-content-secondary">Своя пара иконок для всей группы</span>
+
+      <CdsSelectionControlGroup v-model="favorites" type="checkbox" true-icon="star-fill" false-icon="star">
+        <CdsSelectionControl value="first" label="Первый" class="gap-x-2" />
+        <CdsSelectionControl value="second" label="Второй" class="gap-x-2" />
+      </CdsSelectionControlGroup>
+    </div>
+  </div>
+</template>
+```
+
+## Passing the settings through
+
+The group gives its settings to the component whose name is set in `defaults-target` — `CdsSelectionControl` by default. Put the name of a ready-made control there and the group starts controlling it: that is how [CdsRadioGroup](../cds-radio-group/api.md) hands the settings to the radio buttons.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox, CdsSelectionControlGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const categories = ref(['office']);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsSelectionControlGroup v-model="categories" defaults-target="CdsCheckbox" type="checkbox" direction="vertical">
+      <CdsCheckbox value="office" label="Канцелярия" hide-details />
+      <CdsCheckbox value="furniture" label="Мебель" hide-details />
+      <CdsCheckbox value="tech" label="Техника" hide-details />
+    </CdsSelectionControlGroup>
+
+    <span class="text-content-secondary">Значение модели: {{ categories }}</span>
+  </div>
+</template>
+```
+
+## Filtering by categories
+
+An array model collects the checked categories, and the list is rebuilt on the fly through a computed. `inline` leaves the controls the width of their captions, so the filters go in a dense row.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsList, CdsSelectionControl, CdsSelectionControlGroup } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const categories = [
+  { value: 'office', label: 'Канцелярия' },
+  { value: 'furniture', label: 'Мебель' },
+  { value: 'tech', label: 'Техника' }
+];
+
+const products = [
+  { title: 'Бумага А4', category: 'office' },
+  { title: 'Кресло офисное', category: 'furniture' },
+  { title: 'Монитор 27"', category: 'tech' },
+  { title: 'Стеллаж', category: 'furniture' }
+];
+
+const selected = ref<string[]>([]);
+
+const items = computed(() =>
+  products
+    .filter((product) => !selected.value.length || selected.value.includes(product.category))
+    .map((product) => ({ title: product.title }))
+);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsSelectionControlGroup
+      v-model="selected"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      class="gap-3"
+    >
+      <CdsSelectionControl
+        v-for="category of categories"
+        :key="category.value"
+        inline
+        :value="category.value"
+        :label="category.label"
+        class="gap-x-2"
+      />
+    </CdsSelectionControlGroup>
+
+    <CdsList :items="items" />
+  </div>
+</template>
+```
+
+## Selection tiles
+
+The group does not dictate the markup to the controls: in the `input` slot every control draws its own tile, while the group still holds the selected value and ties the native `input` elements together with a single `name`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl, CdsSelectionControlGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slots = [
+  { value: 'morning', title: 'Утро', time: '9:00 — 12:00' },
+  { value: 'day', title: 'День', time: '12:00 — 17:00' },
+  { value: 'evening', title: 'Вечер', time: '17:00 — 21:00' }
+];
+
+const slot = ref('day');
+</script>
+
+<template>
+  <CdsSelectionControlGroup v-model="slot" type="radio" class="justify-center gap-2">
+    <CdsSelectionControl
+      v-for="item of slots"
+      :key="item.value"
+      inline
+      :value="item.value"
+      :aria-label="`${item.title}, ${item.time}`"
+      :style="{ '--cds-selection-control-width': '140px', '--cds-selection-control-height': '64px' }"
+    >
+      <template #input="{ inputNode, model }">
+        <component :is="inputNode" />
+
+        <div
+          class="flex h-full w-full flex-col justify-center rounded-200 border px-3"
+          :class="model.value ? 'border-line-selected ring-1 ring-line-selected' : 'border-line-primary'"
+        >
+          <span>{{ item.title }}</span>
+          <span class="text-content-secondary">{{ item.time }}</span>
+        </div>
+      </template>
+    </CdsSelectionControl>
+  </CdsSelectionControlGroup>
+</template>
+```

package/skills/cds-builder/references/components/cds-skeleton-loader/api.md

@@ -0,0 +1,30 @@
+# CdsSkeletonLoader — 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 skeleton shows the shape of the future content while the data is loading: instead of an empty screen the user immediately sees where the heading, the text and the buttons will appear. The ready-made types (`type`) are assembled from "bones" — blanks for an avatar, a line of text, a button or a table.
+
+## CdsSkeletonLoader
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `boilerplate` | `boolean \| undefined` | `false` | no | Boilerplate mode: turns the shimmer animation off (for prototyping). |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `loading` | `boolean \| undefined` | `false` | no | Shows the skeleton instead of the slot content while loading. |
+| `loadingText` | `string \| undefined` | — | no | Text for the `aria-label` while loading. |
+| `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 |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `type` | `(string & {}) \| "text" \| "block" \| "article" \| "button" \| "table" \| "divider" \| "subtitle" \| "chip" \| "avatar" \| "actions" \| "heading" \| "sentences" \| "paragraph" \| "card" \| "card-avatar" \| "date-picker" \| "date-picker-options" \| "date-picker-days" \| "list-item" \| "list-item-avatar" \| "list-item-two-line" \| "list-item-avatar-two-line" \| "list-item-three-line" \| "list-item-avatar-three-line" \| "table-heading" \| "table-thead" \| "table-tbody" \| "table-row-divider" \| "table-row" \| "table-tfoot" \| readonly ((string & {}) \| "text" \| "block" \| "article" \| "button" \| "table" \| "divider" \| "subtitle" \| "chip" \| "avatar" \| "actions" \| "heading" \| "sentences" \| "paragraph" \| "card" \| "card-avatar" \| "date-picker" \| "date-picker-options" \| "date-picker-days" \| "list-item" \| "list-item-avatar" \| "list-item-two-line" \| "list-item-avatar-two-line" \| "list-item-three-line" \| "list-item-avatar-three-line" \| "table-heading" \| "table-thead" \| "table-tbody" \| "table-row-divider" \| "table-row" \| "table-tfoot")[] \| undefined` | `'block'` | no | Skeleton type: a predefined preset or an arbitrary structure string (or an array of strings). |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content rendered instead of the skeleton once the loading is done. |

package/skills/cds-builder/references/components/cds-skeleton-loader/examples.md

@@ -0,0 +1,297 @@
+# CdsSkeletonLoader — 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 skeleton shows the shape of the future content while the data is loading: instead of an empty screen the user immediately sees where the heading, the text and the buttons will appear. The ready-made types (`type`) are assembled from "bones" — blanks for an avatar, a line of text, a button or a table.
+
+## Types
+
+The `type` prop takes a ready-made structure from the catalog: `article` — a heading and a paragraph, `card` — an image with a heading, `table` — a header, rows and a footer.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSkeletonLoader } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-start justify-center gap-4">
+    <CdsSkeletonLoader type="article" width="260" />
+    <CdsSkeletonLoader type="card" width="260" />
+    <CdsSkeletonLoader type="list-item-avatar-three-line" width="260" />
+    <CdsSkeletonLoader type="table" width="360" />
+  </div>
+</template>
+```
+
+## Your own structure
+
+The type can be described with a string: a comma-separated list puts bones one after another, and `@N` repeats a bone N times. An array of strings works the same way as a comma-separated list.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSkeletonLoader } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-start justify-center gap-4">
+    <CdsSkeletonLoader type="heading, text@3, actions" width="260" />
+    <CdsSkeletonLoader :type="['avatar', 'sentences', 'divider', 'button']" width="260" />
+  </div>
+</template>
+```
+
+## Catalog of types
+
+All the built-in types and their structures. Any of them can be inserted into your own string as a bone — `heading, table-row@3`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSkeletonLoader } from '@central-design-system/components';
+
+import { allowedTypes } from '../../api/CdsSkeletonLoader.types';
+
+const types = allowedTypes;
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 max-w-[420px] m-auto">
+    <div v-for="(structure, type) in types" :key="type" class="flex flex-col gap-1">
+      <div class="text-sm">
+        <strong>{{ type }}</strong> — <code>{{ structure }}</code>
+      </div>
+      <CdsSkeletonLoader :type="type" boilerplate />
+    </div>
+  </div>
+</template>
+```
+
+## Sizes
+
+The `width`, `height`, `min-width` and `max-width` props set the size of the container — the bones stretch along it. Give the skeleton the same size as the future content, so that the layout does not jump when the data arrives.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSkeletonLoader } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-start justify-center gap-4">
+    <CdsSkeletonLoader width="200" height="80" />
+    <CdsSkeletonLoader type="article" width="200" />
+    <CdsSkeletonLoader type="article" max-width="140" />
+  </div>
+</template>
+```
+
+## Replacing the content
+
+Put the content into the default slot: while `loading` is true, the skeleton is visible in its place, and afterwards — the content itself, with no wrapper. The `loading-text` prop sets the `aria-label` — a screen reader will announce what exactly is loading.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsButton,
+  CdsCard,
+  CdsCardActions,
+  CdsCardItem,
+  CdsCardText,
+  CdsSkeletonLoader
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const isLoading = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <CdsButton appearance="secondary" text="Переключить загрузку" @click="isLoading = !isLoading" />
+
+    <CdsCard width="360">
+      <CdsSkeletonLoader :loading="isLoading" type="heading, text@2, actions" height="180">
+        <CdsCardItem title="Договор № 1024" subtitle="Поставка комплектующих" />
+        <CdsCardText>Срок исполнения — 14 дней с момента подписания.</CdsCardText>
+        <CdsCardActions align="end">
+          <CdsButton appearance="tertiary" text="Открыть" />
+        </CdsCardActions>
+      </CdsSkeletonLoader>
+    </CdsCard>
+  </div>
+</template>
+```
+
+## Without animation
+
+The `boilerplate` prop turns the shimmer off. Such a skeleton is a blank for mockups and static prototypes; on a live screen it does not communicate waiting.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSkeletonLoader } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-start justify-center gap-4">
+    <CdsSkeletonLoader type="card-avatar, article, actions" width="260" />
+    <CdsSkeletonLoader type="card-avatar, article, actions" width="260" boilerplate />
+  </div>
+</template>
+```
+
+## List of participants
+
+While the list is loading, `type="list-item-avatar-two-line@3"` holds the space for three records: an avatar and two lines of text in each. The slot hands over the ready list as soon as the data arrives, so no `v-if` is needed in the template.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsAvatar, CdsButton, CdsSkeletonLoader } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const isLoading = ref(true);
+
+const members = [
+  { id: 1, initials: 'АС', name: 'Анна Соколова', role: 'Менеджер по закупкам' },
+  { id: 2, initials: 'ПК', name: 'Пётр Ковалёв', role: 'Юрист' },
+  { id: 3, initials: 'МЛ', name: 'Мария Лебедева', role: 'Бухгалтер' }
+];
+
+function load() {
+  isLoading.value = true;
+  setTimeout(() => (isLoading.value = false), 1500);
+}
+
+load();
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-[320px] m-auto">
+    <CdsButton appearance="secondary" text="Загрузить заново" :disabled="isLoading" @click="load" />
+
+    <CdsSkeletonLoader :loading="isLoading" type="list-item-avatar-two-line@3" loading-text="Загружаем участников">
+      <div class="flex flex-col gap-3">
+        <div v-for="member in members" :key="member.id" class="flex items-center gap-2">
+          <CdsAvatar :content="member.initials" />
+          <div class="flex flex-col">
+            <span class="font-medium">{{ member.name }}</span>
+            <span class="text-sm opacity-70">{{ member.role }}</span>
+          </div>
+        </div>
+      </div>
+    </CdsSkeletonLoader>
+  </div>
+</template>
+```
+
+## Table of contracts
+
+A skeleton of `table-heading, table-row@3` repeats the header and the rows of the table, and `loading-text` explains the wait to the screen reader. The number of rows matches the page size of the data — after loading, the height of the block does not change.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsSkeletonLoader } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const isLoading = ref(true);
+
+const rows = [
+  { id: 1, number: '1024', customer: 'ООО «Ромашка»', sum: '120 000 ₽' },
+  { id: 2, number: '1025', customer: 'АО «Вектор»', sum: '86 400 ₽' },
+  { id: 3, number: '1026', customer: 'ИП Смирнов', sum: '15 900 ₽' }
+];
+
+function load() {
+  isLoading.value = true;
+  setTimeout(() => (isLoading.value = false), 1500);
+}
+
+load();
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-[420px] m-auto">
+    <CdsButton appearance="secondary" text="Обновить данные" :disabled="isLoading" @click="load" />
+
+    <CdsSkeletonLoader :loading="isLoading" type="table-heading, table-row@3" loading-text="Загружаем договоры">
+      <table class="w-full text-left">
+        <thead>
+          <tr class="text-sm opacity-70">
+            <th class="py-1 font-medium">Номер</th>
+            <th class="py-1 font-medium">Заказчик</th>
+            <th class="py-1 font-medium">Сумма</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :key="row.id">
+            <td class="py-1">{{ row.number }}</td>
+            <td class="py-1">{{ row.customer }}</td>
+            <td class="py-1">{{ row.sum }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </CdsSkeletonLoader>
+  </div>
+</template>
+```
+
+## Page frame
+
+On the first load of a page the blocks load independently, so each one has its own skeleton: the list of sections is `list-item@4`, the content is `heading, paragraph, paragraph`. A block that is ready appears right away, without waiting for its neighbor.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsLink, CdsSkeletonLoader } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const isLoading = ref(true);
+
+const sections = ['Общие сведения', 'Документы', 'Участники', 'История'];
+
+function load() {
+  isLoading.value = true;
+  setTimeout(() => (isLoading.value = false), 1500);
+}
+
+load();
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 w-[460px] m-auto">
+    <CdsButton appearance="secondary" text="Открыть страницу заново" :disabled="isLoading" @click="load" />
+
+    <div class="grid grid-cols-[150px_1fr] gap-4">
+      <CdsSkeletonLoader :loading="isLoading" type="list-item@4" loading-text="Загружаем разделы">
+        <nav class="flex flex-col gap-2">
+          <CdsLink v-for="section in sections" :key="section" href="#" :text="section" />
+        </nav>
+      </CdsSkeletonLoader>
+
+      <CdsSkeletonLoader :loading="isLoading" type="heading, paragraph, paragraph" loading-text="Загружаем описание">
+        <article class="flex flex-col gap-2">
+          <h3 class="font-medium">Закупка комплектующих</h3>
+          <p class="text-sm">
+            Заказчик принимает заявки до 20 числа. Победитель определяется по совокупности цены и срока поставки.
+          </p>
+          <p class="text-sm">Документы можно подать в электронном виде — подписанные квалифицированной подписью.</p>
+        </article>
+      </CdsSkeletonLoader>
+    </div>
+  </div>
+</template>
+```