storefront-best-practices
Comprehensive guidance for building modern ecommerce storefronts with patterns, component architecture, and backend integration.
- Covers all storefront components: navigation, product pages, cart, checkout, and account pages across any framework (Next.js, SvelteKit, React, Vue)
- Includes critical accessibility patterns (aria-live for cart updates), mobile optimization (safe-area-inset, 44px touch targets), and SEO requirements (Product schema, Core Web Vitals)
- Provides mandatory backend SDK verification workflow to prevent API integration errors; includes Medusa-specific guidance for pricing, regions, and SDK methods
- References 30+ detailed pattern files for component selection, layout decisions, and feature implementation; load relevant files before coding each section
- Highlights 40+ common ecommerce mistakes across cart/navigation, product browsing, checkout, mobile UX, and backend integration with specific error prevention steps
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
More from medusajs/medusa-agent-skills
building-with-medusa
Load automatically when planning, researching, or implementing ANY Medusa backend features (custom modules, API routes, workflows, data models, module links, business logic). REQUIRED for all Medusa backend work in ALL modes (planning, implementation, exploration). Contains architectural patterns, best practices, and critical rules that MCP servers don't provide.
1.8Kbuilding-admin-dashboard-customizations
Load automatically when planning, researching, or implementing Medusa Admin dashboard UI (widgets, custom pages, forms, tables, data loading, navigation). REQUIRED for all admin UI work in ALL modes (planning, implementation, exploration). Contains design patterns, component usage, and data loading patterns that MCP servers don't provide.
1.8Kbuilding-storefronts
Load automatically when planning, researching, or implementing Medusa storefront features (calling custom API routes, SDK integration, React Query patterns, data fetching). REQUIRED for all storefront development in ALL modes (planning, implementation, exploration). Contains SDK usage patterns, frontend integration, and critical rules for calling Medusa APIs.
1.6Klearning-medusa
Load automatically when user asks to learn Medusa development (e.g., "teach me how to build with medusa", "guide me through medusa", "I want to learn medusa"). Interactive guided tutorial where Claude acts as a coding bootcamp instructor, teaching step-by-step with checkpoints and verification.
1.3Kdb-migrate
Run database migrations in Medusa
1.1Kdb-generate
Generate database migrations for a Medusa module
1.1K