vtex-io-storefront-theme-app — скилл для Claude Code: настройка
Скилл помогает собирать и настраивать приложения витрины VTEX IO: объявлять маршруты, компоновать блоки шаблонов и связывать тему с Site Editor.
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a claude-codeЧто делает vtex-io-storefront-theme-app
Скилл координирует структуру темы витрины VTEX IO. В такой теме почти нет React-кода: она собирает страницы из готовых блоков через файлы в каталоге store/, включая store/blocks.json и store/routes.json. Скилл следит, чтобы в manifest.json был прописан сборщик store и базовая тема, обычно vtex.store-theme. Если забыть объявить сборщик store, платформа полностью проигнорирует разметку витрины.
Правила подсказывают, как строить дерево блоков для store.home, store.product или пользовательских страниц. Каждый идентификатор блока обязан точно совпадать с версией из manifest.json, иначе vtex.pages-graphql выдаст ошибку Missing block. Для чистого кода скилл разграничивает зоны: логика компонентов пишется в отдельных приложениях, а тема задаёт только композицию и схемы параметров store/contentSchemas.json для редактора Site Editor.
Какие задачи решает
- связать шаблоны store.home и store.product с деревом блоков
- настроить кастомные маршруты магазина в store/routes.json
- подключить базовую тему vtex.store-theme в manifest.json
- разграничить правки между темой, кодом React и Site Editor
Примеры запросов агенту
- Проверь store/blocks.json на соответствие зависимостям в manifest.json
- Добавь новый кастомный маршрут витрины через store/routes.json
- Собери дерево блоков для шаблона store.custom с контейнером flex-layout.row
Как установить vtex-io-storefront-theme-app
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a claude-code2Вручную: положить файлы
~/.claude/skills/vtex-io-storefront-theme-app/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vtex-io-storefront-theme-app/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a codex2Вручную: положить файлы
.agents/skills/vtex-io-storefront-theme-app/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a cursor2Вручную: положить файлы
.cursor/skills/vtex-io-storefront-theme-app/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vtex/skills vtex-io-storefront-theme-app2Вручную: положить файлы
.github/skills/vtex-io-storefront-theme-app/SKILL.md1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a gemini-cli2Командой платформы
gemini skills install https://github.com/vtex/skills --path skills/vtex-io-storefront-theme-appВручную: положить файлы
.devin/skills/vtex-io-storefront-theme-app/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о vtex-io-storefront-theme-app
Как установить vtex-io-storefront-theme-app в Claude Code?
Выполните команду npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a claude-code.
Что делает скилл vtex-io-storefront-theme-app?
Он задаёт правила компоновки тем витрины в VTEX IO, включая декларацию маршрутов, связывание блоков и работу со схемами для Site Editor.
Почему тема не должна содержать React-компоненты?
В архитектуре VTEX IO темы только связывают блоки сторонних приложений и базовой темы в шаблоны. Реализация логики на React выносится в отдельные приложения компонентов.
