AIKraft/AI/Войти
AIKraft/Skills/Расширяемость приложения для продаж

Расширяемость приложения для продаж

Apply when building, customizing, or deploying extensions for VTEX Sales App. Covers the complete 7-step workflow from prerequisite checks through code generation to deployment, including extension points (cart, PDP, menu), React hooks (useCart, usePDP, useCartItem, useCurrentUser, useExtension), TypeScript types, secure API integration patterns, and API documentation ingestion (OpenAPI, URLs, or

vtex official Дизайн

Что делает навык

Навык обеспечивает полный цикл создания, настройки и развертывания расширений (extensions) для VTEX Sales App в рамках проекта FastStore. Он охватывает процесс от проверки предварительных условий и выбора extension points до генерации TypeScript-кода, документации и деплоя с соблюдением строгих правил безопасности и типов.

Когда применять

  • Добавление функционала на страницу корзины (например, промокоды, лояльность, услуги) с использованием хуков useCart или useCartItem.
  • Интеграция внешних API в расширения для страницы товара (PDP) или меню с выбором стратегии аутентификации (VTEX IO Proxy или Direct Auth).
  • Генерация кода расширения с валидацией типов TypeScript, использованием правильных extension point имен и соблюдением ограничений (например, возврат JSX.Element, а не null).
  • Создание документации для разработанного расширения в формате markdown внутри папки docs/.

Как работает

  1. Шаг 0: Проверка предварительных условий — убедиться, что в проекте установлены FastStore и модуль Sales App; при отсутствии — остановить процесс.
  2. Шаг 1: Discovery — определить задачу пользователя, выбрать стратегию аутентификации API и, при наличии документации, извлечь типы данных.
  3. Шаг 2: Планирование — сопоставить требования с extension point, хуками и шаблоном кода, согласовать план создания файлов с пользователем.
  4. Шаг 3: Генерация кода — создать Component.tsx, Component.css (plain CSS) и index.tsx с использованием defineExtensions, соблюдая все hard constraints.
  5. Шаг 4: Документирование — сгенерировать файл docs/<ExtensionName>.md с описанием расширения.
  6. Шаг 5 и 6: Тестирование и деплой — предоставить команды для локальной разработки, сборки и инструкции по развертыванию.

Примеры запросов агенту

Создай расширение для VTEX Sales App, которое добавляет бейдж 'Скидка' на страницу товара (PDP) и использует хук usePDP.
Разработай расширение для корзины, которое отображает дополнительную информацию о товаре через внешний API, используя стратегию VTEX IO Proxy.
Напиши код и документацию для расширения меню, которое показывает имя текущего пользователя, используя хук useCurrentUser.

Что понадобится

  • Установленный FastStore проект с конфигурационными файлами (biome.json, faststore.json, package.json, tsconfig.json, turbo.json).
  • Модуль Sales App, установленный в workspace проекта (путь packages/sales-app).
  • Доступ к документации API (OpenAPI, URL или текст) для корректной генерации TypeScript-интерфейсов, если требуется интеграция с внешним сервисом.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «sales-app-extensibility» из репозитория: # https://github.com/vtex/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r sales-app-extensibility/ ~/.claude/skills/sales-app-extensibility/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.