sales-app-extensibility — скилл для Claude Code
Помогает разрабатывать, настраивать и собирать расширения для VTEX Sales App. Проводит через семь этапов от проверки структуры проекта до деплоя.
npx skills add vtex/skills --skill sales-app-extensibility -a claude-codeЧто делает sales-app-extensibility
Скилл координирует создание интерфейсных расширений для корзины, меню и карточки товара в VTEX Sales App. Процесс строго разбит на семь шагов. Сначала агент проверяет окружение, затем собирает требования, планирует архитектуру, генерирует код компонентов и документацию. Стили компонентов пишутся только в обычном CSS. Модули .module.css платформа не поддерживает.
Внутри учитываются жёсткие ограничения среды. Все регистрируемые компоненты обязаны возвращать JSX.Element. Если вернуть null, компилятор TypeScript выдаст ошибку. При отсутствии данных код должен отдавать пустой фрагмент <></>. Скилл также следит за хуками useCart, useCartItem и usePDP, требуя проверять опциональные поля перед чтением.
Без настроенного проекта FastStore и рабочего пакета @vtex/sales-app генерация кода сразу остановится.
Какие задачи решает
- встроить блок рекомендаций или гарантий в карточку товара
- добавить сервисы и акции на страницу корзины
- сгенерировать типизированный компонент под точки расширения VTEX Sales App
- настроить безопасный вызов API через прокси VTEX IO
Примеры запросов агенту
- Создай расширение для корзины в точке cart.cart-item.after с показом скидок
- Добавь блок с гарантией на страницу товара через точку pdp.sidebar.after
- Подключи внешний API через прокси VTEX IO для расширения меню menu.drawer-content
Как установить sales-app-extensibility
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill sales-app-extensibility -a claude-code2Вручную: положить файлы
~/.claude/skills/sales-app-extensibility/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/sales-app-extensibility/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill sales-app-extensibility -a codex2Вручную: положить файлы
.agents/skills/sales-app-extensibility/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill sales-app-extensibility -a cursor2Вручную: положить файлы
.cursor/skills/sales-app-extensibility/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vtex/skills sales-app-extensibility2Вручную: положить файлы
.github/skills/sales-app-extensibility/SKILL.md1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill sales-app-extensibility -a gemini-cli2Командой платформы
gemini skills install https://github.com/vtex/skills --path skills/sales-app-extensibilityВручную: положить файлы
.devin/skills/sales-app-extensibility/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vtex/skills --skill sales-app-extensibility -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о sales-app-extensibility
Как установить sales-app-extensibility в Claude Code?
Выполните команду npx skills add vtex/skills --skill sales-app-extensibility -a claude-code. Конфигурация запишется в файл ~/.claude/skills/sales-app-extensibility/SKILL.md.
Что делает sales-app-extensibility?
Он автоматизирует разработку фронтенд-модулей для VTEX Sales App. Скилл создаёт компоненты на React и TypeScript, связывает хуки с разрешёнными слотами интерфейса и формирует файлы документации.
Какие требования нужны для работы скилла?
В корне проекта должен быть развёрнут FastStore с файлами faststore.json, turbo.json и tsconfig.json. Также требуется настроенный воркспейс с установленным пакетом @vtex/sales-app.
