vtex-io-react-apps — скилл для Claude Code: React в VTEX IO
Скилл для фронтенда VTEX IO: помогает собирать React-компоненты под билдер react, регистрировать блоки и настраивать Site Editor.
npx skills add vtex/skills --skill vtex-io-react-apps -a claude-codeЧто делает vtex-io-react-apps
Скилл включается, когда вы пишете компоненты в каталоге react/ или описываете блоки в store/ для приложений VTEX IO. Он подсказывает, как связать имя блока с файлом компонента через interfaces.json, как вынести свойства в contentSchemas.json, чтобы их можно было править в Site Editor, и как оформить витрину через css-handles.
Для админских панелей скилл настаивает на vtex.styleguide и предупреждает, если в код затащили Material UI, Chakra UI или Ant Design. Приложения с чужой библиотекой в админке не пройдут проверку VTEX App Store. Данные компонент должен брать через GraphQL-запросы, а строки для пользователя — через react-intl и билдер messages, без хардкода.
Есть и подводный камень с версиями: правки мерчанта в Site Editor привязаны к MAJOR-версии приложения, которое объявило блок. Поднимете мажор — правки станут невидимыми, пока их не перенесут мутацией updateThemeIds в [email protected]. Скилл не для бэкенда, GraphQL-резолверов и настройки манифеста — под это в наборе есть отдельные скиллы.
Какие задачи решает
- собрать витринный компонент и подключить его как блок темы
- описать свойства компонента для правки в Site Editor
- собрать админку на компонентах VTEX Styleguide
- вынести строки интерфейса в
messagesвместо хардкода - проверить, что у блока есть запись в
interfaces.json
Примеры запросов агенту
- Сделай блок
product-reviewsи зарегистрируй его вstore/interfaces.json - Добавь
contentSchemas.json, чтобы название и цвет баннера правились в Site Editor - Перепиши админскую таблицу отзывов на компоненты
vtex.styleguide
Как установить vtex-io-react-apps
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-react-apps -a claude-code2Вручную: положить файлы
~/.claude/skills/vtex-io-react-apps/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vtex-io-react-apps/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-react-apps -a codex2Вручную: положить файлы
.agents/skills/vtex-io-react-apps/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-react-apps -a cursor2Вручную: положить файлы
.cursor/skills/vtex-io-react-apps/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vtex/skills vtex-io-react-apps2Вручную: положить файлы
.github/skills/vtex-io-react-apps/SKILL.md1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-react-apps -a gemini-cli2Командой платформы
gemini skills install https://github.com/vtex/skills --path skills/vtex-io-react-appsВручную: положить файлы
.devin/skills/vtex-io-react-apps/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-react-apps -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о vtex-io-react-apps
Как установить vtex-io-react-apps в Claude Code?
Выполните npx skills add vtex/skills --skill vtex-io-react-apps -a claude-code. Файл скилла появится по пути ~/.claude/skills/vtex-io-react-apps/SKILL.md.
Что делает vtex-io-react-apps?
Помогает писать React-компоненты для VTEX IO: связывает блоки темы с файлами в react/, настраивает interfaces.json и contentSchemas.json, подсказывает стилизацию витрины и админки.
Чем этот скилл отличается от соседних в наборе vtex/skills?
Он про фронтенд на билдере react. Для бэкенд-сервисов, GraphQL-схем и резолверов, а также для манифеста и билдеров в наборе есть отдельные скиллы.
