--- name: demo-page description: "Page démo HTML pour validation visuelle avant code. Mots-clés : démo, maquette, preview, prototype, mockup, 'montre-moi à quoi ça ressemblerait'. Ne se charge PAS quand : preview d'un diff/PR, aperçu markdown, démo non visuelle." --- # Demo Page — Validation visuelle avant code Crée des pages HTML standalone pour valider un design, un bloc, une interface ou une page **avant** d'écrire le code de production. Cadrer visuellement en amont évite les allers-retours coûteux entre design et implémentation. ## Interactions avec d'autres skills - **`ui-design`** : complémentaire et indispensable — `demo-page` décide le *quoi / où / comment livrer* la démo ; `ui-design` décide *comment c'est designé*. La démo n'a pas sa propre doctrine visuelle : elle emprunte celle de `ui-design` en entier (direction artistique, anti-slop, typographie, couleur, spatial, accessibilité). **Toujours charger `ui-design` ET lire ses `reference/*.md` pertinents** (voir Étape 1). - **`code-quality`** : ne PAS appliquer — le code démo est jetable, pas du code de production ## Étape 1 — Contexte design Avant de créer la démo : - **Charger `ui-design` ET lire ses `reference/*.md` pertinents** selon le type de démo (table « Chargement des références » du SKILL `ui-design`) — ne pas se contenter du SKILL, les guides détaillés sont là où est la qualité. Au minimum : - Page complète (landing, dashboard, page produit) → `typography.md` + `typography-hierarchy.md` + `spatial.md` + `color.md` (+ `typography-editorial.md` si contenu éditorial) - Bloc / composant / formulaire → `interaction.md` + `accessibility.md` - **Toujours** → `blacklist.md` (anti-slop) + `personality.md` si la démo a du contenu/microcopy - Lire `DESIGN.md` si présent — la démo doit respecter les tokens exacts (couleurs, typo, spacing), sinon le résultat ne sera pas représentatif de la prod - Lire `CLAUDE.md` pour le stack et les conventions du projet - Poser 1-2 questions max si le besoin n'est pas clair (pas d'interrogatoire — c'est un prototype, pas un cahier des charges) ## Étape 2 — Créer la page démo ### Direction visuelle (Step 0 condensé) Avant d'écrire le HTML, appliquer une version courte du « Step 0 » de `ui-design` — 30 secondes, ça évite la démo générique : - **1 phrase de visual thesis** (mood, matière, énergie — ex : « éditorial austère, papier chaud, énergie lente ») - **Le UN truc mémorable** : la signature visuelle qui rendrait une capture reconnaissable, à exécuter sans compromis - Lister mentalement 3 clichés que l'IA produirait pour ce brief, les bannir ### Emplacement Dossier `demos/` à la racine du projet — séparé du code source pour ne pas polluer le projet et permettre un nettoyage facile. - Nom du fichier : `{description-courte}.html` (kebab-case, descriptif) - Exemples : `demos/hero-section.html`, `demos/pricing-table.html`, `demos/dashboard-layout.html` - Si `demos/` n'existe pas → le créer - Ajouter `demos/` au `.gitignore` si présent et pas déjà ignoré — les démos ne doivent jamais être commitées ### Contenu Fichier HTML **standalone** — tout en un seul fichier, pour être ouvrable par double-clic sans serveur ni build : - HTML5 complet (``, `` avec viewport meta, ``) - CSS dans `