> **storefront-best-practices** — skill 1 of 18 in [medusajs/medusa-agent-skills](https://skillsdocs.com/medusajs/medusa-agent-skills).
>
> Book (all skills, one file): https://skillsdocs.com/medusajs/medusa-agent-skills.md
> Machine manifest: https://skillsdocs.com/medusajs/medusa-agent-skills/.well-known/agent-skills/index.json
> Install the book: `npx skills add medusajs/medusa-agent-skills`
> Upstream: https://github.com/medusajs/medusa-agent-skills/blob/main/plugins/ecommerce-storefront/skills/storefront-best-practices/SKILL.md @ `main`
> Raw bytes, no header: https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/SKILL.md
> Base for relative paths: https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/
> Licence: No licence detected — all rights reserved by its authors
>
> Bundled files (27), referenced from this skill's directory:
>   - `reference/components/breadcrumbs.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/breadcrumbs.md
>   - `reference/components/cart-popup.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/cart-popup.md
>   - `reference/components/country-selector.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/country-selector.md
>   - `reference/components/footer.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/footer.md
>   - `reference/components/hero.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/hero.md
>   - `reference/components/megamenu.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/megamenu.md
>   - `reference/components/navbar.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/navbar.md
>   - `reference/components/popups.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/popups.md
>   - `reference/components/product-card.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/product-card.md
>   - `reference/components/product-reviews.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/product-reviews.md
>   - `reference/components/product-slider.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/product-slider.md
>   - `reference/components/search.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/components/search.md
>   - `reference/connecting-to-backend.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/connecting-to-backend.md
>   - `reference/design.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/design.md
>   - `reference/features/promotions.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/features/promotions.md
>   - `reference/features/wishlist.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/features/wishlist.md
>   - `reference/layouts/account.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/layouts/account.md
>   - `reference/layouts/cart.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/layouts/cart.md
>   - `reference/layouts/checkout.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/layouts/checkout.md
>   - `reference/layouts/home-page.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/layouts/home-page.md
>   - `reference/layouts/order-confirmation.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/layouts/order-confirmation.md
>   - `reference/layouts/product-details.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/layouts/product-details.md
>   - `reference/layouts/product-listing.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/layouts/product-listing.md
>   - `reference/layouts/static-pages.md` — https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/reference/layouts/static-pages.md
>   - …and 3 more, listed in https://skillsdocs.com/api/v1/books/medusajs/medusa-agent-skills/skills/storefront-best-practices
>
> Content © its authors. This skill's body is not served here; the links above are. Takedown: https://github.com/DreambaseAI/skillsdocs/issues/new?labels=takedown&title=Takedown+request

# storefront-best-practices

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.

No licence could be detected for this skill at either the repository or the skill level, so its body is not reproduced here. Read it upstream:

https://raw.githubusercontent.com/medusajs/medusa-agent-skills/main/plugins/ecommerce-storefront/skills/storefront-best-practices/SKILL.md