Building Storefronts
If you're building a Medusa storefront, this teaches you the SDK-first approach that prevents the most common bugs. It hammers home critical patterns like never using regular fetch (causes missing header errors), never JSON.stringify your request bodies (the SDK handles serialization), and that Medusa prices are stored as-is, not in cents. You get React Query patterns for mutations and cache invalidation, plus a clear hierarchy of when to use built-in SDK methods versus sdk.client.fetch for custom routes. The skill works as a checklist before you write code, then points you to detailed reference files for implementation. Load it alongside building-with-medusa when you're connecting frontend features to backend API routes.
- skills.sh installs
- 4.4K
- GitHub stars
- 236
- last updated
- Aug 21, 2026
Install
$ npx -y skills add medusajs/medusa-agent-skills --skill building-storefronts --agent claude-codeInstalls into .claude/skills of the current project.
Files
Medusa Storefront Development
Frontend integration guide for building storefronts with Medusa. Covers SDK usage, React Query patterns, and calling custom API routes.
When to Apply
Load this skill for ANY storefront development task, including:
- Calling custom Medusa API routes from the storefront
- Integrating Medusa SDK in frontend applications
- Using React Query for data fetching
- Implementing mutations with optimistic updates
- Error handling and cache invalidation
Also load building-with-medusa when: Building the backend API routes that the storefront calls
CRITICAL: Load Reference Files When Needed
The quick reference below is NOT sufficient for implementation. You MUST load the reference file before writing storefront integration code.
Load this reference when implementing storefront features:
- Calling API routes? → MUST load
references/frontend-integration.mdfirst - Using SDK? → MUST load
references/frontend-integration.mdfirst - Implementing React Query? → MUST load
references/frontend-integration.mdfirst
Rule Categories by Priority
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
More from medusajs/medusa-agent-skills
All 15Recommended
More Frontend Development
typescript-docsgiuseppe-trisciuoglio/developer-kitGenerates comprehensive TypeScript documentation using JSDoc, TypeDoc, and multi-layered documentation patterns for different audiences. Use when creating API d4.4Kskills.sh installs
ant-designant-design/antd-skillDecision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline `@ant-design/cli`. Use for component selection, theming/tokens, SS4.3Kskills.sh installs
xss-cross-site-scriptingyaklang/hack-skillsXSS playbook. Use when user-controlled content reaches HTML, attributes, JavaScript, DOM sinks, uploads, or multi-context rendering paths.4.2Kskills.sh installs
beautiful-articleconardli/garden-skills把用户提供的素材（网页 URL / PDF / DOCX / Markdown / 纯文本 / 截图 / 粘贴材料）编辑、设计成一篇美丽的、可离线打开和分享的**单文件 HTML 网页文章**。基于 reacticle 组件协议：不手写裸 HTML/CSS，而用语义组件 + 受主题约束的 Raw 自由层；按 sourc4.1Kskills.sh installs
copilotsassistant-ui/skillsGrounding an assistant in your app with assistant-ui copilots (@assistant-ui/react). Use when steering assistant behavior with useAssistantInstructions, feeding4.1Kskills.sh installs
tailwindcsshairyf/skillsTailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems wit4.1Kskills.sh installs