Créer un Custom Skill Claude Code pour Shopify

Points clés à retenir

• Un skill Claude Code est un dossier contenant un fichier SKILL.md. Le frontmatter indique à Claude quand l’utiliser. Le corps lui dit quoi faire.¹
• Les skills personnels se trouvent dans ~/.claude/skills/<name>/SKILL.md. Les skills de projet se trouvent dans .claude/skills/<name>/SKILL.md et peuvent être commités sur git.¹
• Créez un skill quand vous copiez-collez sans arrêt la même checklist Shopify dans le chat. Installez le plugin Shopify AI Toolkit quand vous avez besoin de la doc, de la validation des schémas et de l’exécution sur la boutique.²
• Claude charge automatiquement un skill quand votre requête correspond à sa description, ou si vous l’invoquez directement avec /nom-du-skill.¹
• Gardez SKILL.md sous les 500 lignes. Déplacez les longs documents de référence dans des fichiers groupés séparés.¹

Le plugin officiel AI Toolkit de Shopify fournit déjà à Claude Code des skills pour la doc et la validation Shopify (claude plugin install shopify-ai-toolkit@claude-plugins-official). Pour y ajouter vos propres conventions, écrivez un skill Claude Code sur mesure pour Shopify : un fichier SKILL.md réutilisable qui génère la base d’une section Liquid, la vérifie selon les règles de votre équipe et ne se charge que lorsque vous en avez besoin. C’est ce que couvre ce guide.

Le plugin vous apporte la doc de Shopify, la validation des schémas et l’exécution sur la boutique. Un skill personnalisé intègre vos conventions : vos modèles de sections, vos règles de nommage, votre checklist de révision. Pour la configuration du plugin, consultez notre guide de configuration Shopify AI Toolkit + Claude Code.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement et a travaillé avec des centaines de boutiques Shopify. Nous avons créé Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 et un badge Built for Shopify. Nous créons des skills d’agents et des workflows Claude Code pour Shopify au quotidien.

Qu’est-ce qu’un skill Claude Code ?

Un skill étend ce que Claude peut faire dans Claude Code. Vous créez un fichier SKILL.md avec des instructions, et Claude l’ajoute à sa boîte à outils.¹

Le fichier comporte deux parties : le frontmatter YAML entre les marqueurs --- qui indique à Claude quand utiliser le skill, et le contenu markdown avec les instructions que Claude suit quand le skill s’exécute.¹

Les skills Claude Code suivent le standard ouvert Agent Skills, qui fonctionne avec de multiples outils d’IA.¹

Quelle est la différence entre un skill, un plugin ou un serveur MCP ?

La caractéristique principale d’un skill est la divulgation progressive. La description reste dans le contexte pour que Claude sache que le skill existe. Le corps complet ne se charge que lorsque le skill est utilisé. Les longs documents de référence ne coûtent presque rien tant que vous n’en avez pas besoin.¹

Quand est-ce que Claude charge un skill ?

Par défaut, Claude ou vous pouvez invoquer n’importe quel skill.¹

Vous pouvez taper /nom-du-skill pour le lancer directement. Claude peut aussi le charger automatiquement si votre prompt correspond à la description.¹ Ce comportement de chargement auto explique pourquoi une bonne description est primordiale (nous verrons cela plus bas).

Quand créer un skill vs utiliser le plugin Shopify AI Toolkit

Les deux existent. Choisissez en fonction de ce que vous voulez encoder.

Le Shopify AI Toolkit connecte Claude à la doc de Shopify, aux schémas d’API et à la validation de code, et peut gérer votre boutique via la capacité d’exécution de la CLI.² Il répond à la question « quelle est la bonne façon de faire ça selon Shopify ? ».

Une skill personnalisée répond à « quelle est notre façon de faire ça ? ». Créez-en une quand :

• Vous n’arrêtez pas de coller la même checklist de génération de sections dans le chat.¹
• Une section de votre CLAUDE.md s’est transformée en une procédure plutôt qu’un simple fait.¹
• Vous avez des règles de nommage, des modèles de schéma ou une checklist de review spécifiques à votre boutique.

Les deux fonctionnent ensemble. Installez le plugin pour la précision côté Shopify. Ajoutez une skill par-dessus pour votre propre style maison.

