antd-skill
Два официальных скилла Ant Design: руководство по antd 6, Pro 5 и X 2 и работа с офлайн-справочником antd для кода и миграций
- 137 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скилл `antd` разрешает агенту ставить глобальный пакет npm и запускать команды `antd`, включая правку кода при миграции.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/antd-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл `antd` разрешает агенту ставить глобальный пакет npm и запускать команды `antd`, включая правку кода при миграции.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
antd-skill дает агенту два скилла от команды Ant Design. Скилл `ant-design` служит путеводителем по antd 6 с React 18–19, по Ant Design Pro 5 с ProComponents и по Ant Design X 2 для чат-интерфейсов с потоковым ответом. Он опирается только на официальную документацию, дает схему выбора компонентов, тем и токенов и напоминает проверить SSR, доступность и скорость. Скилл `antd` встраивает в работу офлайн-справочник `@ant-design/cli` с метаданными версий 4, 5 и 6. Перед написанием компонента агент запрашивает его свойства командой `antd info Button --format json`, берет рабочий пример через `antd demo`, смотрит токены и семантические классы, а после правок запускает `antd lint`. Те же команды помогают искать сбои, разбирать использование antd в проекте и переходить между версиями. На вопрос по компоненту скилл сначала отправляет агента на китайскую, а затем английскую страницу документации на ant.design. Выводы агент излагает коротко: решение, провайдер и тема, проверки SSR, доступности и производительности.
Для кого. Фронтенд-разработчикам на React с компонентами Ant Design, которые пишут интерфейсы вместе с агентом и не хотят выдуманных свойств.
Подходит, если
- Агент пишет форму или таблицу на antd и обязан сверять свойства со справочником.
- Проект на antd 5 переходит на версию 6, и перед правками хочется увидеть список изменений и миграций.
- Админка собирается на Ant Design Pro: маршруты, доступ и CRUD идут по схеме из скилла.
- Чат с потоковым ответом и вызовами инструментов строится на Ant Design X.
- Тему интерфейса нужно настроить через глобальные и компонентные токены без правки классов `.ant-*`.
Не подходит, если
- Интерфейс собран на другой библиотеке компонентов: скилл ссылается только на Ant Design.
- Нужны обучающие уроки для новичков: скилл дает агенту решения и туториалов не содержит.
- Проект застрял на antd 3 или более ранних версиях: офлайн-справочник покрывает версии 4–6.
Пример запроса к агенту
Сделай форму входа на antd 6: сначала проверь свойства Form и Input через справочник, потом запусти lint по измененным файлам.Ограничения
Скиллы рассчитаны на antd 6 с React 18–19, Pro 5 и X 2. Для работы `antd` нужен глобальный пакет `@ant-design/cli`, который агент ставит командой `npm install -g @ant-design/cli`, если его нет. Справочник работает офлайн, но часть шагов отправляет агента на страницы ant.design. Если команда `antd` падает или возвращает неверные данные, скилл просит подготовить отчет `antd bug-cli` и показать его пользователю. Последний коммит в репозитории датирован мартом 2026 года.
Как отключить. Удалите папки `skills/ant-design` и `skills/antd` из каталога скиллов агента. Пакет `@ant-design/cli` снимается отдельно командой `npm uninstall -g @ant-design/cli`.
Частые вопросы
Как установить antd-skill в Claude Code?
Выполните `pnpx skills add ant-design/antd-skill` или `npx skills add ant-design/antd-skill`. Команда ставит оба скилла, `ant-design` и `antd`, из папки `skills/`.
Чем различаются скиллы ant-design и antd?
`ant-design` описывает решения по antd 6, Pro 5 и X 2 в одном `SKILL.md`. `antd` нужен для офлайн-справочника `@ant-design/cli`: поиск свойств, отладка, миграция и анализ использования.
Какие версии antd покрывает справочник?
Встроенные метаданные `@ant-design/cli` относятся к версиям 4, 5 и 6. Команды автоматически определяют версию по `node_modules`, а флаг `--version <x.y.z>` задает ее вручную.
Что агент делает перед правкой компонента?
Запрашивает его API командой `antd info <Компонент> --format json`, берет рабочий пример через `antd demo` и после правок запускает `antd lint <путь> --format json`. Выдумывать свойства скилл запрещает.
Как добавить свой скилл в коллекцию?
Сделайте форк репозитория, скопируйте папку существующего скилла и поправьте ее `SKILL.md`. Затем обновите таблицы в обоих файлах README, чтобы список остался точным.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыОфлайн-справочник по Ant Design для агента: свойства, токены, демо и журнал изменений antd версий 3–6 командами.
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл учит агента собирать чат ИИ-агента на 26 компонентах Agent Elements: карточки инструментов, ввод, стриминг
35 скиллов для Cursor, Claude и Codex: дизайн-системы из HTML и макетов, генерация картинок, допрос по плану и передача контекста.
Скилл по спецификации components.build: как строить композитные, доступные и стилизуемые UI-компоненты и публиковать их
Коротко о README
Документ кратко перечисляет два скилла, область охвата и команды установки. В конце ответы на три вопроса: чем коллекция отличается от туториалов, какой скилл выбрать и как расширять набор.
Бейдж для README
Исходный SKILL.md
---
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