faststore-storefront — скилл для Claude Code
Задаёт правила разработки витрин VTEX FastStore: создание компонентов на React 18, оверрайды секций, синхронизацию CMS-схем и стилизацию на SCSS без нарушения изоляции.
npx skills add vtex/skills --skill faststore-storefront -a claude-codeЧто делает faststore-storefront
Скилл инструктирует агента действовать по стандартам инженеров VTEX при создании витрин на FastStore. Он запрещает модифицировать папку .faststore/, которая перезаписывается при каждой сборке проекта. Прямое обращение к API Next.js блокируется: любые инструменты берутся строго из состава FastStore. Переопределение секций оформляется через getOverriddenSection из @faststore/core с обязательной регистрацией в src/components/index.tsx через дефолтный экспорт.
Для стилей действуют строгие ограничения: разрешены только локальные модули SCSS, обёрнутые в @layer components. Прямой импорт стилей @faststore/ui на верхнем уровне ломает сборку CSS Modules ошибкой чистоты селекторов из-за атрибутов [data-fs-*]. Перед созданием любого файла агент запускает проверку через ls в терминале, чтобы избежать скрытых коллизий в каталогах компонентов и схем. Синхронизация CMS выполняется вызовом faststore cms-sync при наличии глобального VTEX CLI.
Какие задачи решает
- настроить переопределение секций витрины через
getOverriddenSection - оформить модули SCSS без конфликтов специфичности селекторов
[data-fs-*] - связать компоненты React 18 со схемами в
cms/faststore/components/ - очистить повреждённую сборку в каталоге
.faststore/
Примеры запросов агенту
- Создай оверрайд секции Hero с использованием
getOverriddenSectionиз@faststore/core - Напиши SCSS-модуль для карточки товара с правильной изоляцией стилей
@faststore/ui - Синхронизируй новую схему компонента через
faststore cms-sync
Как установить faststore-storefront
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill faststore-storefront -a claude-code2Вручную: положить файлы
~/.claude/skills/faststore-storefront/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/faststore-storefront/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill faststore-storefront -a codex2Вручную: положить файлы
.agents/skills/faststore-storefront/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill faststore-storefront -a cursor2Вручную: положить файлы
.cursor/skills/faststore-storefront/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vtex/skills faststore-storefront2Вручную: положить файлы
.github/skills/faststore-storefront/SKILL.md1Через Skills CLI (Vercel)
npx skills add vtex/skills --skill faststore-storefront -a gemini-cli2Командой платформы
gemini skills install https://github.com/vtex/skills --path skills/faststore-storefrontВручную: положить файлы
.devin/skills/faststore-storefront/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vtex/skills --skill faststore-storefront -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о faststore-storefront
Как установить faststore-storefront в Claude Code?
Выполните в терминале команду npx skills add vtex/skills --skill faststore-storefront -a claude-code.
Что делает faststore-storefront?
Скилл передаёт агенту правила архитектуры FastStore: работу с React 18, безопасную изоляцию стилей SCSS и запрет на прямую правку сгенерированных файлов.
Что делать при повреждении папки .faststore?
Удалите каталог командой rm -rf .faststore и перезапустите локальный сервер через yarn dev. FastStore сгенерирует структуру заново.
