Claude Code & Skills : le stack pour des sites 3D dignes d’Apple

Tout le monde vous a déjà fait la liste des « meilleurs skills Claude Code ». Personne ne vous a expliqué pourquoi la vôtre ne s’active jamais. On répare ça.

Vous ouvrez Claude Code. Vous tapez « construis-moi un hero 3D immersif façon Apple ». Et vous récupérez… un dégradé violet, une police Inter, trois cartes alignées et un bouton arrondi. Le fameux AI slop. Vous relancez, vous reformulez, vous suppliez. Même résultat, en bleu.

Le réflexe, à ce stade, c’est d’accuser le modèle. Erreur de diagnostic. Un modèle sans contexte de direction artistique fait exactement ce pour quoi il est optimisé : produire la réponse statistiquement la plus probable. Or la moyenne du web, c’est Bootstrap. Vous récoltez la moyenne parce que vous avez demandé la moyenne.

Les Agent Skills existent précisément pour casser ça. Ce sont des dossiers contenant un fichier SKILL.md — des playbooks que l’agent charge dynamiquement quand il détecte une tâche pertinente. Introduits par Anthropic en octobre 2025, ils sont depuis devenus un standard ouvert : les mêmes fichiers tournent sur Claude Code, Codex CLI, Cursor, Gemini CLI ou Copilot sans modification.

Chez ULPRA, on en installe, on en jette, on en réécrit depuis des mois. Voici ce qui marche vraiment pour produire du 3D, du motion et des sites qui tiennent la comparaison avec Apple — et surtout, les quatre pièges d’installation que personne ne documente et qui expliquent pourquoi votre skill ne s’active jamais.

---

D’abord, comprendre les deux familles de skills

Avant d’installer quoi que ce soit, cette distinction vous évitera de gaspiller votre contexte. Il existe deux types de skills, et ils ne servent pas au même usage.

Un site façon Apple exige les deux. Une capability sans preference vous donne un WebGL techniquement propre et visuellement insipide. Une preference sans capability vous donne une direction artistique brillante implémentée avec une API hallucinée. Il faut empiler — mais pas n’importe comment, on y revient.

---

Le stack ULPRA : 6 skills, dans cet ordre

On a testé beaucoup plus que six. La majorité ne survit pas à trois projets. Voici celles qui restent installées chez nous, avec pour chacune : à quoi elle sert réellement, comment l’installer, et le prompt qui la déclenche.

1. frontend-design — la fondation non négociable

C’est le skill officiel d’Anthropic, et c’est celui qui fait le plus de différence pour l’effort le plus faible. Son principe : forcer l’agent à s’engager sur une direction esthétique avant d’écrire la moindre ligne — brutaliste, éditorial, rétro-futuriste, maximaliste — puis à l’exécuter avec précision.

Concrètement, il vous arrache au triptyque dégradé-violet / police Inter / carte arrondie qui signe 90 % des sorties IA. Avec plus de 110 000 installations hebdomadaires, c’est le skill design le plus déployé de l’écosystème. Il y a une raison.

Le prompt qui le déclenche : pas « fais-moi une belle landing ». Mais plutôt : « Landing page pour une marque de mobilier design. Direction éditoriale, typographie display à l’échelle, beaucoup de silence entre les sections. Pas de carte. » Vous donnez l’intention, il donne l’exécution.

2. webgl-animation-skills — le vrai 3D, pas la démo de cube

C’est ici que ça devient sérieux. Ce pack couvre Three.js, les shaders GLSL, les systèmes de particules et le débogage GPU — soit exactement ce qui manque à un agent quand vous lui demandez un hero immersif.

Sans lui, votre agent écrit un ShaderMaterial approximatif, oublie le dispose() et vous laisse une fuite mémoire qui fait planter l’onglet au bout de trois minutes. Avec lui, il gère les scènes, les mouvements de caméra, les clips GLTF, l’instancing, le 3D scroll-linked, React Three Fiber et — point critique — la libération propre des ressources GPU.

Le prompt qui le déclenche : « Fragment shader GLSL pour un fond génératif : bruit fbm, domain warping, palette monochrome. Câblé en ShaderMaterial Three.js, avec disposal propre au démontage. » Notez le niveau de précision : c’est la différence entre un résultat et une loterie.

3. web-animation-skills — le motion qui ne rame pas

Le 3D sans motion, c’est une sculpture. Ce pack apporte GSAP, ScrollTrigger, SplitText, Flip et la synchronisation avec Lenis pour le smooth-scroll.

Son vrai apport est ailleurs, et c’est ce qui le rend indispensable en production : il force l’agent à n’animer que transform et opacity, à éviter le layout thrash, et à respecter prefers-reduced-motion sans pour autant supprimer toute l’animation. Autrement dit : du 60 fps réel, et de l’accessibilité qui n’est pas cosmétique.

