К основному содержанию
скилл CX Codex

ant-design — скилл для Claude Code: компоненты antd без догадок

Скилл-справочник по antd 6.x, Ant Design Pro 5 и Ant Design X v2. Помогает выбрать компонент, настроить токены и не выдумывать пропсы.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add ant-design/antd-skill --skill ant-design -a claude-code
Открыть на GitHub

Что делает ant-design

Скилл задаёт агенту порядок работы с Ant Design: сначала спросить API у офлайн-утилиты @ant-design/cli, потом писать код. Компонент ищется командой antd info <Component> --format json, демо берётся из antd demo, тема и стилевые хуки — из antd token и antd semantic. После правок в компонентах запускается antd lint <changed-path> --format json. Если проект привязан к конкретной версии, её подставляют через --version <x.y.z> или CLI сам смотрит в локальный node_modules.

Внутри — правила, а не туториалы. Провайдер темы один на корень приложения: для CSR хватает ConfigProvider, для SSR добавляется StyleProvider. Тематика идёт по цепочке от глобальных токенов к токенам компонента, глобальные переопределения .ant-* не приветствуются. Отдельные блоки описывают маршруты, меню и права доступа в Pro, схемы CRUD, а для X — схемы сообщений, инструментов и состояние стриминга.

Есть чек-лист регрессии: устойчивый rowKey у таблицы, отключение локального фильтра в Select при удалённом поиске, явный режим контролируемости у Upload с путём повтора при ошибке. Скилл рассчитан на React 18-19 и TypeScript, опирается только на документированные API. Если команда antd падает или отдаёт неверные данные, агент готовит превью antd bug-cli на подтверждение, а не обходит проблему молча.

Какие задачи решает

  • выбрать подходящий компонент antd под задачу
  • настроить тему через токены вместо правки глобального CSS
  • собрать таблицу с сортировкой, фильтрами и пагинацией
  • подключить маршруты, меню и права доступа в Ant Design Pro
  • описать стриминг и рендер инструментов в чат-интерфейсе на Ant Design X

Примеры запросов агенту

  • Посмотри API компонента TreeSelect через antd info и предложи вариант с множественным выбором
  • Собери форму редактирования профиля на antd 6 с токенами темы, потом прогони antd lint по изменённым файлам
  • Нужен чат со стримингом ответов — подскажи схему сообщений и инструментов для Ant Design X v2

Как установить ant-design

1Через Skills CLI (Vercel)

npx skills add ant-design/antd-skill --skill ant-design -a claude-code

2Вручную: положить файлы

~/.claude/skills/ant-design/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/ant-design/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о ant-design

Как установить ant-design в Claude?

Выполните npx skills add ant-design/antd-skill --skill ant-design -a claude-code. Файл скилла появится по пути ~/.claude/skills/ant-design/SKILL.md.

Что делает скилл ant-design?

Даёт агенту правила выбора компонентов, настройки токенов, SSR, доступности и производительности для antd 6.x, Ant Design Pro и Ant Design X. Плюс обязывает сверять API через офлайн-утилиту @ant-design/cli.

Какие версии поддерживаются?

Цель — antd@^6 с React 18-19, при необходимости ant-design-pro@^5 и @ant-design/x@^2. Если важна конкретная версия, её указывают флагом --version <x.y.z>.

Исходный текст

SKILL.md · MIT
---
name: ant-design
description: Decision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline `@ant-design/cli`. Use for component selection, theming/tokens, SSR, a11y, performance, routing/access/CRUD, AI/chat UI patterns, local API lookup, debugging, migration, and usage analysis.
---

# Ant Design

## S - Scope
- Target: `antd@^6` + React 18-19, with `ant-design-pro@^5` / `@ant-design/pro-components` and `@ant-design/x@^2` when needed.
- Tooling: `@ant-design/cli` for offline component metadata, demos, changelogs, migrations, linting, doctor checks, and usage analysis.
- Focus: decision guidance only; no end-user tutorials.
- Source policy: official docs only; no undocumented APIs or internal `.ant-*` coupling.

### Default assumptions
- Language: TypeScript.
- Styling: tokens first, then `classNames`/`styles`; avoid global overrides.
- Provider: one root `ConfigProvider` unless strict isolation is required.

