nexu-club/waitlist-page

Compétence : Page d'Attente

Les pages de pré-lancement constituent votre première poignée de main avec les futurs utilisateurs. Cette compétence construit une entrée ciblée et honnête : votre identité de marque, ce que vous créez, un chemin clair pour rejoindre la liste d'attente. Pas de rareté artificielle, pas de faux compte à rebours, pas de tactiques d'inflation — juste un véhicule sobre, mobile-first, pour un intérêt authentique.

Flux de travail

Pré-vol : Charger le template durci et les fondations de la marque

0. Charger l'identité de marque — Lisez DESIGN.md pour le système de couleurs, la paire de polices et les règles spatiales. C'est votre fondation. Une page d'attente vit ou meurt par sa cohérence avec la marque qu'elle représente. Si DESIGN.md est manquant, demandez à l'utilisateur d'en fournir un avant de continuer.
1. Lire et copier le template réutilisable — Lisez assets/template.html. Ce template est le germe durci pour toutes les sorties. Copiez-le en tant que index.html pour votre base. N'écrivez pas de HTML à partir de zéro et ne déviez pas de cette structure. Le template contient toute la mise en page, la structure du formulaire, les décorations, les styles de focus et l'échafaudage d'accessibilité.

Étapes : Remplacement des tokens avec validation et échappement

