# storefront-best-practices

This skill guides storefront work, from product pages and carts to checkout flows. Use it when building or changing an online store interface.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4600 installs · ★ 235
- Author: medusajs
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/medusajs/medusa-agent-skills/tree/HEAD/plugins/ecommerce-storefront/skills/storefront-best-practices/SKILL.md
- Updated: 2026-10-21
- HTML: https://affpapa.org/en/nevibecode/skills/storefront-best-practices

## What it does

The skill guides work on store pages such as product listings, product details, carts, payment flows, navigation, search and account areas. Its references cover interface patterns, accessibility, mobile layouts, SEO and Medusa backend work.

Before any UI component is created, it calls for reading `reference/design.md` to check existing tokens, fonts, spacing and patterns. Task-specific references cover areas such as checkout in `reference/layouts/checkout.md`, Medusa setup in `reference/medusa.md`, and search work in `reference/seo.md`.

It also points to concrete implementation checks: cart count changes use `aria-live="polite"`, fixed bottom controls account for safe areas, and below-the-fold images get lazy loading. Reading `reference/design.md` first adds a step before edits, so style changes are less likely to drift from the existing interface.

## Install

### Claude Code (native platform)

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

2. **Manually: put the files in place**
- File: `~/.claude/skills/storefront-best-practices/SKILL.md` — Copy the whole skill folder; for one project use .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. **Manually: put the files in place**
- File: `.agents/skills/storefront-best-practices/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

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

2. **Manually: put the files in place**
- File: `.cursor/skills/storefront-best-practices/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

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

2. **Manually: put the files in place**
- File: `.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. **Platform CLI**
```bash
gemini skills install https://github.com/medusajs/medusa-agent-skills --path plugins/ecommerce-storefront/skills/storefront-best-practices
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/storefront-best-practices/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

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

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/medusajs/medusa-agent-skills/tree/HEAD/plugins/ecommerce-storefront/skills/storefront-best-practices/SKILL.md

## When to use it
- build a checkout page
- add a cart with item count updates
- connect a storefront to Medusa
- make product cards accessible
- prepare product pages for SEO

## Example prompts
- Apply storefront-best-practices while adding a cart page.
- Use storefront-best-practices to connect the product catalogue to Medusa.
- Apply storefront-best-practices when building a product page and check server-rendered markup.

## Similar
- [storefront-builder](https://affpapa.org/en/nevibecode/skills/storefront-builder.md) — skill · 384 installs
- [saleor-storefront](https://affpapa.org/en/nevibecode/skills/saleor-storefront.md) — skill · 2300 installs
- [vtex-io-storefront-theme-app](https://affpapa.org/en/nevibecode/skills/vtex-io-storefront-theme-app.md) — skill · 1000 installs
- [shopify-storefront-graphql](https://affpapa.org/en/nevibecode/skills/shopify-storefront-graphql.md) — skill · 1 install
- [amazon-storefront-design](https://affpapa.org/en/nevibecode/skills/amazon-storefront-design.md) — skill · 1100 installs
- [vtex-io-storefront-react](https://affpapa.org/en/nevibecode/skills/vtex-io-storefront-react.md) — skill · 1200 installs

From the same set: [medusajs/medusa-agent-skills](https://affpapa.org/en/nevibecode/by/medusajs/medusa-agent-skills.md) — 14 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md