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

storefront-best-practices — Claude Code skill: install guide

This skill guides storefront work, from product pages and carts to checkout flows. Use it when building or changing an online store interface.

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

What storefront-best-practices does

The skill guides work on store pages such as product listings, product details, carts, payment flows, navigation, search and account areas. Its references cover interface patterns, accessibility, mobile layouts, SEO and Medusa backend work.

Before any UI component is created, it calls for reading reference/design.md to check existing tokens, fonts, spacing and patterns. Task-specific references cover areas such as checkout in reference/layouts/checkout.md, Medusa setup in reference/medusa.md, and search work in reference/seo.md.

It also points to concrete implementation checks: cart count changes use aria-live="polite", fixed bottom controls account for safe areas, and below-the-fold images get lazy loading. Reading reference/design.md first adds a step before edits, so style changes are less likely to drift from the existing interface.

What it helps with

  • build a checkout page
  • add a cart with item count updates
  • connect a storefront to Medusa
  • make product cards accessible
  • prepare product pages for SEO

Example prompts for the agent

  • Apply storefront-best-practices while adding a cart page.
  • Use storefront-best-practices to connect the product catalogue to Medusa.
  • Apply storefront-best-practices when building a product page and check server-rendered markup.

How to install storefront-best-practices

1Skills CLI (Vercel)

npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a claude-code

2Manually: put the files in place

~/.claude/skills/storefront-best-practices/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/storefront-best-practices/

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

Questions about storefront-best-practices

How do I install storefront-best-practices in Claude Code?

Run npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a claude-code, then run npx skills add medusajs/medusa-agent-skills --skill storefront-best-practices -a claude-code again. The skill file is placed at ~/.claude/skills/storefront-best-practices/SKILL.md.

What does storefront-best-practices do?

It gives an agent guidance for building and changing online store interfaces. The material covers UI components, Medusa work, accessibility, mobile screens and SEO.

Which reference files are needed before building a component?

reference/design.md is required before any UI component. The skill calls for further references by task, including checkout, navigation, Medusa and SEO guides.

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 e-commerce-retail dylantarre A skill that maps Disney's 12 animation principles onto shopping interfaces: product cards, cart, checkout. Useful when the store should feel premium without slowing the buy. CX Codex +1 645installs forms-inputs-checkout hueyexe A skill for designing, critiquing and implementing forms, validation and checkout flows without breaking accessibility. CX Codex +1 524installs ecommerce-checkout-optimization nexscope-ai Walks through your checkout funnel and points at where buyers abandon the cart. Useful when checkout conversion stalls. CX Codex +1 1,200installs product-page-seo adobe Audits whether search crawlers can see your AEM Edge Delivery Services product pages, then tells you what to fix. CX Codex +1 314installs

From the same set14

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 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 building-storefronts A skill for building Medusa storefronts: it tells the agent how to call APIs through the SDK and React Query without breaking requests. CX Codex +1 4,200installs 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