Storefront Best Practices

• Bygga eller utöka en e-handelsstorefront — vilket ramverk som helst (Next.js, SvelteKit, TanStack Start, React, Vue): produktsidor, produktlistningar, varukorg, kassa, navigering, startsida, sökning, kontosidor eller orderbekräftelse.
• Integrera ett backend (inklusive Medusa) — SDK-konfiguration, hämtning av produkter/kategorier/regioner, prisvisning, val av betalningsmetod och hantering av varukorg.
• Optimera en befintlig butik — förbättra konverteringsgrader, åtgärda problem med mobilupplevelsen, lägga till SEO-strukturerad data eller förbättra tillgängligheten i köpflödet.
• Planera en storefront-implementering — generera en steg-för-steg-byggplan som refererar till rätt referensfiler och undviker kända fallgropar innan någon kod skrivs.

• Icke-e-handelsprojekt — adminpaneler, SaaS-appar, bloggar eller andra webbplatser utan ett handels-/köpflöde har ingen användning för det här skickets mönster.
• Rent backend- eller API-arbete — om du enbart arbetar med serversidans handelslogik utan någon frontend-butikskomponent inblandad tillför det här skicket föga värde.

Innan någon kod skrivs som anropar ett backend-API eller SDK tillämpar skickligheten ett arbetsflöde i 5 steg: pausa, fråga dokumentation eller MCP-server, verifiera metoden med användaren, skriv kod och kontrollera sedan efter TypeScript-fel. Detta förhindrar gissade metodnamn, föråldrade exempel och tysta körningsfel.

Färdigheten kartlägger varje butiksuppgift — utcheckning, produktlistning, navigering, SEO, mobil, Medusa-integration och mer — till en specifik referensfil (t.ex. reference/layouts/checkout.md, reference/medusa.md). Den specificerar exakt vilka filer som ska laddas innan varje funktion implementeras, vilket säkerställer att mönster tillämpas konsekvent.

Täcker regler med hög påverkan som är unika för butiksfronter: aria-live="polite" på varukorgsräknare för skärmläsare, env(safe-area-inset-bottom) för iOS klibbiga knappar, minsta berörningsmål på 44px, obligatorisk loading="lazy" på produktbilder nedanför synfältet samt förbud mot emojis i butiksfrontens användargränssnitt.

Tillhandahåller korrekta dynamiska routningsmönster för Next.js (App och Pages Router), SvelteKit, TanStack Start och Remix för produkt- och kategorisidor. Varnar uttryckligen mot statiska per-objekt-routes som inte skalar.

Täcker Medusa SDK-initialisering (publik API-nyckel krävs), korrekt prisvisning (dela inte med 100), krav på region_id vid hämtning av produkter, CORS-portkonventioner (8000), Vite SSR-konfiguration, användning av @medusajs/types istället för anpassade typer samt rensning av kundvagnsstatus efter orderläggning.

En kategoriserad lista med över 30 namngivna anti-mönster inom varukorg/navigering, produktbläddring, utcheckning, mobil, SEO, prestanda, designkonsekvens och backendintegration — varje punkt formulerad som en konkret ❌-regel att kontrollera före och under implementation.

Färdigheten tillhandahåller ett sekventiellt arbetsflöde i 10 steg, från discovery (inläsning av design.md) genom grund, kärnkomponenter, shoppingflöde och optimering. Varje steg refererar till den exakta filen som ska läsas in innan implementering, vilket säkerställer att inget missas och att stilarna förblir konsekventa.

Vägleder beslut kring kassaarkitektur (enkelsida kontra flerstegs), säkerställer att betalningsmetoder hämtas från backend istället för att hårdkodas, markerar kravet på gästutcheckning och tillhandahåller Medusa-specifika integrationssteg för betalning via reference/layouts/checkout.md och reference/medusa.md.

Täcker SDK-konfiguration, region- och prissättningsmönster, produkthämtning med region_id, landslistor begränsade till varukorgens region, Vite SSR-konfiguration samt användning av Medusa MCP-servern för metodverifiering — vilket förhindrar de vanligaste integrationsfelen i Medusa-butiksfronter.

Hänvisar utvecklare till reference/mobile-responsiveness.md för touch-målstorlekar, safe-area-insets och bildoptimering, samt till reference/seo.md för Product JSON-LD-schema, metataggar, Open Graph och mätning av Core Web Vitals via PageSpeed Insights.