Skill shopify-hydrogen
Ce skill fait partie du repo officiel shopify/agent-skills, une collection de skills vérifiés pour l'écosystème de développement Shopify. Il est conçu pour étendre les capacités de Claude Code (et d'autres agents compatibles) lorsqu'un développeur travaille avec Hydrogen, le framework React headless de Shopify.
Ce que fait ce skill
Le SKILL.md embarque trois ressources principales :
- Un cookbook Hydrogen — un ensemble de recettes prêtes à l'emploi couvrant des cas d'usage courants : commerce B2B, bundles, listings combinés, panier personnalisé, contenu dynamique via metaobjects, scroll infini, marchés, abonnements, intégration Google Tag Manager, Partytown, et plus encore. Le skill instruit l'agent de rechercher et prioriser ces recettes dans la documentation officielle avant de générer du code.
- Les définitions TypeScript complètes de
@shopify/hydrogen— composants, hooks, utilitaires cart, analytics, gestion du cache, Customer Account API, Storefront API, pagination, variantes optimistes, SEO, sitemap, etc. Ces définitions permettent à l'agent de produire un code valide et typé. - Des règles critiques de non-confusion — notamment l'interdiction d'utiliser
api:"storefront"pour les composants React commeImage,Money,VideoouMediaFile, qui sont des composants UI et non des types GraphQL.
Outils associés
Comme tous les skills du repo shopify/agent-skills, ce skill s'accompagne de scripts exécutables par l'agent : scripts/search_docs.js pour interroger la documentation Shopify en temps réel, et scripts/validate.js pour valider le code généré avant de le retourner à l'utilisateur. Ces deux outils sont obligatoires selon les instructions du skill.
Installation et utilisation
Ce skill s'installe via la CLI npx skill install shopify-hydrogen. Une fois installé dans un projet, Claude Code charge automatiquement le SKILL.md dans son contexte lors des questions relatives à Hydrogen, ce qui lui permet de produire du code JSX correct, d'éviter les erreurs classiques de confusion entre l'API Storefront et les composants React, et de s'appuyer sur les recettes officielles du cookbook Shopify.