skills.rest
aydadevelop
aydadevelopOFFICIAL
Explore all skills by this author →
GitHub

building-storefronts

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
One-click install
npx skills add https://github.com/aydadevelop/turborepo-starter --skill building-storefronts-aydadevelop
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
shahmirerrorshahmirerror

revenuecat

Configure RevenueCat in-app purchases for Expo/React Native apps.

Community
Advanced
Eng0AIEng0AI
15

gatsby-ecommerce-netlify

Configure a Gatsby e-commerce starter with styled-components for Netlify deployment.

Official
Basic
RheasilviaRheasilvia

shopify

Perform CRUD operations on Shopify store resources via GraphQL APIs.

Community
Advanced
afterworkafterwork

building-storefronts

Plan and develop Medusa storefront features using the Medusa SDK and React Query.

Official
Advanced