---
name: danailab-website-project
description: Piloter un projet web de bout en bout avec recherche, direction visuelle, validation, construction, SEO et vérification. À utiliser pour créer, refondre ou revoir un site complet ou un projet web de plusieurs pages. Ne pas utiliser pour un composant isolé ou un simple ajustement de style.
---

# Projet web DanAI Lab

Produis un site cohérent de la recherche jusqu'à la vérification finale. Garde la direction créative, les décisions de design et l'intégration dans le contexte principal. Utilise les sous-agents pour les travaux indépendants, pas pour fragmenter le design.

## Direction et responsabilité

- L'agent principal garde la responsabilité de la synthèse des recherches, de la direction visuelle, du système de design, de l'intégration finale et de la validation.
- Consulte directement les références, les fichiers, les captures et le rendu quand une décision en dépend. Un rapport ne remplace pas l'observation du design.
- Les sous-agents peuvent collecter des références, inventorier les assets, auditer le SEO, vérifier les liens ou traiter une implémentation isolée. Ils ne prennent pas la décision visuelle finale.
- Ne lance pas en parallèle des modifications qui touchent la même mise en page, les mêmes composants, les mêmes fichiers ou le même système de design.
- Pour une refonte, préserve l'identité, le contenu, les comportements, les URL et le SEO qui fonctionnent déjà, sauf changement explicitement validé par l'utilisateur.

## 1. Découverte, assets et références

- Identifie le public, son objectif principal et les pages ou actions indispensables.
- Inventorie l'identité, les typographies, logos, images, vidéos, textes, composants, données et URL existants. Note leur pertinence, leurs dimensions quand elles comptent, les doublons et les éléments manquants.
- Inspecte le site et sa configuration SEO avant une refonte. Distingue ce qui est déjà approuvé des changements proposés.
- Si le skill `refero-design` est disponible, utilise-le pour la recherche de références et le verrou de référence. Sinon, utilise les outils de recherche disponibles et les références fournies, puis indique les preuves manquantes.
- Analyse les références et les concurrents pertinents pour comprendre leur structure, leur hiérarchie, leurs choix visuels et leur couverture éditoriale utile. Ne copie pas leur marque, leurs textes ou leurs promesses non vérifiées.
- Extrais des invariants concrets : typographie, palette, grille, espacements, formes, densité, images, mouvement et comportement responsive.
- Distingue les faits observés de tes recommandations.

## 2. Direction visuelle et verrou de référence

- Choisis une direction claire avant de modifier sensiblement le design.
- Définis le système nécessaire au projet : typographie, couleurs, grille, espacements, rayons, bordures, ombres, icônes, images, mouvement, règles responsive et rôle des composants.
- Relie les choix importants à une référence, un asset, une donnée, le brief ou une décision de l'utilisateur. Conserve-les dans un journal de décisions court.
- Indique quels assets utiliser dans chaque section et lesquels écarter.
- Fais des choix adaptés au public et au contenu. Ne mélange pas les références jusqu'à produire une esthétique générique.
- Garde une identité cohérente entre les pages sans les rendre mécaniquement identiques.

## 3. Validation de la direction

- Avant la première construction ou une refonte importante, présente les recherches et la direction proposée dans un rapport ou un aperçu lisible. Inclus les références, la hiérarchie des pages, le plan des assets, le verrou de référence, la direction SEO et une liste numérotée de décisions auxquelles l'utilisateur peut répondre par numéro.
- Fais valider une seule fois la direction générale. Continue ensuite les pages et sections sans interrompre constamment l'utilisateur tant qu'elles respectent cette direction.
- Redemande une validation uniquement si un nouveau besoin modifie sensiblement la direction visuelle, le périmètre, le contenu factuel, la structure des URL ou le comportement en production.
- Exception : pour la refonte d'un site déjà en ligne, fais aussi valider chaque page et chaque lot d'assets produits (voir la section 8). Les retours sur des pages réelles repèrent des problèmes que le rapport de direction ne montre pas.

## 4. Construction

- Planifie la propriété des pages, composants et fichiers partagés avant de déléguer.
- Implémente le parcours principal avant les détails secondaires.
- Utilise du contenu vérifié et de vrais assets. N'invente pas de témoignages, chiffres, clients, résultats, prix ou promesses commerciales.
- Si un contenu manque, utilise uniquement des placeholders clairement signalés pendant le développement. Liste-les pour validation et ne les publie pas.
- Rends les pages responsives, accessibles au clavier, utilisables au toucher et compatibles avec la réduction des mouvements.
- Préserve les performances avec des médias bien dimensionnés, un chargement raisonnable et des animations légères.

## 5. SEO

- Fais correspondre chaque page à une intention de recherche et un objectif utilisateur clairs, avec de vraies preuves quand elles sont disponibles.
- Vérifie la structure sémantique, les titres, les métadonnées utiles, les URL canoniques, les liens internes, les textes alternatifs et les données structurées qui décrivent réellement la page.
- Contrôle `robots.txt`, `sitemap.xml` et l'indexabilité des pages publiques.
- Préserve les URL utiles pendant une refonte ou définis des redirections validées avant de les modifier.
- N'invente pas de mots-clés, de volumes, de positions ou de promesses. Signale les données qui nécessitent une vraie source.

## 6. Systèmes en ligne et secrets

