6 Skills pour Créer une VRAIE App avec Claude Code

En une phrase

La vidéo détaille six compétences essentielles à utiliser avec Claude Code pour créer une "vraie" application de manière structurée, évitant le "vibe coding" pour mieux cadrer le besoin et planifier la construction, et ainsi produire un code pertinent et durable.

Points clés

  • Problème du "Vibe Coding" : Travailler sans plan ni ordre avec l'IA conduit à des générations rapides mais inexactes, car Claude construit ce qui est demandé et non ce qui est réellement nécessaire, entraînant un coût de correction élevé. La solution n'est pas de mieux "prompter", mais de cadrer en amont.
  • Interroge (Skill 1) : Cette compétence pousse Claude à poser des questions approfondies (sur le modèle de calcul, charges, stack technique, etc.) avant de générer du code. Cela permet de clarifier le besoin exact et d'obtenir un outil sophistiqué et précis, correspondant aux attentes réelles plutôt qu'aux suppositions de l'IA.
  • Cadre (Skill 2) : Il s'agit de créer un PRD (Product Requirement Document) comme source unique de vérité. Ce document court (1-2 pages), placé dans un répertoire `doc`, définit le "pourquoi" et le "quoi" du produit (pour qui, ce qu'il fait/refuse de faire), sans jamais dicter le "comment". Il est structuré en huit sections fixes avec des "user story" numérotées.
  • Planifie (Skill 3) : Cette compétence découpe le PRD en tranches testables selon le principe des "balles traçantes" (tiré du livre Le programmeur pragmatique). Chaque tranche traverse toutes les couches techniques et est démontrable seule, permettant d'ajuster la trajectoire en temps réel plutôt que de laisser l'IA générer l'ensemble d'un coup, ce qui rendrait le code illisible et difficile à tester.
  • Design (Skill 4) : Pour éviter le "AI slop" (design générique comme la police Inter, fond blanc, dégradé violet), cette compétence effectue une recherche des standards visuels de la catégorie du produit. Elle propose un système esthétique complet (typographie, couleurs, espacement, motion) avec justification des choix et une analyse pour singulariser le produit. Le résultat est un aperçu HTML visuel.
  • Investigue (Skill 5) : Ce skill sépare le débogage scientifique du débogage aléatoire. En cas de bug, il impose quatre phases : localiser et reproduire le bug, poser trois hypothèses avec test concret pour la cause racine, ajouter des logs temporaires ciblés, et appliquer un correctif minimal. La règle des "trois strikes" arrête le processus si les hypothèses sont fausses, indiquant un problème d'architecture.
  • Illustre (Skill 6) : Il s'agit d'un skill bonus pour générer des diagrammes Excalidraw (formats Excalidro, PNG, SVG) sans quitter Claude Code. Utile au début pour aligner la compréhension avec les collaborateurs et à la fin pour documenter l'architecture du projet, ces diagrammes intègrent des patterns pour raconter une histoire plutôt que de simplement lister des composants.
  • Installation : Les six compétences sont installables en 30 secondes via une seule commande dans Claude Code et peuvent être déclenchées par commande directe (`/interroge`, `/cadre`, etc.) ou par une phrase naturelle.

Ressources

  • Claude Code — plateforme de développement mentionnée
  • GSD — méthode de structuration de travail mentionnée
  • Open Spec — méthode de structuration de travail mentionnée
  • Excalidraw — outil de création de diagrammes
  • Le programmeur pragmatique — livre d'Andrew Hunt et David Thomas, source du concept des "balles traçantes"
  • Inter — police de caractères mentionnée comme étant bannie par défaut dans le skill Design