Pour une vue d’ensemble du travail sur les thèmes basé sur des agents, consultez notre guide sur le développement de thèmes Shopify multi-agents.

Structure du SKILL.md et du frontmatter

Chaque skill a besoin d’un fichier SKILL.md. Le nom du dossier devient la commande que vous tapez, et la description aide Claude à décider quand charger le skill automatiquement.¹

Un skill basique ressemble à ceci :

---
name: my-skill
description: Ce que fait ce skill

---
## Instructions

Le contenu markdown que Claude va suivre lors de l'exécution du skill.

Le name et la description sont les deux champs frontmatter les plus importants.¹

Champs optionnels utiles

Le standard supporte plus d’éléments dans le frontmatter. En voici quelques-uns qui comptent pour le travail sur Shopify :¹

Le champ allowed-tools donne l’autorisation pour les outils listés pendant l’exécution de la skill. Il ne restreint pas les outils existants. Chaque outil reste appelable, et vos paramètres de permission continuent de régir le reste.¹

Structure des dossiers : où vivent les skills

Les skills se chargent depuis deux emplacements principaux.¹

Quand des skills partagent un nom à différents niveaux, la personnelle l’emporte sur celle du projet.¹

Commitez les skills de projet dans votre gestionnaire de version pour que toute votre équipe obtienne le même comportement.¹ Un repo de thème Shopify avec une skill partagée pour générer des sections signifie que chaque développeur crée ses sections de la même manière.

Inclure des fichiers annexes

Le SKILL.md est requis. Les autres fichiers sont optionnels et permettent de bâtir des skills plus robustes : comme des templates à faire remplir par Claude, des exemples de rendus, des scripts que Claude peut exécuter, ou des docs de référence pointues.¹

Un skill fait pour scaffolder des sections Shopify pourrait ressembler à ça :

~/.claude/skills/shopify-section/
├── SKILL.md              # Requis : quand + comment
├── references/
│   └── schema-rules.md   # Chargé à la demande
├── templates/
│   └── section.liquid    # Template de base
└── scripts/
    └── validate.sh       # Claude peut l'exécuter

Faites référence à ces fichiers depuis votre SKILL.md pour que Claude sache ce qu’ils contiennent et quand s’en servir.¹ Faites pointer les chemins des scripts vers ${CLAUDE_SKILL_DIR} pour qu’ils soient correctement localisés peu importe si le skill est installé au niveau personnel, de projet ou de plugin.¹

Exemple concret : un scaffolder de section Shopify

Voici un skill complet qui génère le scaffold d’une section Liquid à partir d’un prompt, et valide le résultat selon vos règles.

Étape 1 : Créer le dossier

mkdir -p ~/.claude/skills/shopify-section

Étape 2 : Rédiger le SKILL.md

Sauvegardez ceci dans ~/.claude/skills/shopify-section/SKILL.md :

---
name: shopify-section
description: Scaffolder une nouvelle section Shopify Liquid avec un bloc schema et la valider selon les règles de notre thème. À utiliser lorsque l'utilisateur demande de créer une section, d'ajouter une section, ou de construire une nouvelle section pour un thème Shopify.
---

## Scaffold d'une section Shopify

Lorsqu'il vous est demandé de créer une section :

1. Créez le fichier sous `sections/` avec un nom en kebab-case.
2. Rédigez le markup Liquid, puis ajoutez un bloc `{% schema %}` à la fin.
3. Le schema doit inclure un `name`, au moins un paramètre (setting), et une
   entrée `presets` pour que la section soit dispo via l'éditeur de thème.
4. Enveloppez la section dans un container avec un `id` unique scopé sur
   `section.id` pour que le style ne fuit pas ailleurs.
5. Ajoutez des paramètres pour le padding (haut et bas) sous forme d'inputs `range`.

## Valider avant de finaliser

- Confirmez que chaque paramètre appelé dans le markup existe bien dans le schema.
- Confirmez que le schema est un JSON valide.
- Confirmez qu'il n'y a pas de couleurs écrites en dur dans des styles inline. Référez-vous aux paramètres (settings) à la place.

Signalez toute règle enfreinte par la section et corrigez-la avant de retourner le résultat.

