vtex-io-storefront-react — скилл для Claude Code: как установить
Задаёт правила создания React-компонентов витрины VTEX IO: обязывает использовать vtex.css-handles, контекстные хуки и локализацию, защищая браузерный код от серверных зависимостей.
npx skills add vtex/skills --skill vtex-io-storefront-react -a claude-codeЧто делает vtex-io-storefront-react
Скилл формулирует правила для ИИ-ассистента при разработке клиентских блоков Store Framework в каталоге react/. Он требует оформлять стили исключительно через vtex.css-handles, чтобы темы могли переопределять оформление без правки разметки. Любые произвольные имена классов блокируются. Видимый текст предписывается оборачивать в компоненты сообщений вроде <FormattedMessage id="..." />, исключая сырые строки в JSX.
Компоненты должны оставаться презентационными. Данные рекомендуется получать через готовые контексты витрины вроде useProduct, useRuntime или useOrderForm, а не прямыми сетевыми запросами к API из браузера. Любой импорт серверных библиотек вроде fs или обращение к window без проверки typeof window !== 'undefined' приведёт к ошибкам при серверном рендеринге витрины.
Скилл запрещено применять для бэкенда, маршрутов сервисов, схем GraphQL или админ-панелей. Для регистрации блоков и привязки их к Store Framework требуются другие правила архитектуры VTEX IO.
Какие задачи решает
- оформить стили витринных компонентов через vtex.css-handles вместо жёстких CSS-классов
- подключить витринные контексты через хуки useProduct или useOrderForm
- защитить клиентский код от импорта серверных библиотек Node.js
- заменить статический текст в JSX на идентификаторы из системы локализации
- обеспечить доступность кнопок и ссылок без кликабельных тегов div
Примеры запросов агенту
- Создай витринный компонент баннера в react/Banner.tsx с кастомными стилями через vtex.css-handles.
- Проверь компонент карточки товара на наличие прямых вызовов API и замени их на хук useProduct.
- Сделай клиентскую форму подписки, вынеси тексты в i18n и добавь семантичные кнопки.
Как установить vtex-io-storefront-react
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-storefront-react -a claude-code2Вручную: положить файлы
~/.claude/skills/vtex-io-storefront-react/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vtex-io-storefront-react/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-storefront-react -a codex2Вручную: положить файлы
.agents/skills/vtex-io-storefront-react/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-storefront-react -a cursor2Вручную: положить файлы
.cursor/skills/vtex-io-storefront-react/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vtex/skills vtex-io-storefront-react2Вручную: положить файлы
.github/skills/vtex-io-storefront-react/SKILL.md1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-storefront-react -a gemini-cli2Командой платформы
gemini skills install https://github.com/vtex/skills --path skills/vtex-io-storefront-reactВручную: положить файлы
.devin/skills/vtex-io-storefront-react/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-storefront-react -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о vtex-io-storefront-react
Как установить vtex-io-storefront-react в Claude Code?
Выполните команду npx skills add vtex/skills --skill vtex-io-storefront-react -a claude-code в терминале вашего проекта.
Для чего нужен скилл vtex-io-storefront-react?
Он направляет ассистента при написании витринных компонентов Store Framework. Правила заставляют использовать vtex.css-handles, настраивать переводы текстов и предотвращают вызовы серверных пакетов в браузере.
Подходит ли этот скилл для бэкенда или админки VTEX IO?
Нет, скилл не применяется для интерфейсов администратора, схем GraphQL, сервисных маршрутов и регистрации блоков. Эти задачи вынесены в отдельные спецификации VTEX IO.
