storefront-best-practices — скилл для Claude Code: установка
Скилл задаёт правила для разработки витрин интернет-магазина: от карточек товаров до корзины и оформления заказа. Нужен при создании или доработке интерфейса магазина.
npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a claude-codeЧто делает storefront-best-practices
Скилл направляет работу над страницами магазина, включая каталог, карточку товара, корзину, оплату, навигацию, поиск и личный кабинет. В нём есть рекомендации по интерфейсу, доступности, мобильной вёрстке, SEO и подключению бэкенда Medusa.
Перед созданием любого компонента он требует прочитать reference/design.md, чтобы сверить токены, шрифты, отступы и принятые паттерны. Для отдельных задач предусмотрены профильные справки: например, reference/layouts/checkout.md для оформления заказа, reference/medusa.md для Medusa и reference/seo.md для поисковой оптимизации.
В правилах есть конкретные технические проверки: обновление счётчика корзины через aria-live="polite", безопасная зона у нижних фиксированных элементов и отложенная загрузка изображений вне первого экрана. Требование сначала изучить reference/design.md означает лишний шаг перед правками, зато стили не будут добавляться вслепую.
Какие задачи решает
- собрать страницу оформления заказа
- добавить корзину и счётчик товаров
- подключить витрину к Medusa
- сделать карточки товаров доступными
- подготовить страницы товаров для SEO
Примеры запросов агенту
- Примени скилл storefront-best-practices и добавь страницу корзины.
- Используй storefront-best-practices для подключения каталога к Medusa.
- Примени storefront-best-practices при создании страницы товара и проверь серверную разметку.
Как установить storefront-best-practices
1Через Skills CLI (Vercel)
npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a claude-code2Вручную: положить файлы
~/.claude/skills/storefront-best-practices/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/storefront-best-practices/
1Через Skills CLI (Vercel)
npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a codex2Вручную: положить файлы
.agents/skills/storefront-best-practices/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a cursor2Вручную: положить файлы
.cursor/skills/storefront-best-practices/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install medusajs/medusa-agent-skills storefront-best-practices2Вручную: положить файлы
.github/skills/storefront-best-practices/SKILL.md1Через Skills CLI (Vercel)
npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a gemini-cli2Командой платформы
gemini skills install https://github.com/medusajs/medusa-agent-skills --path plugins/ecommerce-storefront/skills/storefront-best-practicesВручную: положить файлы
.devin/skills/storefront-best-practices/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о storefront-best-practices
Как установить storefront-best-practices в Claude Code?
Выполните npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a claude-code, затем повторите npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a claude-code. Файл скилла размещается в ~/.claude/skills/storefront-best-practices/SKILL.md.
Что делает storefront-best-practices?
Скилл даёт агенту правила для создания и изменения витрин интернет-магазинов. Он охватывает интерфейсные компоненты, работу с Medusa, доступность, мобильные экраны и SEO.
Какие файлы нужно открыть перед работой с компонентом?
Перед любым UI-компонентом требуется reference/design.md. Для конкретной задачи скилл задаёт дополнительные файлы, например справку по checkout, навигации, Medusa или SEO.
