# vtex-io-storefront-theme-app

Скилл помогает собирать и настраивать приложения витрины VTEX IO: объявлять маршруты, компоновать блоки шаблонов и связывать тему с Site Editor.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1000 установок · ★ 46
- Автор: vtex
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/vtex/skills/tree/HEAD/skills/vtex-io-storefront-theme-app/SKILL.md
- Обновлён: 2026-10-14
- HTML: https://affpapa.org/nevibecode/skills/vtex-io-storefront-theme-app

## Что делает

Скилл координирует структуру темы витрины VTEX IO. В такой теме почти нет React-кода: она собирает страницы из готовых блоков через файлы в каталоге `store/`, включая `store/blocks.json` и `store/routes.json`. Скилл следит, чтобы в `manifest.json` был прописан сборщик `store` и базовая тема, обычно `vtex.store-theme`. Если забыть объявить сборщик `store`, платформа полностью проигнорирует разметку витрины.

Правила подсказывают, как строить дерево блоков для `store.home`, `store.product` или пользовательских страниц. Каждый идентификатор блока обязан точно совпадать с версией из `manifest.json`, иначе `vtex.pages-graphql` выдаст ошибку `Missing block`. Для чистого кода скилл разграничивает зоны: логика компонентов пишется в отдельных приложениях, а тема задаёт только композицию и схемы параметров `store/contentSchemas.json` для редактора Site Editor.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/vtex-io-storefront-theme-app/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/vtex-io-storefront-theme-app/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/vtex-io-storefront-theme-app/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/vtex-io-storefront-theme-app/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install vtex/skills vtex-io-storefront-theme-app
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/vtex-io-storefront-theme-app/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/vtex/skills --path skills/vtex-io-storefront-theme-app
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/vtex-io-storefront-theme-app/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/vtex/skills/tree/HEAD/skills/vtex-io-storefront-theme-app/SKILL.md

## Когда брать
- связать шаблоны store.home и store.product с деревом блоков
- настроить кастомные маршруты магазина в store/routes.json
- подключить базовую тему vtex.store-theme в manifest.json
- разграничить правки между темой, кодом React и Site Editor

## Примеры запросов агенту
- Проверь store/blocks.json на соответствие зависимостям в manifest.json
- Добавь новый кастомный маршрут витрины через store/routes.json
- Собери дерево блоков для шаблона store.custom с контейнером flex-layout.row

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/frontend-design.md) — скилл · 1025790 установок
- [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · 678700 установок
- [prototype](https://affpapa.org/nevibecode/skills/prototype.md) — скилл · 986201 установка
- [hyperframes](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes.md) — скилл · 1200000 установок
- [hyperframes-cli](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes-cli.md) — скилл · 1300000 установок
- [webapp-testing](https://affpapa.org/nevibecode/skills/webapp-testing.md) — скилл · 186758 установок

Из того же набора: [vtex/skills](https://affpapa.org/nevibecode/by/vtex/skills.md) — 43 карточки

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md