skills.rest
afterwork
afterworkOFFICIAL
Explore all skills by this author →
GitHub

building-storefronts

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

Updated Mar 22, 2026
Search Tags:#frontend#sdk#react-query#storefront#api-routes#medusa#development-patterns
One-click install
npx skills add https://github.com/afterwork/arra-aif --skill building-storefronts-afterwork
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-storefronts
Source: https://github.com/afterwork/arra-aif/tree/main/.cursor/skills/building-storefronts
Command: npx skills add https://github.com/afterwork/arra-aif --skill building-storefronts-afterwork

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Storefront development can be complex, requiring consistent patterns for SDK usage, API integration, data fetching, and robust error handling across frontend tasks.

Core Features & Use Cases

  • SDK-guided API calls: Use the Medusa JS SDK for store routes and custom endpoints to ensure proper headers and typing.
  • React Query patterns: Implement GET with useQuery and mutations with useMutation, including cache invalidation and optimistic updates.
  • Frontend integration with API routes: Plan and implement custom storefront API routes and integrate them into the storefront workflow.
  • Error handling and data display: Provide resilient UX by handling errors gracefully and presenting data consistently.

Quick Start

Install the frontend SDK and start integrating Medusa storefront routes following the Frontend SDK Integration guide.

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 SDK into a React storefront?▼

Implement Medusa storefront data fetching using React Query's useQuery for GET requests and useMutation for mutations, applying cache invalidation and optimistic updates for consistent state.

What is the best way to handle API routes in a Medusa storefront?▼

Handle Medusa storefront API routes by planning and implementing custom endpoints, then integrating them into the storefront workflow using SDK-guided API calls for secure and typed data fetching.

How do I implement optimistic updates with React Query in a Medusa storefront?▼

Implement optimistic updates in a Medusa storefront by using React Query's useMutation to instantly update the UI while sending SDK API requests, applying cache invalidation upon successful mutation completion.

Can I use React Query patterns for custom Medusa storefront API routes?▼

Yes, you can use React Query patterns with custom Medusa storefront API routes by fetching data via useQuery and executing mutations through useMutation, maintaining consistent error handling and data display rules.

How do I handle errors gracefully when fetching Medusa storefront data?▼

Handle Medusa storefront data fetching errors gracefully by enforcing consistent error handling rules within your React Query data fetching and mutation patterns to provide a resilient user experience.

Related Skills

Explore More Software Engineering Skills→
NagyViktNagyVikt
2

db-migrate

Execute Medusa CLI database migrations and report applied changes.

Community
Basic
NagyViktNagyVikt
2

building-storefronts

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

Community
Advanced
TechsioCZTechsioCZ
2

implement-cart-and-checkout-platform-flows

Coordinate cart and checkout workflows using storefront-data flow wrappers.

Official
Intermediate
abogoyavlenskyabogoyavlensky

native-data-fetching

Implement network data-fetching and error handling for Expo/React Native apps.

Community
Intermediate