# storefront-best-practices

Скилл задаёт правила для разработки витрин интернет-магазина: от карточек товаров до корзины и оформления заказа. Нужен при создании или доработке интерфейса магазина.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4600 установок · ★ 235
- Автор: medusajs
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/medusajs/medusa-agent-skills/tree/HEAD/plugins/ecommerce-storefront/skills/storefront-best-practices/SKILL.md
- Обновлён: 2026-10-21
- HTML: https://affpapa.org/nevibecode/skills/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` означает лишний шаг перед правками, зато стили не будут добавляться вслепую.

## Установка

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

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install medusajs/medusa-agent-skills storefront-best-practices
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

## Когда брать
- собрать страницу оформления заказа
- добавить корзину и счётчик товаров
- подключить витрину к Medusa
- сделать карточки товаров доступными
- подготовить страницы товаров для SEO

## Примеры запросов агенту
- Примени скилл storefront-best-practices и добавь страницу корзины.
- Используй storefront-best-practices для подключения каталога к Medusa.
- Примени storefront-best-practices при создании страницы товара и проверь серверную разметку.

## Похожие
- [storefront-builder](https://affpapa.org/nevibecode/skills/storefront-builder.md) — скилл · 384 установки
- [shopify-storefront-graphql](https://affpapa.org/nevibecode/skills/shopify-storefront-graphql.md) — скилл · 1 установка
- [e-commerce-retail](https://affpapa.org/nevibecode/skills/e-commerce-retail.md) — скилл · 645 установок
- [forms-inputs-checkout](https://affpapa.org/nevibecode/skills/forms-inputs-checkout.md) — скилл · 524 установки
- [ecommerce-checkout-optimization](https://affpapa.org/nevibecode/skills/ecommerce-checkout-optimization.md) — скилл · 1200 установок
- [product-page-seo](https://affpapa.org/nevibecode/skills/adobe-product-page-seo.md) — скилл · 314 установок

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

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