Démarrage

Travailler avec l'IA

Onyx est livré avec un CLAUDE.md qui donne à Claude Code et Cursor tout le contexte du projet dès le premier message. Cette page regroupe les prompts prêts à l'emploi pour les tâches courantes, les règles de sécurité à respecter et les extensions VS Code recommandées.

Le CLAUDE.md

Le fichier CLAUDE.md à la racine du projet est lu automatiquement par Claude Code à chaque session. Il décrit l'architecture, les conventions de code, les fichiers critiques et le comportement attendu de l'IA. Résultat : vous n'avez jamais à expliquer comment le projet est structuré — l'IA le sait déjà.

Cursor lit lui aussi les fichiers .cursorrules ou les instructions de projet. Vous pouvez copier le contenu du CLAUDE.md dans vos règles Cursor pour le même résultat.

Prompts prêts à l'emploi

Copiez-collez ces prompts directement dans Claude Code ou Cursor. Adaptez les détails entre crochets à votre projet.

Appliquer un thème

Applique le thème [Bulle / Ardoise / Forêt / Soleil / Encre] : remplace l'intégralité de src/app/globals.css par le contenu du fichier themes-perso/theme-[nom].css, puis mets à jour src/lib/fonts.ts pour utiliser la police recommandée par ce thème.

Changer les couleurs

Je veux changer la couleur principale du site en [description]. Mets à jour la variable --primary dans les blocs :root et .dark de src/app/globals.css. Utilise le format OKLCH. Assure-toi que le contraste reste suffisant en mode clair et en mode sombre.

Ajouter une page

Crée une nouvelle page "/[slug]" avec : - Un objet metadata (title, description, canonical) - Les sections suivantes : [liste des sections] - Ajout de la route dans src/app/sitemap.ts - Ajout du lien dans mainNav de site.config.ts si nécessaire

Créer un article de blog

Écris un article de blog sur "[sujet]" dans content/blog/[slug].mdx. Frontmatter complet avec title, description, date (aujourd'hui), category "[catégorie]", tags pertinents, author "[nom]", published true, et un champ tldr avec un résumé autonome en 2 phrases pour les moteurs IA. Longueur cible : [500 / 1000 / 1500] mots.

Modifier le contenu de la page d'accueil

Mets à jour src/data/home.ts pour mon projet : - Activité : [description] - Cible : [audience] - Ton : [professionnel / chaleureux / direct] Adapte le hero, les features, le FAQ et le CTA. Ne touche pas aux composants, uniquement aux données.

Ajouter une intégration externe

Intègre [service] au formulaire de contact. La clé API doit être stockée dans .env.local uniquement, sous la variable [NOM_VARIABLE], et vérifiée exclusivement côté serveur dans src/app/api/contact/route.ts. Ne jamais exposer cette clé côté client ni utiliser le préfixe NEXT_PUBLIC_.

Ajouter un CAPTCHA

Ajoute Cloudflare Turnstile au formulaire de contact. La clé secrète doit être dans TURNSTILE_SECRET_KEY dans .env.local, vérifiée côté serveur dans la route API avant d'envoyer l'email. La clé publique (NEXT_PUBLIC_TURNSTILE_SITE_KEY) peut être exposée côté client. Installe le package @marsidev/react-turnstile.

Règles de sécurité

Quand vous travaillez avec une IA sur du code, gardez ces règles en tête. Ajoutez-les systématiquement à vos prompts dès qu'une intégration externe est en jeu.

Règle	Pourquoi
.env.local ne doit jamais être commité	Il contient vos clés API — git l'ignore par défaut, vérifiez que .gitignore le liste bien
NEXT_PUBLIC_ = exposé au navigateur	Tout ce qui porte ce préfixe est visible dans le bundle client. Ne jamais y mettre une clé secrète
Les clés secrètes se vérifient côté serveur	Route API, Server Action ou Server Component uniquement — jamais dans un composant "use client"
Ne jamais coller une clé API dans un prompt	Les conversations IA peuvent être loguées. Décrivez le nom de la variable, pas sa valeur
Valider les entrées utilisateur côté serveur	La validation client (zod dans le formulaire) est bypassable — toujours revalider dans la route API
Inspecter le code généré avant de commiter	L'IA peut introduire des dépendances inutiles ou des pratiques obsolètes — relire avant git add

Si vous partagez votre terminal ou votre écran pendant une session IA, vérifiez que .env.local n'est pas ouvert dans un onglet visible. Les clés Resend, Turnstile ou GA4 ne doivent jamais apparaître dans un prompt.

Extensions VS Code recommandées

Le projet inclut un fichier .vscode/extensions.json qui propose automatiquement ces extensions à l'ouverture dans VS Code. Cliquez “Installer les extensions recommandées” dans la notification qui apparaît.

Extension	Rôle
Tailwind CSS IntelliSense	Autocomplétion et aperçu des classes Tailwind au survol
ESLint	Détection des erreurs TypeScript et React en temps réel
Prettier	Formatage automatique à la sauvegarde
MDX	Coloration syntaxique et aperçu des fichiers .mdx
PostCSS Language Support	Coloration des directives Tailwind v4 dans globals.css
GitLens	Historique git inline, blame, comparaisons de branches

.vscode/extensions.json

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "unifiedjs.vscode-mdx",
    "csstools.postcss",
    "eamodio.gitlens"
  ]
}

Précédent← Installation Suivantsite.config.ts →