Chapitre 4 / 9

Choisir sa stack

HTML pur, React, Next.js, Tailwind, Shadcn. Ce que chaque choix implique et quelle combinaison fonctionne le mieux selon le type de projet.

Les options disponibles

HTML + CSS pur

Le point de départ le plus simple. Pas de dépendances, pas de commandes d'installation. Tu crées un fichier index.html, tu l'ouvres dans un navigateur, tu vois le résultat.

Convient pour : prototypes rapides, pages statiques, artifacts Claude, landing pages sans logique métier.

React

React est une bibliothèque JavaScript qui permet de construire des interfaces à partir de composants réutilisables. Un composant, c'est un bloc d'interface autonome : un bouton, une carte, une modale.

Convient pour : interfaces avec de nombreux composants réutilisables, applications dynamiques, prototypes avec états et interactions.

Next.js

Next.js est un framework construit au-dessus de React. Il ajoute le routing entre pages, la gestion du déploiement, et des optimisations de performance.

npx create-next-app@latest nom-du-projet
cd nom-du-projet
npm run dev

Tailwind CSS

Tailwind n'est pas un framework de composants mais un système de classes utilitaires. Au lieu d'écrire du CSS dans un fichier séparé, tu appliques des classes directement dans le HTML : bg-white, text-xl, p-6, rounded-lg.

Avantage pour les designers : les classes correspondent directement à des valeurs de design system (spacing scale, type scale, color palette).

Shadcn/ui

Shadcn/ui est une collection de composants d'interface prêts à l'emploi : boutons, modales, formulaires, menus, tableaux. Construits au-dessus de Radix UI et stylisés avec Tailwind CSS.

npx shadcn-ui@latest add button

Framer Motion

Bibliothèque d'animations pour React. Transitions, animations d'entrée/sortie, micro-interactions directement dans les composants.

Astro

Framework orienté contenu, conçu pour les sites statiques et les portfolios. Génère des pages très rapides en limitant le JavaScript au minimum.

Quelle combinaison choisir

Pour explorer et prototyper rapidement :
HTML + CSS + Tailwind (via CDN, sans installation)

Pour la plupart des projets design :
Next.js + Tailwind CSS + Shadcn/ui

C'est la combinaison qui couvre le plus de cas d'usage. Next.js gère le routing et le déploiement, Tailwind remplace les feuilles de style, et Shadcn/ui fournit des composants prêts à l'emploi.

Pour les prototypes avec animations :
Next.js + Tailwind + Framer Motion

Pour un portfolio ou un site statique :
Astro + Tailwind

Comment indiquer le stack à Claude Code

Au début d'une session, donne à Claude Code le contexte du projet. Deux façons de le faire :

Dans le premier message :

Ce projet utilise Next.js 14, Tailwind CSS et Shadcn/ui.
Les composants Shadcn existants sont dans /components/ui.
Utilise les tokens de couleur définis dans tailwind.config.js.
Ne crée pas de nouveau composant si un composant Shadcn existant
peut faire l'affaire.

Dans un fichier CLAUDE.md à la racine du projet (voir page 7) : Claude lit ce fichier au démarrage de chaque session. Les instructions s'appliquent automatiquement sans avoir à les répéter.