AIKraft/AI/Войти
AIKraft/Skills/faststore Витрина магазина

faststore Витрина магазина

Core coding rules and workflow for developing VTEX FastStore storefronts. Use when starting any FastStore development task, writing TypeScript/React components, creating section overrides, extending the BFF, or styling. Covers all primary conventions, safety rules, and the development workflow used across every FastStore project.

vtex official Дизайн

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

Набор правил и рабочего процесса для разработки storefronts на VTEX FastStore, охватывающий соглашения по кодированию, безопасности, работе с CMS и стилизацией. Обеспечивает создание корректных, поддерживаемых решений в рамках архитектуры FastStore без использования сторонних фреймворков или ручного редактирования сгенерированных файлов.

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

  • Разработка и переопределение (override) секций магазина с использованием компонентов @faststore/ui и регистрации в index.tsx
  • Создание кастомных компонентов и стилей с соблюдением правил CSS Modules и использования дизайн-токенов
  • Синхронизация схем CMS через faststore cms-sync или ручную генерацию и загрузку схем через VTEX CLI
  • Отладка и рефакторинг React-компонентов в среде FastStore с учетом ограничений фреймворка

Как работает

  1. Проанализировать задачу и требования, уточнив недостающие детали у пользователя перед началом работы
  2. Написать код на TypeScript/React, используя компоненты @faststore/components или @faststore/ui, и стилизовать их через SCSS модули с оберткой
  3. Зарегистрировать новые секции в src/components/index.tsx с ключом, соответствующим $componentKey в JSONC-файлах
  4. Проверить существование файлов через терминал (ls) перед созданием новых ресурсов, избегая папки .faststore/
  5. Запустить faststore cms-sync (или аналоги vtex content) для генерации и загрузки схем CMS после изменений в JSONC
  6. Проверить результат загрузки схемы и сообщить пользователю о статусе или необходимых действиях в интерфейсе VTEX

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

Создай секцию 'DailyOffers' в FastStore, используя компоненты @faststore/ui, и зарегистрируй её в index.tsx
Переопредели существующую секцию каталога, применив кастомные SCSS стили через CSS Modules без использования глобальных стилей
Обнови схему CMS для новой страницы и выполни синхронизацию через faststore cms-sync, проверив успешность загрузки

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

  • Установленный глобально VTEX CLI или @faststore/cli
  • Доступ к проекту FastStore с файлами discovery.config.js и cms/faststore/components

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

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

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

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