Le prompt qui le déclenche : « Séquence ScrollTrigger : pin de la section, révélation du titre en SplitText par ligne, parallaxe sur l’image de fond. Budget : 60 fps sur mobile milieu de gamme. » Le budget fait partie du prompt. Toujours.

4. awwwards — la direction artistique avant le code

Celui-ci est plus confidentiel, et c’est dommage. Il encode les critères de jugement Awwwards, les langages design par secteur et les tendances 2025-26, avec des fichiers de référence séparés sur la typographie, la couleur, le layout, le motion et le WebGL.

Son principe cardinal : toujours définir l’émotion, l’archétype et le contexte sectoriel AVANT d’écrire du code. C’est un skill de discipline, pas de capacité. Il ne rend pas votre agent plus savant, il l’empêche de partir en freestyle.

5. claudedesignskills — le marketplace bundles

Si vous préférez l’approche packagée à l’artisanat, ce marketplace propose 27 plugins organisés en bundles thématiques. Le plus utile pour notre sujet : core-3d-animation, qui regroupe Three.js, GSAP, React Three Fiber, Motion et Babylon.js.

Notre avis : installez à la carte, pas le bundle. Cinq skills chargés simultanément mangent du contexte pour rien si votre projet n’utilise ni Babylon ni Motion. On y revient dans les pièges.

6. superpowers — le workflow, pas le rendu

Celui-ci ne dessine rien. C’est un framework composable qui structure tout le cycle de développement : brainstorming, setup de worktree git, planification d’implémentation, exécution par sous-agents, TDD, revue de code avant merge.

Son intérêt pour un site 3D : il empêche l’agent de tout générer d’un bloc. Il découpe en tâches, dispatche un sous-agent frais par tâche, et impose une double revue. Sur un projet où chaque section a sa propre logique de scroll et sa propre scène, c’est ce qui sépare un chantier maîtrisé d’un fichier de 4 000 lignes que personne ne veut relire.

---

Les 4 pièges d’installation que personne ne documente

Voilà la partie que vous ne trouverez dans aucune des listes qui circulent. Ce sont quatre échecs silencieux — votre skill est « installé », il n’est simplement jamais lu. On les a tous rencontrés, généralement au pire moment.

Le piège n°3 est le plus coûteux, parce qu’il est invisible. Voici la parade qu’on applique systématiquement en début de session :

Cinq secondes de vérification. Elles vous évitent de découvrir au bout de trois heures que votre agent codait sans jamais avoir ouvert frontend-design.

---

Le protocole ULPRA : comment on s’en sert réellement

Avoir les bons skills ne suffit pas. La méthode compte autant que l’outillage. Voici la nôtre, affinée sur plus de 150 projets.

L’étape 3 mérite qu’on s’y arrête, parce que c’est celle qu’on saute tous au début. Ne demandez jamais une page complète en un seul prompt. Ce n’est pas une question de capacité du modèle, c’est une question de boucle de correction : sur une page générée d’un bloc, une erreur de direction au hero contamine les huit sections suivantes, et vous repartez de zéro. Section par section, une erreur coûte une itération.

---

La vérité qui fâche : 3D et Lighthouse ne sont pas amis

On pourrait s’arrêter là, vous laisser avec votre stack et votre enthousiasme. Ce serait malhonnête.

Voici ce qu’on a appris à nos dépens : WebGL, vidéos de fond et scroll-jacking sont incompatibles avec un Lighthouse mobile ≥ 95. Pas « difficiles à concilier ». Incompatibles. Vous pouvez avoir le site qui fait rêver sur Awwwards, ou le site qui charge en 1,2 seconde sur un Android milieu de gamme en 4G. Rarement les deux.

Ce qui ne veut pas dire qu’il faut renoncer. Ça veut dire qu’il faut arbitrer en connaissance de cause, et le faire avant de coder, pas après. Trois règles qu’on applique :

Cette dernière règle est celle qui coûte le moins cher et qui sauve le plus de projets. Un audit à la fin, c’est un refactor. Un audit par section, c’est un ajustement.

---

En résumé (pour ceux qui sont allés direct à la fin)

Les skills ne vous donnent pas le talent. Elles vous donnent un agent qui arrête de vous proposer la moyenne du web et qui commence à exécuter votre intention. Le reste — la direction artistique, les arbitrages, le jugement sur ce qu’il faut jeter — reste chez vous. Heureusement.

Article rédigé par l’équipe ULPRA — studio de création digitale. On code avec Claude Code tous les jours, on casse des choses régulièrement, et on documente ce qu’on apprend.