vtex-io-admin-react — скилл для Claude Code
Задаёт правила сборки панелей управления в VTEX IO на React: учит агента использовать официальные дизайн-системы, обрабатывать состояния загрузки и строить навигацию.
npx skills add vtex/skills --skill vtex-io-admin-react -a claude-codeЧто делает vtex-io-admin-react
Скилл инструктирует модель при создании интерфейсов в билдере admin: служебных страниц и экранов настроек. Он запрещает сторонние библиотеки вроде Material UI или Chakra. Вместо них агент обязан брать официальные пакеты: vtex.styleguide для публичных приложений или @vtex/shoreline для внутренней панели управления. Сторонние библиотеки сразу исключаются.
Архитектура опирается на структуру папок VTEX IO. Пути из admin/navigation.json связываются с admin/routes.json и кодом компонентов в каталоге react/. Для экранов с большими таблицами правило требует внедрять серверную фильтрацию и пагинацию. Загружать массив целиком в память браузера запрещено из-за риска зависания вкладки.
Любые асинхронные действия должны менять вид кнопки на индикатор загрузки и показывать всплывающее уведомление после завершения. Без компонентов из официальной дизайн-системы код с кликабельными div проверка просто забракует.
Какие задачи решает
- настроить маршруты панели через navigation.json и routes.json
- заменить сторонние UI-библиотеки на vtex.styleguide или Shoreline
- добавить состояния загрузки и пустых списков в таблицы
- настроить серверную пагинацию вместо фильтрации в браузере
Примеры запросов агенту
- Сверстай страницу настроек приложения на vtex.styleguide с блоками PageBlock и PageHeader.
- Добавь в таблицу заказов пагинацию и обработку ошибки через компонент Alert.
- Проверь форму: замени кликабельные div на кнопки со статусом загрузки.
Как установить vtex-io-admin-react
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-admin-react -a claude-code2Вручную: положить файлы
~/.claude/skills/vtex-io-admin-react/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vtex-io-admin-react/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-admin-react -a codex2Вручную: положить файлы
.agents/skills/vtex-io-admin-react/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-admin-react -a cursor2Вручную: положить файлы
.cursor/skills/vtex-io-admin-react/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vtex/skills vtex-io-admin-react2Вручную: положить файлы
.github/skills/vtex-io-admin-react/SKILL.md1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-admin-react -a gemini-cli2Командой платформы
gemini skills install https://github.com/vtex/skills --path skills/vtex-io-admin-reactВручную: положить файлы
.devin/skills/vtex-io-admin-react/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-admin-react -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о vtex-io-admin-react
Как установить vtex-io-admin-react в Claude Code?
Выполните команду npx skills add vtex/skills --skill vtex-io-admin-react -a claude-code. Файл будет сохранён по пути ~/.claude/skills/vtex-io-admin-react/SKILL.md.
Что делает скилл vtex-io-admin-react?
Он направляет ИИ-ассистента при верстке интерфейсов внутри VTEX Admin. Правила касаются разметки, доступности интерактивных элементов и единого стиля страниц.
Какие дизайн-системы поддерживает скилл?
Стандартом считается vtex.styleguide, а для внутренних рабочих панелей разрешён пакет @vtex/shoreline. Сторонние наборы вроде Ant Design блокируются.
