How does it improve backend integration reliability?

It enforces a strict 5-step verification workflow that requires querying documentation or MCP servers before writing any SDK or API code to prevent method name or parameter errors.

Is this skill specifically for MedusaJS?

While it features specialized support for Medusa SDKs and patterns, its ecommerce UI/UX and architectural guidance can be applied to any backend solution.

What frameworks does this ecommerce skill support?

This skill is framework-agnostic and provides guidance for Next.js, SvelteKit, TanStack Start, React, Vue, and other modern web technologies.

Does it include mobile-specific ecommerce optimizations?

Yes, it includes patterns for iOS safe-area-insets, 44px minimum touch targets, and performance optimizations like lazy-loading for mobile product images.

How does it handle storefront SEO?

It provides specific patterns for implementing JSON-LD product schema, structured data, and meta tag management to ensure products rank well in search engines and Google Shopping.

Ecommerce Storefront Best Practices

Name: Ecommerce Storefront Best Practices
Author: medusajs

bymedusajs

•

Eコマースソリューション

Implements high-converting ecommerce interfaces and accessible shopping flows with optimized backend integration patterns.

This skill provides comprehensive guidance for building modern ecommerce storefronts, covering critical UI/UX patterns, mobile responsiveness, and SEO optimization. It offers framework-agnostic implementation strategies for essential shopping components like checkout flows, product listings, and navigation while ensuring seamless integration with the Medusa backend. By enforcing rigorous backend SDK verification and design consistency through specialized reference files, it helps developers avoid common pitfalls and create high-performance, production-ready shopping experiences across any modern web framework.

主な機能

01Mandatory backend SDK verification workflow to prevent API and method errors

0277 GitHub stars

03Framework-agnostic guidance for Next.js, SvelteKit, TanStack Start, React, and Vue

04Automated SEO strategies including JSON-LD product schema and meta tag optimization

05Comprehensive ecommerce component patterns for checkout, carts, and product pages

06Mobile-first design optimization and accessibility standards like aria-live for cart updates

ユースケース

01Integrating dynamic product listings and category navigation with real-time backend data

02Building a full-featured ecommerce storefront from scratch using Medusa or custom backends

03Optimizing shopping cart and checkout flows to improve user conversion and reduce friction

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add medusajs/medusa-agent-skills storefront-best-practices

For use in Claude.ai and ChatGPT

Download Skill