Build Medusa storefronts: JS SDK patterns, React Query, price rules
Frontend integration skill for Medusa storefronts — always use the JS SDK (never plain fetch), use built-in SDK methods, structure React Query keys hierarchically, never divide prices by 100, handle errors
- What
- Frontend integration skill for Medusa storefronts — always use the JS SDK (never plain fetch), use built-in SDK methods, structure React Query keys hierarchically, never divide prices by 100, handle errors
- Cost
- Free
- Needs
- a Medusa project with a storefront to build or extend — the skill is an integration playbook, not software to install
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Selected by Skill Harbor — short listing (the repo's license is unknown, so no content is reproduced): @medusajs's official storefront development skill — the frontend integration playbook for building storefronts on Medusa. Core rules, ranked by priority: SDK usage is CRITICAL — ALWAYS use the Medusa JS SDK for every API request and never plain fetch() (missing publishable-api-key/auth headers cause silent failures); for built-in endpoints use existing SDK methods, for custom routes use sdk.client.fetch(); React Query patterns are HIGH priority — useQuery for GETs, useMutation for mutations, invalidate on success, hierarchical query keys, always handle loading and error states; data display has one critical rule — prices are stored as-is ($49.99 = 49.99), NEVER divide by 100 when displaying; plus a common-mistakes checklist (no JSON.stringify on bodies — the SDK serializes, no manual Content-Type headers, don't hardcode SDK import paths). Companion to the building-with-medusa backend skill (Module → Workflow → API Route); the MedusaDocs MCP server is explicitly secondary — skills come first. Honest caveats: the quick reference is NOT sufficient for implementation — the skill demands loading references/frontend-integration.md before writing code; the repo's license is unknown — short listing with a link only, nothing copied. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a Medusa project with a storefront to build or extend — the skill is an integration playbook, not software to install Install "Build Medusa storefronts: JS SDK patterns, React Query, price rules" for me. It gives my agent @medusajs's storefront skill: always use the Medusa JS SDK (never plain fetch), use built-in SDK methods or sdk.client.fetch() for custom routes, follow React Query patterns (useQuery/useMutation, hierarchical keys, invalidation, error handling), display prices as-is (never divide by 100), and load references/frontend-integration.md before writing implementation code. IMPORTANT: the repo's license is unknown — fetch from the link only, and reproduce nothing beyond the link. Repository: https://github.com/medusajs/medusa-agent-skills/blob/main/plugins/medusa-dev/skills/building-storefronts/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "building-storefronts". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. locate the SDK instantiation in my project first; load references/frontend-integration.md before any implementation work; nothing else — it's a playbook). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.