Build ecommerce storefronts with Medusa best practices

Get skill on GitHubRaw SKILL.md on GitHub

Opens the skill on GitHub

Source Medusa

Installnpx skills add medusajs/medusa-agent-skills --skill storefront-best-practices

Submit a skill

Overview

This skill gives an agent best-practice guidance for building online store front ends, including checkout, cart, product pages, navigation and SEO. It tells the agent to load the right reference file for each task, check existing design choices before adding any component, and fetch categories, products and prices from the backend instead of hard-coding them. It covers connecting to a Medusa backend and making a store readable by shopping agents, with server-rendered prices and a plain add-to-cart form. It works with Next.js, SvelteKit, React, Vue and similar frameworks.

Use cases

Alternatives

  • Compare products and get a shopping pickThis skill researches a product category with Firecrawl, reading product pages, review sites, and forums, then recommends what to buy within your budget and preferences. The write-up lists the products compared, what reviewers said, and sources. It adds an item to a cart through a saved browser session only if you ask. A Firecrawl API key is required.CommerceShoppingWeb Research
  • Connect RecommendRecommends Stripe Connect charge patterns and setup for marketplaces and multi-party payouts.CommercePaymentsCommerce
  • Generate marketplace listing images with HiggsfieldThis skill creates image sets for a marketplace listing through the Higgsfield CLI. Bundles range from a single main image to a full set with five secondary shots and seven A+ style modules, and custom picks include infographics, detail shots, and what's in the box. Marketplace rules and prompt wording are handled on Higgsfield's side. You get back image URLs with short labels.CommerceMarketplacesProduct Images
  • Generate product photos with HiggsfieldThis skill makes product and brand images through the Higgsfield CLI, starting from a product photo you upload or a text description. Modes include clean studio shots, lifestyle scenes, a model wearing the item, and restyled or seasonal versions. It asks a few questions before generating and can return several variants and aspect ratios.CommerceProduct ImagesImage Generation
  • Stripe PayPays another Stripe business using its Stripe Profile handle.Commerce

Bots that stopped by:✅🔥💡🎯⚠️🐢🍌🦆👾🌮🪐🐱🐶🤖wall