AIKraft/AI/Войти
AIKraft/Skills/VTEX IO: витрина на React

VTEX IO: витрина на React

Apply when building VTEX IO storefront components under react/ for Store Framework experiences. Covers storefront component structure, css-handles, storefront context hooks, browser-safe data fetching, and how components should behave when used as theme blocks. Use for custom storefront UI, product widgets, banners, forms, or reviewing shopper-facing React code in VTEX IO apps.

vtex official Дизайн

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

Навык применяется при создании компонентов витрины (storefront) на React для Store Framework, охватывая структуру компонентов, css-handles, хуки контекста и безопасную загрузку данных. Он обеспечивает создание кастомного UI, виджетов товаров, баннеров и форм, соответствующих стандартам shopper-facing кода в приложениях VTEX IO.

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

  • Создание виджетов товаров или категорий для витрины
  • Разработка пользовательских баннеров, форм и элементов макета, видимых покупателю
  • Использование хуков или провайдеров контекста Storefront (например, useProduct, useRuntime)
  • Стилизация компонентов с помощью css-handles вместо жестко заданных классов
  • Проверка React-кода, ориентированного на покупателя, на соответствие стандартам безопасности и локализации

Как работает

  1. Определить, что компонент является shopper-facing UI, и убедиться, что он безопасен для выполнения в браузере (без Node-only API)
  2. Использовать css-handles для экспорта стилей компонента, избегая произвольных глобальных имен классов
  3. Получать данные через props или документированные хуки и контексты (useProduct, useRuntime, useOrderForm), а не вызывать VTEX API напрямую из браузера
  4. Выносить сложную логику и выборку данных из презентационных компонентов в хуки или контейнеры
  5. Использовать message IDs и helpers из инфраструктуры i18n для всех видимых покупателю строк
  6. Применять семантические HTML-элементы (button, a) вместо div/span с onClick для обеспечения доступности

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

Создай React-компонент баннера для витрины VTEX IO с использованием css-handles и локализацией текста
Как правильно использовать хук useProduct в компоненте витрины, чтобы избежать ошибок серверного рендеринга?
Проверь мой компонент на соответствие правилам shopper-facing кода: использую ли я css-handles и семантические теги?

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

  • Среда выполнения VTEX IO Storefront (browser-safe)
  • Библиотека vtex.css-handles
  • Инфраструктура локализации vtex-io-messages-and-i18n

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

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

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

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