Why shouldn't I use JSON.stringify with the Medusa SDK?

The Medusa SDK handles JSON serialization automatically; manual stringification causes double-serialization which will result in server-side parsing errors.

How does this skill help with React Query?

It provides hierarchical query key structures and patterns for invalidating data after mutations to ensure your storefront UI remains synchronized with the backend.

Can I use this for custom Medusa API routes?

Yes, it specifically covers using sdk.client.fetch() to communicate with custom endpoints while ensuring standard authentication and headers are maintained.

When should I load this skill?

You should load this skill whenever you are planning, researching, or implementing features for any frontend application powered by Medusa.

Medusa Storefront Development

Name: Medusa Storefront Development
Author: medusajs

bymedusajs

•

E-commerce Solutions

Streamlines Medusa storefront integration by providing standardized patterns for SDK usage, React Query data fetching, and custom API communication.

About

This skill equips Claude with the specific expertise needed to build robust e-commerce frontends using the Medusa framework. It enforces critical best practices, such as proper SDK serialization and hierarchical React Query keys, while guiding developers through implementing complex features like optimistic updates and error handling. Whether you are calling custom API routes or managing complex cart logic, this skill ensures your storefront follows official Medusa conventions to deliver a production-grade user experience.

Key Features

Hierarchical cache management and query invalidation strategies
Automated Medusa SDK usage patterns for custom and built-in API routes
77 GitHub stars
Critical serialization rules to prevent common SDK integration errors
Standardized React Query implementation for efficient data fetching and mutations
Best practices for UI loading states and optimistic error handling

Use Cases

Setting up complex data fetching patterns with React Query and the Medusa SDK
Implementing cart mutations with optimistic updates and robust error recovery
Integrating custom Medusa API routes into a Next.js or React storefront

About

Key Features

Hierarchical cache management and query invalidation strategies
Automated Medusa SDK usage patterns for custom and built-in API routes
77 GitHub stars
Critical serialization rules to prevent common SDK integration errors
Standardized React Query implementation for efficient data fetching and mutations
Best practices for UI loading states and optimistic error handling

Use Cases

Setting up complex data fetching patterns with React Query and the Medusa SDK
Implementing cart mutations with optimistic updates and robust error recovery
Integrating custom Medusa API routes into a Next.js or React storefront