Skip to main content
affpapa.org
RU EN
skill CX Codex

building-storefronts — Claude Code skill for Medusa storefronts

A skill for building Medusa storefronts: it tells the agent how to call APIs through the SDK and React Query without breaking requests.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a claude-code
Open on GitHub

What building-storefronts does

This skill covers frontend work on a Medusa store. It holds rules for the Medusa JS SDK, React Query patterns for fetching and mutating data, and calls to custom API routes. The agent loads it on its own when you plan or write storefront code.

The core rule: every request goes through the SDK, plain fetch() is out. The SDK adds the headers itself — publishable API key for store routes, auth for admin. Bodies are passed as plain objects, and JSON.stringify() breaks the request by double-serializing it. Built-in endpoints use existing methods like sdk.store.product.list(), custom routes use sdk.client.fetch().

Prices get their own warning: values arrive as-is, 49.99 means 49.99, so dividing by 100 is wrong. That mistake shows up often and turns a price into pocket change. Before writing integration code the skill requires loading references/frontend-integration.md for the full examples. A companion skill, building-with-medusa, handles the backend routes the storefront calls.

What it helps with

  • call a custom Medusa API route from the storefront
  • wire the Medusa JS SDK into a frontend app
  • set up data fetching with React Query
  • build a mutation with optimistic update and rollback
  • fix a price that was divided by 100

Example prompts for the agent

  • Help me call the custom /store/reviews route from my Medusa storefront using the SDK
  • Set up useQuery for the product list and useMutation for adding a review
  • Review my Medusa storefront code for SDK mistakes

How to install building-storefronts

1Skills CLI (Vercel)

npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a claude-code

2Manually: put the files in place

~/.claude/skills/building-storefronts/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/building-storefronts/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about building-storefronts

How do I install building-storefronts in Claude?

Run npx skills add medusajs/medusa-agent-skills --skill building-storefronts -a claude-code. The skill lands at ~/.claude/skills/building-storefronts/SKILL.md.

What does building-storefronts do?

It gives the agent rules for Medusa storefront work: SDK usage, React Query patterns, custom API route calls, and common mistakes such as JSON.stringify() on the request body.

How is it different from the MedusaDocs MCP server?

The skill shows correct and incorrect patterns and loads during planning, while the MCP server is a reference for built-in SDK methods and configuration.

Similar skills

Everything for Frontend and UI →
storefront-builder saleor Walks an agent through building a Saleor storefront: GraphQL wiring, design, then catalog with variant selection. Useful when the frontend exists but the data layer does not. CX Codex +1 384installs shopify-storefront-graphql official Shopify Writes GraphQL queries and mutations against the Shopify Storefront API, searching the docs first and validating the code before it reaches you. CX Codex GP ChatGPT 1installs wix-headless wix Wires Wix services into a headless frontend: infers the capabilities you need, installs the apps, seeds the backend and hands back an SDK guide. CX Codex +1 338installs building-livekit-agents livekit A skill for structuring voice and chat agents on LiveKit Agents: handoffs, task scoping, latency budgets, and keeping state in code. CX Codex +1 419installs building-emdash-site emdash-cms A skill for building the site-facing side of an EmDash CMS project on Astro: schema, seeds, content queries, menus and deploy. CX Codex +1 756installs expo-data-fetching expo Configures data fetching, caching, and screen states in Expo apps. Guides network calls with expo/fetch and TanStack Query. CX Codex +1 27,500installs

From the same set12

building-with-medusa Defines architecture standards and guardrails for Medusa backend development. Useful when designing custom modules, API routes, or multi-step workflows. CX Codex +1 4,600installs storefront-best-practices This skill guides storefront work, from product pages and carts to checkout flows. Use it when building or changing an online store interface. CX Codex +1 4,600installs building-admin-dashboard-customizations Guides AI agents in building Medusa Admin dashboard extensions, widgets, and custom UI routes. Essential when customizing store management panels. CX Codex +1 4,400installs db-generate Generates database migrations for a Medusa module and tells you what to run next. CX Codex +1 3,400installs learning-medusa An interactive tutoring skill that guides you through Medusa architecture step by step with hands-on checkpoints. CX Codex +1 3,400installs using-medusa-cloud A skill that teaches an agent to run Medusa Cloud through the mcloud CLI: deploys, failed builds, environments, variables. Useful for CI/CD work. CX Codex +1 1,400installs mcloud-organizations This skill lets your agent run mcloud organizations commands: list Cloud organizations, resolve an ID by name, pull subscription and member details. CX Codex +1 1,300installs mcloud-logs A skill that teaches your agent to read backend and storefront logs with mcloud logs, filter them by time or deployment, and pipe them to JSON. CX Codex +1 1,300installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor