# building-storefronts

Скилл для разработки витрины на Medusa: подсказывает, как вызывать API через SDK и React Query, чтобы не сломать запросы.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4200 установок · ★ 235
- Автор: medusajs
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/medusajs/medusa-agent-skills/tree/HEAD/plugins/medusa-dev/skills/building-storefronts/SKILL.md
- Обновлён: 2026-10-21
- HTML: https://affpapa.org/nevibecode/skills/building-storefronts

## Что делает

Скилл описывает, как собирать фронтенд магазина на Medusa. Внутри — правила работы с Medusa JS SDK, паттерны React Query для загрузки и изменения данных, вызовы кастомных API-роутов. Агент подгружает его сам, когда вы планируете или пишете код витрины.

Главное правило: все запросы идут через SDK, обычный `fetch()` не подходит. SDK сам подставляет нужные заголовки — publishable API key для store-роутов, авторизацию для admin. Тело запроса передаётся обычным объектом, `JSON.stringify()` ломает запрос двойной сериализацией. Для встроенных эндпоинтов берутся готовые методы вроде `sdk.store.product.list()`, для кастомных роутов — `sdk.client.fetch()`.

Отдельно отмечена цена: значения приходят как есть, 49.99 — это 49.99, делить на 100 не нужно. Это частая ошибка, из-за которой витрина показывает копейки вместо рублей. Для детальных примеров скилл требует подгрузить `references/frontend-integration.md` перед написанием кода. Рядом с ним стоит скилл `building-with-medusa` — он про бэкенд, который витрина вызывает.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install medusajs/medusa-agent-skills building-storefronts
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/medusajs/medusa-agent-skills --path plugins/medusa-dev/skills/building-storefronts
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/medusajs/medusa-agent-skills/tree/HEAD/plugins/medusa-dev/skills/building-storefronts/SKILL.md

## Когда брать
- вызвать кастомный API-роут Medusa из витрины
- подключить Medusa JS SDK во фронтенд-приложении
- настроить загрузку данных через React Query
- сделать мутацию с оптимистичным обновлением и откатом при ошибке
- поправить отображение цены, которую случайно поделили на 100

## Примеры запросов агенту
- Помоги вызвать кастомный роут /store/reviews из витрины Medusa через SDK
- Настрой useQuery для списка товаров и useMutation для добавления отзыва
- Проверь мой код витрины Medusa на ошибки работы с SDK

## Похожие
- [storefront-builder](https://affpapa.org/nevibecode/skills/storefront-builder.md) — скилл · 384 установки
- [shopify-storefront-graphql](https://affpapa.org/nevibecode/skills/shopify-storefront-graphql.md) — скилл · 1 установка
- [wix-headless](https://affpapa.org/nevibecode/skills/wix-headless.md) — скилл · 338 установок
- [building-livekit-agents](https://affpapa.org/nevibecode/skills/building-livekit-agents.md) — скилл · 419 установок
- [building-emdash-site](https://affpapa.org/nevibecode/skills/building-emdash-site.md) — скилл · 756 установок
- [expo-data-fetching](https://affpapa.org/nevibecode/skills/expo-data-fetching.md) — скилл · 27500 установок

Из того же набора: [medusajs/medusa-agent-skills](https://affpapa.org/nevibecode/by/medusajs/medusa-agent-skills.md) — 11 карточек

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