shopify-polaris-checkout-extensions

Par shopify · agent-skills

npx skills add https://github.com/shopify/agent-skills --skill shopify-polaris-checkout-extensions

shopify-polaris-checkout-extensions

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 sur la surface Checkout UI Extensions, c'est-à-dire les extensions d'interface personnalisées que les développeurs d'apps peuvent installer à différents points du tunnel de commande Shopify (résumé de commande, livraison, paiements, Shop Pay, etc.).

Ce que fait ce skill

Le SKILL.md charge dans le contexte de Claude un ensemble complet d'instructions couvrant la version 2026-01 du framework Polaris pour les checkout extensions. Il documente les extension targets disponibles (address, navigation, order summary, shipping, payments, etc.), les APIs accessibles (Cart Lines, Delivery, Discounts, Metafields, Session Token…), ainsi que tous les composants web Polaris (s-banner, s-button, s-text-field, s-badge, etc.) utilisables directement en JSX sans import supplémentaire.

Le skill indique également à Claude d'utiliser systématiquement deux scripts fournis dans le dossier scripts/ : search_docs.js pour interroger la documentation shopify.dev sur un composant ou une prop précise, et validate.js pour valider le code généré avant de le restituer au développeur. Cette boucle recherche → génération → validation réduit les erreurs liées à des valeurs de props incorrectes ou des composants incompatibles avec la target choisie.

Comment l'utiliser

Le skill s'installe via le CLI npx skill :

npx skill install shopify-polaris-checkout-extensions

Une fois installé dans votre environnement Claude Code (ou Cursor / Claude Desktop), il devient actif automatiquement lorsque vous travaillez sur une Checkout UI Extension. Vous pouvez demander à Claude de scaffolder une extension, d'ajouter un composant à une target spécifique, ou de brancher une API comme les Metafields ou les Discounts — Claude utilisera les instructions du skill pour produire un code aligné sur la dernière version de l'API.

Le skill rappelle également une règle fondamentale : toujours passer par la Shopify CLI (shopify app generate extension --template checkout_ui) pour créer le squelette initial d'une extension, afin de garantir la compatibilité avec la version courante.

Skills similaires