building-storefronts

Name: building-storefronts
Availability: InStock
Author: aydadevelop

Enforce Medusa JS SDK and React Query patterns for storefront development.

Updated Aug 23, 2026

Search Tags:#sdk #api integration #frontend development #react query #storefront #medusa

Ready to run

npx skills add https://github.com/aydadevelop/turborepo-starter --skill building-storefronts-aydadevelop

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: building-storefronts
Source: https://github.com/aydadevelop/turborepo-starter/tree/main/.agents/skills/medusa/building-storefronts
Command: npx skills add https://github.com/aydadevelop/turborepo-starter --skill building-storefronts-aydadevelop

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the development of Medusa storefronts by providing clear patterns for SDK integration, data fetching, and API interactions, preventing common errors and ensuring efficient implementation.

Core Features & Use Cases

Medusa JS SDK Usage: Guides on correctly using the SDK for both built-in and custom API routes.
React Query Patterns: Demonstrates best practices for data fetching and state management.
Error Handling & Optimistic Updates: Provides strategies for robust user experiences.
Use Case: Implementing a product listing page on a Medusa storefront, ensuring data is fetched efficiently using React Query and displayed correctly, with proper error handling for API calls.

Quick Start

Load the references/frontend-integration.md file to understand how to call custom Medusa API routes from your storefront.

Frequently Asked Questions about building-storefronts

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

FAQPage Schema

How do I fetch data from a Medusa storefront using React Query?▼

Use the Medusa JS SDK within your React Query hooks to fetch storefront data, ensuring proper query invalidation and adherence to SDK client fetch rules. This approach prevents common API communication errors and maintains efficient state management.

What is the best way to call custom Medusa API routes from a frontend application?▼

The best way to call custom Medusa API routes is by using the Medusa JS SDK client. You can load the frontend integration reference to understand the exact patterns for correctly invoking these custom routes from your storefront application.

Why are prices displaying incorrectly on my Medusa storefront?▼

Prices may display incorrectly on your Medusa storefront if you do not follow the critical SDK rules for price display. Enforcing correct usage of the Medusa JS SDK ensures that pricing data from API responses is rendered accurately in your frontend.

How do I handle API errors and optimistic updates in a Medusa storefront?▼

Handle API errors and optimistic updates in a Medusa storefront by applying React Query patterns for robust state management. The Skill provides specific strategies to manage optimistic updates and error handling for a seamless e-commerce user experience.

Do I need React Query to build a Medusa storefront with the JS SDK?▼

Using React Query with the Medusa JS SDK is recommended to ensure proper query invalidation and state management. It addresses common frontend integration pitfalls and enforces correct data fetching patterns for e-commerce applications.