🤖 CDS AI Agent Skills

Agent Skills дизайн-системы Central Design System (CDS 4) для AI-агентов (Claude Code и совместимые). Скиллы срабатывают автоматически по смыслу запроса — называть их не нужно.

Скиллов три, они разделены по задаче, чтобы запрос про миграцию не тянул за собой знание про сборку интерфейсов:

Скилл	Про что
cds-builder	Собрать UI, подключить библиотеку, темы и токены
cds-migrate	Перевести проект с CDS 3 на CDS 4
cds-refactor	Отревьюить код и перевести чужую вёрстку на CDS

🚀 Установка

Два шага: поставить пакет и запустить установщик.

Шаг 1 — пакет в dev-зависимости:

npm

npm install -D @central-design-system/skills@next

pnpm

pnpm add -D @central-design-system/skills@next

yarn

yarn add -D @central-design-system/skills@next

bun

bun add -D @central-design-system/skills@next

Шаг 2 — установщик. Запускает локальный бинарник cds-skills, который копирует все три скилла в .claude/skills/ текущего проекта:

npm

npx cds-skills install

pnpm

pnpm exec cds-skills install

yarn

yarn cds-skills install

bun

bunx cds-skills install

Разовая установка без добавления пакета в проект — прямо из реестра:

npm

npx --package @central-design-system/skills@next cds-skills install

pnpm

pnpm dlx --package @central-design-system/skills@next cds-skills install

yarn

yarn dlx --package @central-design-system/skills@next cds-skills install

bun

bunx --package @central-design-system/skills@next cds-skills install

Остальные команды ниже записаны через npx — подставляйте запускалку своего менеджера из шага 2:

npm

npx cds-skills install cds-builder      # только нужный
npx cds-skills install --dir <path>     # другая директория скиллов
npx cds-skills list                     # что доступно и что уже установлено

pnpm

pnpm dlx cds-skills install cds-builder      # только нужный
pnpm dlx cds-skills install --dir <path>     # другая директория скиллов
pnpm dlx cds-skills list                     # что доступно и что уже установлено

yarn

yarn dlx cds-skills install cds-builder      # только нужный
yarn dlx cds-skills install --dir <path>     # другая директория скиллов
yarn dlx cds-skills list                     # что доступно и что уже установлено

bun

bunx cds-skills install cds-builder      # только нужный
bunx cds-skills install --dir <path>     # другая директория скиллов
bunx cds-skills list                     # что доступно и что уже установлено

🔄 Обновление

Повторите шаг 1 с тегом next, затем снова запустите установщик из шага 2 — он перезапишет установленные копии.

Установленную версию покажет npx cds-skills list — она же лежит в GENERATION.md каждого скилла (версия CDS, git SHA, дата и статистика генерации).

cds-builder

Основной скилл. Сборка интерфейса, подключение библиотеки, темы и токены.

Когда срабатывает

• сборка любого UI: форма, страница, таблица, карточка, модалка, дашборд, шапка;
• подключение CDS в новый или существующий проект, настройка createCds, стилей, Tailwind;
• вопросы про контракт: «какие пропсы у CdsSelect», «есть ли у CdsButton variant»;
• темы, палитра бренда, токены, размер бандла;
• вёрстка по скриншоту или макету.

Примеры запросов: «сделай форму входа на CDS с валидацией», «установи CDS в мой проект», «свёрстай страницу со списком заказов», «добавь свою тему», «вот скриншот, собери это на CDS».

Что делает. Читает контекст проекта (версия CDS, сборщик, TypeScript, наличие Tailwind), подбирает компонент по дереву выбора, сверяет каждый проп с контрактом и выдаёт рабочий SFC. Ключевое правило скилла — не выдумывать пропсы: выдуманный проп выглядит правдоподобно и молча не работает.

Формат вывода: полный рабочий код с импортами → 2–4 предложения о принятых решениях (для тривиального запроса — без объяснений).

Справочники (подгружаются по необходимости):

Файл	Что внутри	Когда подгружается
references/component-decision-tree.md	Назначение всех компонентов и разбор близких пар	Компонент не назван или есть сомнение в выборе
references/components/<имя>/api.md	Полный контракт: props / events / slots / exposed	Всегда перед использованием компонента
references/components/<имя>/examples.md	Примеры использования	Нужен рабочий паттерн
references/components/<имя>/guidelines.md	Правила «Хорошо / Плохо»	Есть не у всех компонентов
references/components/<имя>/tokens.md	Локальные SCSS-переменные	Тонкая настройка стилей
references/tokens/	Темы и палитра	Работа с цветом и темами
references/guides/	Подключение, конвенции, формы, тематизация, Tailwind, tree-shaking, адаптив	По теме запроса
references/patterns/	Плейбуки: форма, каркас страницы, таблица со списком, модалка	Сложный экран целиком

