Storefront Best Practices

• Erstellen oder Erweitern eines E-Commerce-Storefronts — jedes Framework (Next.js, SvelteKit, TanStack Start, React, Vue): Produktseiten, Produktlisten, Warenkorb, Checkout, Navigation, Startseite, Suche, Kontoseiten oder Bestellbestätigung.
• Integration eines Backends (einschließlich Medusa) — SDK-Einrichtung, Abrufen von Produkten/Kategorien/Regionen, Preisanzeige, Auswahl der Zahlungsmethode und Warenkorb-Verwaltung.
• Optimierung eines bestehenden Shops — Verbesserung der Konversionsraten, Behebung von Problemen mit der mobilen Darstellung, Hinzufügen von strukturierten SEO-Daten oder Verbesserung der Barrierefreiheit im Einkaufsprozess.
• Planung einer Storefront-Implementierung — Erstellen eines schrittweisen Aufbauplans, der auf die richtigen Referenzdateien verweist und bekannte Fallstricke vermeidet, bevor Code geschrieben wird.

• Nicht-E-Commerce-Projekte — Admin-Dashboards, SaaS-Apps, Blogs oder jede Website ohne einen Shopping-/Kaufprozess haben keinen Nutzen von den Mustern dieser Fertigkeit.
• Reine Backend- oder API-Arbeit — wenn Sie ausschließlich an der serverseitigen Commerce-Logik arbeiten und keine Frontend-Storefront-Komponente beteiligt ist, bietet diese Fertigkeit kaum Mehrwert.

Bevor Code geschrieben wird, der eine Backend-API oder ein SDK aufruft, erzwingt die Skill einen 5-stufigen Workflow: pausieren, Dokumentation oder MCP-Server abfragen, die Methode mit dem Benutzer verifizieren, Code schreiben und anschließend auf TypeScript-Fehler prüfen. Dies verhindert geraten Methodennamen, veraltete Beispiele und stille Laufzeitfehler.

Die Fähigkeit ordnet jede Storefront-Aufgabe – Checkout, Produktlisting, Navigation, SEO, Mobile, Medusa-Integration und mehr – einer spezifischen Referenzdatei zu (z. B. reference/layouts/checkout.md, reference/medusa.md). Es wird genau festgelegt, welche Dateien vor der Implementierung eines Features geladen werden müssen, um sicherzustellen, dass Muster konsistent angewendet werden.

Behandelt wirkungsstarke Regeln, die speziell für Storefronts gelten: aria-live="polite" bei Warenkorbzählern für Screenreader, env(safe-area-inset-bottom) für iOS-Sticky-Buttons, mindestens 44px große Touch-Ziele, obligatorisches loading="lazy" bei Produktbildern unterhalb des sichtbaren Bereichs sowie das Verbot von Emojis in der Storefront-Benutzeroberfläche.

Bietet korrekte dynamische Routenmuster für Next.js (App und Pages Router), SvelteKit, TanStack Start und Remix für Produkt- und Kategorieseiten. Warnt ausdrücklich vor statischen Routen pro Artikel, die nicht skalierbar sind.

Behandelt die Medusa-SDK-Initialisierung (publikabler API-Schlüssel erforderlich), korrekte Preisanzeige (nicht durch 100 dividieren), die Anforderung von region_id beim Abrufen von Produkten, CORS-Port-Konventionen (8000), Vite-SSR-Konfiguration, die Verwendung von @medusajs/types anstelle von benutzerdefinierten Typen sowie das Leeren des Warenkorb-Status nach der Bestellaufgabe.

Eine kategorisierte Liste von über 30 benannten Anti-Patterns in den Bereichen Warenkorb/Navigation, Produktsuche, Checkout, Mobile, SEO, Performance, Design-Konsistenz und Backend-Integration — jedes als konkretes ❌-Kriterium formuliert, das vor und während der Implementierung überprüft werden sollte.

Die Skill bietet einen sequenziellen 10-Schritte-Workflow, der von der Erkundungsphase (Laden von design.md) über das Fundament, Kernkomponenten, den Einkaufsprozess bis hin zur Optimierung reicht. Jeder Schritt verweist auf die genaue Datei, die vor der Implementierung geladen werden muss, sodass nichts übersehen wird und die Stile konsistent bleiben.

Leitet bei Architekturentscheidungen für den Checkout (einseitig vs. mehrstufig), erzwingt das Abrufen von Zahlungsmethoden vom Backend anstatt diese fest zu kodieren, weist auf die Anforderung für Gast-Checkouts hin und stellt die Medusa-spezifischen Schritte zur Zahlungsintegration über reference/layouts/checkout.md und reference/medusa.md bereit.

Behandelt SDK-Einrichtung, Regions- und Preismuster, Produktabruf mit region_id, auf die Warenkorbregion beschränkte Länderlisten, Vite-SSR-Konfiguration sowie die Verwendung des Medusa-MCP-Servers zur Methodenverifizierung – und verhindert damit die häufigsten Integrationsfehler bei Medusa-Storefronts.

Verweist Entwickler auf reference/mobile-responsiveness.md für Touch-Zielgrößen, Safe-Area-Insets und Bildoptimierung sowie auf reference/seo.md für Product JSON-LD-Schema, Meta-Tags, Open Graph und die Messung der Core Web Vitals über PageSpeed Insights.