storefront-best-practiceslisted

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.
medusajs/medusa-agent-skills · ★ 215 · Web & Frontend · score 79

Install: claude install-skill medusajs/medusa-agent-skills

# 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 **Example prompts that should trigger this skill:** - "Add a checkout page" - "Implement shopping cart" - "Create product listing page" - "Connect to Medusa backend" - "Add navigation menu" - "Build homepage for store" ## CRITICAL: Load Reference Files When Needed **⚠️ ALWAYS load `reference/design.md` BEFORE creating ANY UI component** - Discovers existing design tokens (colors, fonts, spacing, patterns) - Prevents introducing inconsistent styles - Provides guardrails for maintaining brand consistency - **Required for every comp