2. Mapper les tokens à partir des entrées — Pour chaque placeholder dans le template (par ex. {{PRODUCT_NAME}}, {{BG_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{LOGO_MARK}}), suivez les règles de remplacement ci-dessous :
   • Tokens texte ({{PRODUCT_NAME}}, {{TAGLINE}}) : Échappez HTML <, >, &, ", ' avant insertion dans les nœuds de texte HTML ou les valeurs d'attributs.
   • Tokens HTML ({{LOGO_MARK}}) : Si vous utilisez des initiales textuelles, échappez-les HTML par défaut. Si vous utilisez un SVG en ligne, vous devez le nettoyer strictement avec une liste blanche : supprimez les balises <script>, les gestionnaires d'événements (on*), <foreignObject>, les références externes (href, xlink:href, url()), et tout attribut/élément non autorisé avant insertion. Si le SVG ne peut pas être nettoyé en toute sécurité, revenez aux initiales textuelles échappées. N'émettez jamais de HTML arbitraire brut et non nettoyé. Assurez-vous que tout SVG s'adapte proprement dans son conteneur.
   • Tokens d'expression de couleur ({{BG_EXPRESSION}}, {{FG_EXPRESSION}}, {{ACCENT_EXPRESSION}}, {{DECO_EXPRESSION}}, {{STRIPE_EXPRESSION}}, {{SUCCESS_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{BTN_LABEL_EXPRESSION}}, {{TICKER_BG_EXPRESSION}}, {{TICKER_FG_EXPRESSION}}, {{DECO_STROKE_EXPRESSION}}, {{LOGO_SHADOW_EXPRESSION}}, {{LOGO_FG_EXPRESSION}}) : Doivent strictement adhérer à une grammaire de couleur explicite (#hex, rgb/rgba, hsl/hsla, oklch, ou color-mix() utilisant uniquement des variables locales). Rejetez fermement toute entrée contenant ;, {}, <, >, des commentaires (/*), @, url(, ou des références externes pour empêcher l'injection CSS. N'ajoutez pas de # ni de guillemets supplémentaires. Exemples : rgba(196, 169, 154, 0.38), color-mix(in srgb, var(--fg) 38%, transparent), #FDE8DF. Insérez tel quel dans les variables CSS :root. Déduisez --success de DESIGN.md s'il est présent ; sinon, utilisez uniquement la valeur de repli autorisée #2D6A4F.
   • Tokens de nom de police ({{DISPLAY_FONT_CSS}}, {{BODY_FONT_CSS}}) : Ce sont des valeurs CSS font-family, déjà entre guillemets si elles contiennent des espaces (par ex. 'DM Sans', Syne). Insérez-les telles quelles dans les déclarations --font-display et --font-body ; n'ajoutez PAS de guillemets supplémentaires.
   • Tokens d'URL de police ({{DISPLAY_FONT_URL}}, {{BODY_FONT_URL}}) : Les espaces doivent être encodés en + pour l'URL Google Fonts (par ex. DM+Sans, IBM+Plex+Serif). Validez que l'URL est bien formée avant insertion.
3. Vérifier les règles de mappage des tokens — Tous les tokens de couleur sont désormais dans des variables CSS :
   • --bg = {{BG_EXPRESSION}} (ex. #FDE8DF)
   • --fg = {{FG_EXPRESSION}} (ex. #1A1410)
   • --accent = {{ACCENT_EXPRESSION}} (badge de marque)
   • --deco = {{DECO_EXPRESSION}} (décoration primaire)
   • --deco-stripe = {{STRIPE_EXPRESSION}} (bande d'accent)
   • --input-border = {{BORDER_EXPRESSION}} (expression CSS complète avec opacité)
   • --success = {{SUCCESS_EXPRESSION}} ou repli #2D6A4F
   • --btn-label = {{BTN_LABEL_EXPRESSION}} (couleur du texte du bouton pour le contraste)
   • --ticker-bg = {{TICKER_BG_EXPRESSION}} (arrière-plan du ticker animé)
   • --ticker-fg = {{TICKER_FG_EXPRESSION}} (texte du ticker animé)
   • --deco-stroke = {{DECO_STROKE_EXPRESSION}} (traits SVG, généralement atténués avec une opacité de 12 à 15 %)
   • --logo-shadow = {{LOGO_SHADOW_EXPRESSION}} (ombre du conteneur du logo, nuance subtile de la couleur de premier plan)
   • --logo-fg = {{LOGO_FG_EXPRESSION}} (couleur de texte contrastée pour les initiales du logo)
4. Mise en page adaptative — Le template inclut une mise à l'échelle mobile-first :
   • 375px : le formulaire s'empile sur une seule colonne, le logo réduit à 40px, la décoration se comprime, pas de défilement horizontal.
   • 768px : espace confortable sur deux colonnes.
   • 1440px+ : mise en page centrée avec généreux espaces blancs.
   • Vérifiez que tout le texte reste lisible et que le champ email + le bouton sont entièrement visibles (sans rognage) à 375×667 et 390×844.

Validation : Exécuter les contrôles qualité durcis avant d'émettre

5. Exécuter la checklist qualité — Lisez references/checklist.md. Validez chaque contrôle P0 avant d'émettre :
   • Exactement un appel à l'action (formulaire email)
   • Pas de compte à rebours, pas de preuve sociale factice, pas d'emoji
   • Pas de défilement horizontal à 375px
   • Le champ email a type="email" et required ; le prénom n'a pas de required
   • Le formulaire n'utilise PAS novalidate ; JS utilise la garde checkValidity()
   • Le message de succès a role="status" ou aria-live="polite"
   • Toutes les couleurs proviennent de DESIGN.md ou de la valeur de repli autorisée ; aucune valeur hexadécimale inventée
   • Tout le texte utilisateur est échappé HTML ; les tokens de couleur adhèrent à une grammaire stricte ; les polices sont encodées en URL
   • Réussir P0 ou ne pas émettre. Si un contrôle P0 échoue, demandez à l'utilisateur ou corrigez les mappages de tokens et réessayez.
6. Vérifier les contrôles P1 pour une soumission de qualité (recommandé) :
   • États de survol et d'activation sur le bouton de soumission
   • Validation du formulaire avec retour clair
   • L'animation du ticker respecte prefers-reduced-motion: reduce
   • Tous les éléments interactifs ont des styles de focus visibles (input:focus inclut outline)
   • Prise en charge du clavier Tab/Entrée
   • Contraste WCAG AA pour le texte du corps (≥4.5:1) et l'étiquette du bouton (≥4.5:1)
   • Logo alt/aria-label présent ; ticker a aria-hidden="true"
   • <html lang=""> est défini

Sortie

7. Émettre du HTML propre — Fichier unique, CSS en ligne, SVG pour les graphiques. Marquez les éléments interactifs avec data-od-id (titre, formulaire, logo, ticker, grille, etc.) afin que les agents puissent personnaliser sans avoir à analyser.

Contrôles qualité

Cette compétence applique un flux de travail durci basé sur des templates pour garantir la conformité. Vous devez suivre ce chemin d'exécution ; s'écarter du template disqualifie la sortie.

Exécution obligatoire basée sur un template :

• Lisez assets/template.html comme base ; n'écrivez pas de HTML à partir de zéro.
• Copiez-le vers index.html et remplacez uniquement les tokens {{PLACEHOLDER}} avec des valeurs validées/échappées.
• Exécutez chaque contrôle P0 dans references/checklist.md avant d'émettre ; si l'un échoue, corrigez et re-validez.

Contrôles P0 (doivent passer) :

• Un seul appel à l'action : le formulaire email est le seul élément interactif. Pas de navigation, pas de boutons secondaires, pas de liens sociaux.
• Placement du logo : Fixe en haut à gauche, correspond à la couleur d'accent de DESIGN.md, réduit sur mobile (50px → 40px).
• Cohérence des couleurs : Chaque couleur provient de la palette DESIGN.md. Seule exception codée en dur autorisée : #2D6A4F pour --success.
• Pas d'anti-patrons : Pas de compte à rebours, pas de preuve sociale factice, pas d'icônes emoji, pas de lorem ipsum.
• Intégrité du contenu : Le titre et la copie sont directement liés aux entrées product_name et tagline—pas de texte de remplissage.
• Ajustement mobile : Pas de défilement horizontal à 375px. Le champ email et le bouton de soumission sont entièrement visibles (sans rognage) à 375×667 et 390×844. Le dépassement vertical est défilable, pas caché.
• Discipline typographique : Polices d'affichage + corps uniquement (règle des 2 polices). Taille cohérente dans toutes les sections.
• Structure du formulaire : Deux champs (prénom optionnel, email requis), garde checkValidity(), message de succès avec role="status".
• Échappement des tokens : Tout le texte fourni par l'utilisateur est échappé HTML ; les tokens de couleur adhèrent à une grammaire stricte et ne contiennent aucun caractère dangereux (;, {}, <, >, /*, @, url() ; les noms de polices sont encodés en URL ; {{LOGO_MARK}} est soit des initiales textuelles échappées, soit un SVG en ligne strictement nettoyé (pas de scripts, pas de gestionnaires d'événements, pas de foreignObject, pas de href externes).

Contrôles P1 (devraient passer pour une soumission de qualité) :

• Section héros visuellement distincte et visible sans défilement.
• Le bouton de soumission email a des états de survol et d'activation.
• La validation du formulaire fournit un retour clair.
• La page est défilable (non rognée) sur toutes les fenêtres mobiles ; l'appel à l'action est visible sans défilement.
• L'animation du ticker est mise en pause/supprimée sous prefers-reduced-motion: reduce.
• Tous les éléments interactifs ont des styles de focus visibles (outline, pas seulement outline:none).
• Clavier : Tab atteint chaque champ du formulaire ; Entrée soumet.
• Contraste WCAG AA : Texte du corps ≥4.5:1, étiquette du bouton ≥4.5:1.
• Logo alt/aria-label présent ; ticker a aria-hidden="true".
• <html lang=""> défini sur le code de langue correct.

Retenue décorative :

• La zone inférieure améliore sans distraire. Opacité, traits subtils, animation atténuée.
• Pas de dégradé qui s'étend sur plus de 20 % de la hauteur de la fenêtre.
• La bobine, la bande, la grille ou le ticker utilisent uniquement les couleurs de DESIGN.md.

Sortie

Émettre uniquement après que tous les contrôles P0 de references/checklist.md sont réussis.

Émettez l'artefact entre les balises :

<artifact identifier="waitlist-id" type="text/html" title="Bientôt disponible — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="fr">
...
</html>
</artifact>

Une ligne de description au-dessus de l'artefact ; rien en dessous.

Post-émission : Si l'utilisateur demande des modifications, mettez à jour index.html sur place et ré-exécutez les contrôles de la checklist P0 avant d'émettre la version suivante. Ne sautez pas la validation lors des itérations.