Build Medusa storefronts: JS SDK patterns, React Query, price rules
Skill d'intégration frontend pour storefronts Medusa — toujours utiliser le JS SDK (jamais fetch simple), utiliser les méthodes SDK intégrées, structurer les clés React Query hiérarchiquement, jamais diviser les prix par 100, gérer les erreurs
- Quoi
- Skill d'intégration frontend pour storefronts Medusa — toujours utiliser le JS SDK (jamais fetch simple), utiliser les méthodes SDK intégrées, structurer les clés React Query hiérarchiquement, jamais diviser les prix par 100, gérer les erreurs
- Coût
- Gratuit
- Prérequis
- un projet Medusa avec un storefront à construire ou étendre — le skill est un playbook d'intégration, pas un logiciel à installer
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — fiche courte (la licence du repo est inconnue, donc aucun contenu n'est reproduit) : le skill officiel de développement storefront de @medusajs — le playbook d'intégration frontend pour construire des storefronts sur Medusa. Règles de base, classées par priorité : l'usage du SDK est CRITIQUE — TOUJOURS utiliser le JS SDK Medusa pour chaque requête API et jamais fetch() simple (des headers publishable-api-key/auth manquants causent des échecs silencieux) ; pour les endpoints intégrés utiliser les méthodes SDK existantes, pour les routes custom utiliser sdk.client.fetch() ; les patterns React Query sont priorité HAUTE — useQuery pour les GET, useMutation pour les mutations, invalidation au succès, clés de requête hiérarchiques, toujours gérer les états de chargement et d'erreur ; l'affichage des données a une règle critique — les prix sont stockés tels quels (49,99 $ = 49.99), JAMAIS diviser par 100 à l'affichage ; plus une checklist des erreurs communes (pas de JSON.stringify sur les bodies — le SDK sérialise, pas de headers Content-Type manuels, ne pas hardcoder les chemins d'import du SDK). Compagnon du skill backend building-with-medusa (Module → Workflow → API Route) ; le serveur MCP MedusaDocs est explicitement secondaire — les skills d'abord. Bémols honnêtes : la quick reference n'est PAS suffisante pour l'implémentation — le skill exige de charger references/frontend-integration.md avant d'écrire du code ; la licence du repo est inconnue — fiche courte avec lien uniquement, rien copié. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet Medusa avec un storefront à construire ou étendre — le skill est un playbook d'intégration, pas un logiciel à installer Installe-moi « Construire des storefronts Medusa : patterns JS SDK, React Query, règles de prix ». Il donne à mon agent le skill storefront de @medusajs : toujours utiliser le JS SDK Medusa (jamais fetch simple), utiliser les méthodes SDK intégrées ou sdk.client.fetch() pour les routes custom, suivre les patterns React Query (useQuery/useMutation, clés hiérarchiques, invalidation, gestion d'erreurs), afficher les prix tels quels (jamais diviser par 100), et charger references/frontend-integration.md avant d'écrire du code d'implémentation. IMPORTANT : la licence du repo est inconnue — récupérer depuis le lien seulement, et ne rien reproduire au-delà du lien. Dépôt : https://github.com/medusajs/medusa-agent-skills/blob/main/plugins/medusa-dev/skills/building-storefronts/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « building-storefronts ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. localiser d'abord l'instanciation du SDK dans mon projet ; charger references/frontend-integration.md avant tout travail d'implémentation ; rien d'autre — c'est un playbook). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.