- N'affiche, ne journalise, n'expose et ne commit jamais de secrets.
- Considère toute modification de la production, du CMS, d'une boutique, du DNS, de l'hébergement ou des accès comme une action externe distincte qui exige l'autorisation de l'utilisateur.
- Avant une modification autorisée de données en ligne, note la valeur actuelle, fais le plus petit changement nécessaire, vérifie-le dans l'interface de lecture du système et indique la procédure de retour arrière.

## 7. Vérification

- Compare le rendu aux références approuvées avec les mêmes dimensions d'écran.
- Vérifie au minimum une vue ordinateur et une vue mobile, ainsi que les largeurs intermédiaires qui modifient la mise en page.
- Teste la navigation, les liens, les formulaires, les parcours clavier et les interactions importantes.
- Vérifie les règles visuelles approuvées, le responsive, les bases de l'accessibilité, les médias sensibles aux performances et l'implémentation SEO.
- Lance les vérifications pertinentes du projet et corrige les erreurs provoquées par le travail effectué.
- Fais critiquer les captures à l'aveugle par un sous-agent distinct : donne-lui uniquement les captures et une grille de design mesurable (tailles de texte minimales, zones tactiles, contraste, couleurs, typographies, rayons et ombres autorisés), sans l'intention ni l'historique. Corrige ce qu'il relève, puis vérifie à nouveau. La revue de celui qui a construit ne remplace pas cette étape.
- Termine par une revue visuelle globale menée par l'agent principal. Montre des captures et distingue ce qui a été observé dans le navigateur de ce qui a seulement été vérifié dans le code.

## 8. Refonte d'un site déjà en ligne

Applique cette section en plus des étapes précédentes quand le site existe déjà et reçoit des visiteurs.

- **Commence par un état des lieux, en lecture seule.** Capture chaque page en vue ordinateur et mobile, le texte de chaque page, toutes les URL et redirections, les titres, descriptions, données structurées, intégrations, et ce qui se charge avant le consentement. Quand deux sources de données métier se contredisent (le site et la fiche d'établissement, le CMS et les photos), demande à l'utilisateur laquelle fait foi.
- **Une seule source de vérité avant de reconstruire.** Place l'en-tête et le pied de page partagés dans des fragments communs. Regroupe les données métier répétées (catalogue, carte, prix, horaires) dans un seul fichier qui génère à la fois les pages visibles et les données structurées, pour qu'elles ne puissent jamais diverger.
- **Fais valider page par page.** Montre chaque page reconstruite avant de commencer la suivante. La validation d'une page ne vaut pas pour la suivante.
- **Prouve que rien n'a été perdu.** Après chaque page, compare son texte à l'état des lieux. Chaque phrase supprimée ou modifiée est soit volontaire et listée pour l'utilisateur, soit un défaut. Garde chaque URL existante fonctionnelle ou redirigée.
- **Garde des images produites honnêtes.** Le vrai produit ou la vraie photo fait foi pour l'apparence : accompagnements, portions, cuisson, imperfections naturelles. Les données métier font foi pour les quantités et la composition. Rien ne doit paraître plus beau que ce que reçoit le client. Travaille une catégorie à la fois, vérifie chaque quantité par rapport aux données, montre chaque original à côté de sa nouvelle version et attends la validation avant le lot suivant. Note le modèle, le prompt et les sources. Quand les images sont des illustrations, propose une courte mention comme « Photos non contractuelles ».
- **Utilise des noms d'assets compatibles avec le cache.** Renomme les fichiers modifiés quand l'hébergeur met les assets en cache longtemps.
- **Ne publie qu'avec un feu vert explicite pour cette mise en ligne.** « C'est bien » valide le design, pas un déploiement. Après la publication, vérifie le site en ligne : chaque URL de l'état des lieux, la page 404, les nouveaux assets, les erreurs console, le consentement et le nouveau contenu. Indique la version en ligne et la procédure de retour arrière.

## Routage des modèles

Suis le `CLAUDE.md` du projet s'il définit le routage des modèles. Sinon :

- `fable` : synthèse des recherches, architecture de l'information, direction visuelle, systèmes de design, décisions UX difficiles, bugs complexes et revue finale
- `opus` : implémentation complexe, sites de plusieurs pages, responsive, animations et refactorisations
- `sonnet` : modifications courantes, SEO technique, accessibilité, tests, documentation et commits
- `haiku` : recherches rapides, inventaires de fichiers ou d'assets, vérification des liens et résumés
- Passe `model` à chaque appel Agent. Si un modèle nommé n'est pas disponible, utilise le modèle compatible le plus proche et indique le remplacement

## Délégation

- Délègue les recherches indépendantes, les audits SEO, les inventaires, les vérifications de liens et les tâches d'implémentation isolées.
- Travaille directement quand la tâche est simple, séquentielle ou dépend du même contexte créatif.
- Donne à chaque sous-agent une tâche bien délimitée, le contexte utile, une responsabilité claire et un résultat concret à rendre.
- Donne un propriétaire unique à chaque fichier ou composant partagé. Lance en parallèle uniquement les tâches qui ne dépendent pas les unes des autres.
- Demande aux sous-agents de rendre leurs conclusions, leurs preuves, les fichiers modifiés, les vérifications effectuées et les risques non résolus.
- Lis d'abord les rapports, puis inspecte les sources et les changements essentiels avant de décider ou d'intégrer.