storefront-best-practices — Skills

What it does

Adding checkout page/flow - Payment, shipping, order placement

Implementing cart - Cart page, cart popup, add to cart functionality

Building product pages - Product details, product listings, product grids

Creating navigation - Navbar, megamenu, footer, mobile menu

Integrating Medusa backend - SDK setup, cart, products, payment

Any storefront component - Homepage, search, filters, account pages

Building new ecommerce storefronts from scratch

Requirements & configuration

CRITICAL: Cart count updates require aria-live="polite" - Screen readers won't announce without it

State out loud to the user: "I need to verify the correct method for [operation]. Let me check [MCP server/documentation]."

When you need to choose between implementation patterns, load the relevant reference file:

Need a headless commerce solution

Need powerful promotion and discount engine

storefront best practices

Source

Repository: https://github.com/medusajs/medusa-agent-skills

storefront-best-practices FAQ

What does the storefront-best-practices skill do?

ALWAYS use this skill when working on ecommerce storefronts, online stores, shopping sites. Use for ANY storefront component including checkout pages, cart, payment flows, product pages, product listings, navigation, homepage, or ANY page/component in a storefront. CRITICAL for adding checkout, implementing cart, integrating Medusa backend, or building any ecommerce functionality. Framework-agnostic (Next.js, SvelteKit, TanStack Start, React, Vue). Provides patterns, decision frameworks, backend integration guidance. Adding checkout page/flow - Payment, shipping, order placement Implementing cart - Cart page, cart popup, add to cart functionality

What does storefront-best-practices require?

CRITICAL: Cart count updates require aria-live="polite" - Screen readers won't announce without it State out loud to the user: "I need to verify the correct method for [operation]. Let me check [MCP server/documentation]." When you need to choose between implementation patterns, load the relevant reference file: Need a headless commerce solution Need powerful promotion and discount engine

How do I install storefront-best-practices?

Run: npx -y skills add https://github.com/medusajs/medusa-agent-skills --skill storefront-best-practices --agent claude-code — the source lives at github.com/medusajs/medusa-agent-skills.

Maintain storefront-best-practices?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[storefront-best-practices on getagentictools](https://getagentictools.com/skills/medusajs-medusa-agent-skills-storefront-best-practices?ref=badge)

npx agentictools info skills/medusajs-medusa-agent-skills-storefront-best-practices

The second line is the CLI lookup for this page — handy in READMEs and docs.