Storefront Best Practices

This is required reading if you're building any ecommerce UI with Claude. It's opinionated about workflow: load the design reference before touching components, check backend integration docs before calling SDK methods, and always refer back to the relevant reference files during implementation. The skill covers everything from product pages to checkout flows, with specific guidance on Medusa backend integration. What makes it useful is the specificity: it tells you exactly which reference files to load for navbars versus product listings versus checkout, and it's aggressive about preventing common mistakes like hardcoding categories or forgetting aria-live on cart counts. Treat it like a checklist that keeps you from shooting yourself in the foot.

skills.sh installs: 5K
GitHub stars: 236
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add medusajs/medusa-agent-skills --skill storefront-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

Ecommerce Storefront Best Practices

Comprehensive guidance for building modern, high-converting ecommerce storefronts covering UI/UX patterns, component design, layout structures, SEO optimization, and mobile responsiveness.

When to Apply

ALWAYS load this skill when working on ANY storefront task:

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
Improving existing shopping experiences and conversion rates
Optimizing for usability, accessibility, and SEO
Designing mobile-responsive ecommerce experiences
Making a storefront agent-friendly (AI shopping agents, AI search, agentic commerce)