### Mandatory rules
- Before writing or changing antd component code, query the component API first with `antd info <Component> --format json`. Do not rely on memory when the CLI can answer it offline.
- Always use `--format json` with `antd` CLI commands.
- If the project version matters, match it with `--version <x.y.z>` or let the CLI auto-detect from local `node_modules`.
- After changing antd code, run `antd lint <changed-path> --format json`.
- If an `antd` CLI command crashes, returns wrong data, or violates its documented behavior, prepare an `antd bug-cli` preview for user confirmation instead of silently working around it.
- For component questions, first map the component name to the official route slug `{components}` (lowercase kebab-case, e.g. `TreeSelect -> tree-select`, `Button -> button`), then request docs in this order (CN first, EN fallback):
  1. `https://ant.design/components/{components}-cn`
  2. `https://ant.design/components/{components}`
  - Examples: `tree-select-cn -> tree-select`, `button-cn -> button`.
- Use only documented antd/Pro/X APIs.
- Do not invent props/events/component names.
- Do not rely on internal DOM or `.ant-*` selectors.
- Theme priority: global tokens -> component tokens -> alias tokens.

## P - Process
### 1) Classify
- Identify layer: core antd, Pro, or X.
- Confirm version, rendering mode (CSR/SSR/streaming), data scale, and whether `@ant-design/cli` should be the primary lookup path.

### 2) Query authoritative sources
- Prefer local `@ant-design/cli` first for structured lookup:
  - `antd info` for props/API
  - `antd demo` for a working baseline
  - `antd doc` for full docs
  - `antd token` / `antd semantic` for theming and styling hooks
  - `antd doctor`, `antd lint`, `antd usage`, `antd migrate`, `antd changelog` when debugging or upgrading
- Then request the official component docs (`-cn` first, EN fallback) when narrative docs or cross-checking are needed.

### 3) Decide
- Provider baseline: CSR -> `ConfigProvider`; SSR -> `ConfigProvider` + `StyleProvider`.
- Theming baseline: global tokens -> component tokens -> `classNames`/`styles`.
- Output recommendation + risk + verification points (SSR/a11y/perf), citing CLI findings when used.

## O - Output
- Provide short decision rationale (1-3 sentences).
- Include minimal provider/theming strategy.
- Include concrete SSR/a11y/perf checks.
- For Pro: include route/menu/access and CRUD schema direction.
- For X: include message/tool schema and streaming state direction.

## References

| File | Use when |
| --- | --- |
| `references/antd-cli.md` | You need the exact offline CLI workflow for API lookup, demos, linting, doctor checks, migration, changelog review, usage analysis, or bug reporting. |

## Regression checklist
- [ ] One root `ConfigProvider`; SSR style order/hydration verified.
- [ ] Tokens first; no broad global `.ant-*` overrides.
- [ ] Table has stable `rowKey`; sort/filter/pagination entry is unified.
- [ ] Select remote mode disables local filter when using remote search.
- [ ] Upload controlled/uncontrolled mode is explicit with failure/retry path.
- [ ] Pro route/menu/access remain consistent with backend enforcement.
- [ ] X streaming supports stop/retry and deterministic tool rendering.
- [ ] If `antd` CLI was used, commands ran with `--format json` and any CLI defect was escalated via `antd bug-cli` preview.

© ant-design · MIT · ant-design/antd-skill

Похожие скиллы

Всё по теме «Фронтенд и UI» →
ant typeui.sh Скилл задаёт агенту правила дизайн-системы Ant: токены, состояния компонентов, доступность. Пригодится на плотных интерфейсах с таблицами и формами. CX Codex +1 2 300установок chakra-ui-builder chakra-ui Скилл собирает адаптивные и доступные интерфейсы на Chakra UI v3, подключает библиотеку и настраивает темы. Пригодится для компонентов, страниц и layout. CX Codex +1 3 500установок design-system-patterns Seth Hobson Помогает проектировать дизайн-токены, переключение тем и архитектуру библиотеки компонентов. Пригодится, когда вы закладываете общие правила интерфейса для проекта. CX Codex 15 953установок frontend-design cline Скилл задаёт агенту смелое визуальное направление и заставляет доводить код до продакшн-уровня. Пригодится, когда интерфейс не должен выглядеть как типовой вывод нейросети. CX Codex +1 7 300установок ui-design mblode Выбирает визуальное направление, пишет код интерфейса и проверяет готовый фронтенд на дефекты. Полезен, когда нужен лендинг, тёмная тема или разбор чужой вёрстки. CX Codex +1 1 400установок avoid-ai-design ungspirit Скилл находит в вёрстке следы генерации нейросетью и переписывает её вокруг одной выбранной дизайн-идеи. Пригодится, когда фронтенд после Claude или Codex выглядит как у всех. CX Codex +1 641установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой