demo-pagelisted

# 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ésen