building-storefronts — скилл для Claude Code: витрины Medusa
Скилл для разработки витрины на Medusa: подсказывает, как вызывать API через SDK и React Query, чтобы не сломать запросы.
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a claude-codeЧто делает 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 — он про бэкенд, который витрина вызывает.
Какие задачи решает
- вызвать кастомный API-роут Medusa из витрины
- подключить Medusa JS SDK во фронтенд-приложении
- настроить загрузку данных через React Query
- сделать мутацию с оптимистичным обновлением и откатом при ошибке
- поправить отображение цены, которую случайно поделили на 100
Примеры запросов агенту
- Помоги вызвать кастомный роут /store/reviews из витрины Medusa через SDK
- Настрой useQuery для списка товаров и useMutation для добавления отзыва
- Проверь мой код витрины Medusa на ошибки работы с SDK
Как установить building-storefronts
1Через Skills CLI (Vercel)
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a claude-code2Вручную: положить файлы
~/.claude/skills/building-storefronts/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/building-storefronts/
1Через Skills CLI (Vercel)
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a codex2Вручную: положить файлы
.agents/skills/building-storefronts/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a cursor2Вручную: положить файлы
.cursor/skills/building-storefronts/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install medusajs/medusa-agent-skills building-storefronts2Вручную: положить файлы
.github/skills/building-storefronts/SKILL.md1Через Skills CLI (Vercel)
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a gemini-cli2Командой платформы
gemini skills install https://github.com/medusajs/medusa-agent-skills --path plugins/medusa-dev/skills/building-storefrontsВручную: положить файлы
.devin/skills/building-storefronts/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о building-storefronts
Как установить building-storefronts в Claude?
Выполните npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a claude-code. Скилл окажется по пути ~/.claude/skills/building-storefronts/SKILL.md.
Что делает building-storefronts?
Даёт агенту правила разработки витрины на Medusa: работу с SDK, паттерны React Query, вызов кастомных API-роутов и типичные ошибки вроде JSON.stringify() в теле запроса.
Чем этот скилл отличается от MedusaDocs MCP?
Скилл показывает правильные и неправильные паттерны и загружается при планировании, а MCP-сервер даёт справку по встроенным методам SDK и конфигурации.
