Rôle du skill shopify-hydrogen
Ce skill fait partie du Shopify AI Toolkit (shopify/shopify-ai-toolkit), le plugin officiel de Shopify pour connecter les outils IA (Claude, Cursor, VS Code, etc.) à la plateforme Shopify. Il est dédié au développement de storefronts headless avec Hydrogen, le framework React de Shopify.
Ce que fait ce skill
Le SKILL.md définit un protocole strict que l'agent doit suivre pour toute question relative à Hydrogen. Avant de produire du code, l'agent est tenu d'exécuter scripts/search_docs.mjs afin d'interroger la documentation Shopify (notamment le Hydrogen Cookbook) et d'obtenir des exemples à jour. Le code généré est ensuite obligatoirement soumis à scripts/validate.mjs pour vérification avant d'être retourné au développeur.
Le skill couvre un large éventail de recettes disponibles dans le Hydrogen Cookbook : B2B Commerce, Bundles, Combined Listings, Custom Cart Method, Dynamic Content with Metaobjects, Express Server, Google Tag Manager, Infinite Scroll, Markets, Subscriptions, Third-party API Queries, et bien d'autres.
Contraintes importantes
Le skill impose d'utiliser exclusivement le package @shopify/hydrogen et non hydrogen-react, et interdit d'utiliser l'API Storefront GraphQL (api:"storefront") pour les composants React fournis par Hydrogen (comme Image, Money, MediaFile, etc.), qui sont des composants d'affichage et non des types GraphQL. Une liste complète des types TypeScript exportés par @shopify/hydrogen est incluse dans le SKILL.md pour guider la génération de code.
Utilisation dans le Shopify AI Toolkit
Ce skill s'installe via le plugin Shopify AI Toolkit sur votre outil IA préféré. Il est activé automatiquement dès qu'une question concerne Hydrogen. La télémétrie d'utilisation est envoyée à Shopify (désactivable via OPT_OUT_INSTRUMENTATION=true).