La description est la ligne clé du fichier. Elle nomme les commandes exactes qu’un développeur pourrait formuler : “créer une section”, “ajouter une section”, “construire une nouvelle section”. C’est sur ces expressions que Claude va se baser (matcher) pour se lancer.¹

Étape 3 : L’invoquer

Demandez quelque chose qui correspond à la description, et Claude chargera ce skill automatiquement :¹

Crée une section hero avec un titre, un sous-titre et un paramètre pour une image de fond.

Ou lancez-le directement :¹

/shopify-section

Claude lira le contenu du skill, générera la section dans sections/, et passera un coup de test sur vos règles de validation avant de vous rendre le fichier.

Si vous voulez également que le résultat soit vérifié face aux règles strictes des schemas Shopify en direct plutôt qu’uniquement les vôtres, couplez ce skill avec le plugin AI Toolkit. Le plugin gère la justesse vis-à-vis du code Shopify, et le skill gère votre style maison. Pour voir d’autres structures de prompts qui riment avec ce setup, jetez un oeil à notre guide des prompts Claude pour Shopify.

Les pièges courants avec les skills Claude Code

Quelques erreurs classiques lorsqu’on écrit son premier skill.

Des descriptions vagues

Claude décide ou non de charger un skill à partir de sa description.¹ “Aide pour Shopify” est beaucoup trop flou et se lancera soit pour tout, soit pour rien.

Nommez les actions concrètes à la place : “créer une section, ajouter une section, construire une nouvelle section”. Placez votre cas d’usage principal au début, car le texte analysé est limité à 1 536 caractères, et c’est le début qui a le plus de poids.¹

Des fichiers SKILL.md surchargés

Gardez votre SKILL.md sous la barre des 500 lignes. Sortez les infos références hyper détaillées dans des fichiers séparés.¹

Le corps du fichier est chargé dans son intégralité chaque fois que le skill tourne, donc un long fichier est un coût récurrent. Placez les longues tables de schemas, les exemples interminables et la documentation des edge-cases dans le dossier references/ avec un simple lien vers eux.¹

Des permissions d’outils non révisées

Pour des skills commités au sein d’un répertoire de projet .claude/skills/, le réglage allowed-tools s’active après que vous ayez accepté la boîte de dialogue de confiance (trust dialog) du workspace.¹

Un skill peut s’auto-attribuer de larges accès aux outils. Revoyez toujours les skills locaux du projet avant de déclarer que vous avez confiance en un dépôt, de la même façon que vous évalueriez n’importe quelle règle de permission.¹

Se jeter sur un skill quand un plugin fait déjà le job

Si le toolkit officiel de Shopify fait le job, un skill custom ne sera que de la maintenance en plus. Ne vous lancez dans un skill que si vous avez besoin d’encoder des conventions que le plugin n’a aucune possibilité de connaître. Pour en savoir plus sur un setup spécifique sur d’autres éditeurs texte, dirigez-vous vers notre guide de setup Cursor pour le Shopify AI Toolkit.

Comment se positionne Fudge là-dedans

Un skill rend Claude plus rapide pour écrire du code Shopify. Il n’ajoute pas pour autant le workflow dont les vraies modifications de boutique ont besoin : brouillons, aperçus, approbations et rollbacks. Le code vit dans git ; l’état de la boutique, non.

C’est ce vide que comble Fudge, l’opérateur IA pour les boutiques Shopify. Son éditeur de boutique Shopify transforme un prompt comme “Ajoute un guide des tailles sur chaque page produit” en un brouillon dans votre thème, respectueux de votre image de marque. Votre équipe le prévisualise, l’affine et le publie quand il est prêt, et chaque changement publié conserve la version qu’il a remplacée, ce qui vous permet de faire un rollback.

Les membres de l’équipe qui n’écrivent pas de Liquid peuvent quand même mettre en ligne des modifications. Et contrairement à un skill, Fudge n’attend pas qu’on lui dise quoi construire : donnez-lui un objectif et il vous suggère les modifications à apporter en premier. Pour comprendre l’évolution plus globale dans laquelle cela s’inscrit, lisez notre article sur le développement Shopify orienté IA.

Référence rapide

FAQ