Skill shopify-hydrogen — Assistant de développement Hydrogen
Ce skill fait partie du Shopify AI Toolkit, le plugin officiel de Shopify pour les agents IA (Claude Code, Cursor, Gemini CLI, etc.). Il est auto-généré à partir des sources de documentation Shopify et ne doit pas être modifié directement.
Ce que fait ce skill
Lorsqu'il est actif, ce skill oriente Claude vers la documentation officielle du Hydrogen cookbook pour répondre à toute question relative aux storefronts Hydrogen. Il couvre notamment les recettes suivantes : B2B Commerce, Bundles, Combined Listings, panier personnalisé, contenu dynamique avec Metaobjects, intégration Google Tag Manager, Infinite Scroll, Markets, Subscriptions, et requêtes vers des APIs tierces avec mise en cache.
Le SKILL.md embarque également les définitions TypeScript complètes du package @shopify/hydrogen (composants, hooks, utilitaires, types de panier, analytics, CSP, pagination, SEO, sitemap…), ce qui permet à Claude de générer du code JSX valide et typé sans avoir à deviner les signatures.
Règle critique intégrée
Le skill impose une règle importante : ne jamais confondre les composants React de Hydrogen (Image, Video, Money, MediaFile, etc.) avec les types GraphQL de la Storefront API. Ces composants affichent des données, ils ne les fetching pas. Claude est également tenu de valider tout code généré via un script interne (/scripts/validate.js) avant de le retourner à l'utilisateur.
Comment l'utiliser
Une fois le Shopify AI Toolkit installé dans votre environnement (Claude Code, Cursor, etc.), ce skill est automatiquement chargé. Il suffit de poser une question relative à Hydrogen — mise en place d'un panier, affichage de variantes produit, intégration analytics, gestion du cache — et Claude s'appuiera sur ce skill pour fournir une réponse basée sur la documentation et les types officiels Shopify.