cds-migrate

Перевод проекта с CDS 3 на CDS 4.

Когда срабатывает

• подъём версии CDS, поломка после обновления;
• предупреждения [CDS UPGRADE] в консоли;
• паттерны CDS 3 в коде: dist/cds.css, @central-design-system/icons, CdsDropdown, CdsRadioButton, CdsProgress, CdsTabsV2, CdsCheckboxGroup, CdsContainer — даже если слово «миграция» не прозвучало.

Примеры запросов: «мигрируй проект на CDS 4», «после обновления поехали стили», «не находит dist/cds.css», «что изменилось в CDS 4».

Что делает. Осматривает проект и показывает объём работ до правок, затем идёт по шагам: пакет и точка входа стилей → иконки → переименования компонентов и пропсов → CSS-архитектура → композаблы и экспорты. Заканчивает чек-листом проверки и честно сообщает, что осталось незакрытым.

Справочник: references/migration-full.md — полный гайд перехода со всеми парами «Было / Стало».

cds-refactor

Ревью существующего кода и перевод чужой вёрстки на CDS.

Когда срабатывает

• ревью: «проверь», «что здесь не так», «правильно ли я использую CdsSelect»;
• конвертация: голый HTML/CSS → CDS, самодельные контролы на Tailwind → CDS;
• чистка: hardcoded-цвета вместо токенов, ручная сборка полей формы, проблемы доступности.

Примеры запросов: «отревьюй мой компонент», «переведи эту вёрстку на CDS», «замени свои кнопки на CdsButton», «убери хардкод цветов».

Режимы вывода

• Только ревью → разбор по значимости: Критично / Улучшения / Необязательное, с минимальной правкой для каждой находки.
• Рефакторинг → переписанный код + список изменений + предложения.
• И то и другое → сначала разбор, потом код.

Поведение при этом сохраняется: обработчики, состояние и условный рендеринг переносятся как есть. Частично сконвертированный рабочий компонент лучше полностью сконвертированного сломанного.

Справочники: references/html-to-cds.md, references/tailwind-to-cds.md (таблицы соответствий), references/review-checklist.md (чек-лист проверок).

Tailwind при рефакторинге из проекта не убирается: CDS 4 интегрирован с Tailwind CSS v4, и раскладка на утилитах — рекомендуемый способ вёрстки. Заменяются только самодельные контролы.

Миграцией с CDS 3 этот скилл не занимается — для неё есть cds-migrate.

📂 Структура пакета

@central-design-system/skills
├── bin/cds-skills.mjs      # установщик
├── cds-builder/
│   ├── SKILL.md
│   ├── GENERATION.md
│   └── references/
│       ├── component-decision-tree.md
│       ├── components/<имя>/{api,examples,guidelines,tokens}.md
│       ├── tokens/{themes,colors}.md
│       ├── guides/
│       └── patterns/
├── cds-migrate/
│   ├── SKILL.md
│   ├── GENERATION.md
│   └── references/migration-full.md
└── cds-refactor/
    ├── SKILL.md
    ├── GENERATION.md
    └── references/{html-to-cds,tailwind-to-cds,review-checklist}.md

Тяжёлый справочник компонентов лежит только в cds-builder и не дублируется; cds-migrate и cds-refactor ссылаются на него, а если он не установлен — на каталог llms/ из npm-пакета библиотеки.

🧩 Агенты без поддержки скиллов

Для Cursor, Copilot, Windsurf и других есть каталог по конвенции llmstxt.org — он публикуется и в npm-пакете библиотеки (node_modules/@central-design-system/components/llms/), и на сайте документации:

Файл	Что внутри
llms.txt	Индекс: наборы документации и назначение всех компонентов
llms-full.txt	Всё сразу: гайды, токены, компоненты, миграция
llms-components.txt	Только компоненты: назначение, примеры, контракт API
llms-tokens.txt	Только токены и темы
llms-guides.txt	Только гайды
llms-migration.txt	Только миграция CDS 3 → CDS 4

Добавьте указатель на нужный файл в инструкции своего продукта (AGENTS.md, .cursorrules, .github/copilot-instructions.md). Подробнее — на странице LLMs.txt.

🛠️ Регенерация (для разработчиков CDS)

Содержимое скиллов генерируется в монорепе:

cd packages/components
bun run generate:meta    # если менялись компоненты
bun run generate:skill

Директории cds-builder/, cds-migrate/ и cds-refactor/ одноразовые — не редактируйте их вручную. Рукописный контент живёт в packages/components/build/plugins/:

• generate-skill/content/<скилл>/ — тело SKILL.md, плейбуки, таблицы соответствий, разбор близких пар;
• content/guides/ — гайды, общие со справочником llms/.