building-storefronts

Standardize Medusa JS SDK and React Query integration for storefront applications.

2|Updated Mar 29, 2026
One-click install
npx skills add https://github.com/NagyVikt/codex-plugins --skill building-storefronts-nagyvikt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: building-storefronts
Source: https://github.com/NagyVikt/codex-plugins/tree/main/plugins/medusa/skills/building-storefronts
Command: npx skills add https://github.com/NagyVikt/codex-plugins --skill building-storefronts-nagyvikt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill resolves common integration challenges when building Medusa storefronts, specifically preventing authentication errors and data handling mistakes that occur when using standard fetch instead of the official SDK.

Core Features & Use Cases

  • SDK Integration: Provides strict patterns for using the Medusa JS SDK to ensure correct header propagation and authentication.
  • React Query Patterns: Standardizes data fetching, mutation handling, and cache management for storefront components.
  • Use Case: When building a custom product review feature, this skill ensures you use the correct SDK client methods and React Query hooks to handle optimistic updates and error states without breaking the API request.

Quick Start

Load the building-storefronts skill to implement the Medusa SDK and React Query patterns for your custom storefront API routes.

Frequently Asked Questions about building-storefronts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate the Medusa JS SDK with React Query for storefront data fetching?

To integrate the Medusa JS SDK with React Query, use strict SDK client methods for data fetching and standardize React Query hooks to manage mutations and hierarchical cache for your storefront components.

Why do I get authentication errors using standard fetch in my Medusa storefront?

Authentication errors occur because standard fetch mishandles headers. Using the official Medusa JS SDK ensures correct header propagation and authentication, preventing these integration errors.

What is the best way to manage hierarchical cache in a Medusa storefront?

The best way to manage hierarchical cache is standardizing React Query patterns alongside the Medusa JS SDK, ensuring robust state management and correct JSON serialization for e-commerce user interfaces.

How do I handle optimistic updates for custom Medusa storefront features?

Handle optimistic updates by applying strict React Query mutation patterns with the Medusa JS SDK, ensuring correct SDK client methods manage error states without breaking API requests.

Does the Medusa JS SDK support custom API routes for e-commerce interfaces?

Yes, the Medusa JS SDK supports custom API routes. It provides strict patterns for development, ensuring correct header handling and JSON serialization for robust storefront performance.

When should I not use standard fetch for Medusa storefront integration?

You should not use standard fetch when building custom Medusa storefront features, as it causes data handling mistakes and authentication errors that the official SDK prevents.