peterfei/landing-page-skill

Compétence Landing Page

Cette compétence est conçue pour être agent-agnostic — que ce soit Claude Code, Codex CLI, Cursor, Trae, OpenClaw, Hermes Agent ou tout autre agent supportant les compétences basées sur Markdown. Toutes les références aux fichiers utilisent des chemins relatifs par rapport au répertoire racine de cette compétence.

Conditions d'activation

Activer lorsque l'entrée utilisateur contient l'un des mots-clés suivants : landing page, page d'atterrissage, page produit, page marketing, conception de page d'accueil, single page website, page de renvoi.

Limites d'honnêteté (évaluation de l'applicabilité)

Applicable :

1. Pages d'atterrissage à conversion unique (collecte de leads, inscription guidée, achat facilité)
2. Pages de présentation produit/service (SaaS, produit e-commerce unique, service de conseil, cours)
3. Stack technique Next.js 14/15 + Tailwind CSS (phase MVP)
4. Pages avec un objectif de conversion clair (CTA)

Non applicable :

1. Sites multi-pages ou systèmes de blog (hors cadre d'une seule page)
2. Applications complètes nécessitant une API backend, une base de données ou une authentification utilisateur
3. Interactions complexes (collaboration en temps réel, tableaux de bord de visualisation de données, jeux)
4. Plateformes non web (mini-programmes, applications natives, applications de bureau)

Déclaration de limite : Cette compétence génère un code de départ de haute qualité ; le peaufinage des détails de copie et des actifs de marque est à faire manuellement. Aucune promesse de « perfection en un clic ».

Protocole d'opération en 5 phases

Phase 1 : Collecte des besoins

Confirmer avec l'utilisateur les informations suivantes dans l'ordre (sauter si déjà fournies) :

1. Produit/Service : Qu'est-ce que c'est ? Quelle est la proposition de valeur principale ?
2. Public cible : Qui va l'utiliser ? Quels sont les points douloureux ?
3. Objectif de conversion : Que voulez-vous que l'utilisateur fasse ? (S'inscrire / Acheter / Télécharger / Prendre rendez-vous)
4. Stack technique : Confirmer l'utilisation de Next.js 14/15 + Tailwind CSS
5. Préférence de style de marque : Choisir parmi les 6 styles de references/aesthetic-styles.md
6. Référence concurrentielle : Avez-vous une page d'atterrissage de référence que vous aimez ? (Optionnel)

Livrable : Document de synthèse des besoins (liste Markdown), utilisé pour la Phase 2.

Phase 2 : Planification stratégique

1. Charger le modèle sectoriel : Sélectionner un modèle en fonction du type de produit parmi references/page-templates/ :
   • Produit SaaS → references/page-templates/saas-product.md
   • Produit e-commerce unique → references/page-templates/ecommerce.md
   • Autre → Structure générique (Hero → Fonctionnalités → Avantages → Preuve sociale → CTA → Pied de page)
2. Choisir la direction esthétique : Sélectionner le style dans references/aesthetic-styles.md, confirmer la palette de couleurs
3. Structure de copywriting : Planifier avec references/copy-formulas/ :
   • Titre Hero : Formule « Résultat + Public + Mécanisme » de references/copy-formulas/hero-headlines.md
   • Texte CTA : Format « Verbe + Bénéfice » de references/copy-formulas/cta-patterns.md
   • Gestion des objections : Modèles de 5 types d'objections de references/copy-formulas/objection-handling.md
4. Mapping du framework de conversion : Mapper la copie en 7 segments aux 11 éléments DESIGNNAS (réf. references/conversion-framework.md)

Livrable : Document stratégique (incluant le choix de style, la direction de palette, le plan de copie, le tableau de mapping des éléments).

Phase 3 : Système de conception

Générer les jetons de conception basés sur references/design-system.md :

1. Jeton Typographie : Police d'affichage, police de corps, échelle de taille de titre
2. Jeton Couleur : Primaire / Secondaire / Accent / Neutre / Arrière-plan / Texte (hex + variables CSS)
3. Jeton Mouvement : Animation de chargement de page, animation déclenchée par défilement, interaction au survol (type + durée)
4. Jeton Mise en page : Type de grille, échelle d'espacement, largeur de section, règles de mise en page asymétrique

Livrable : Document des jetons de conception (directement copiable dans tailwind.config.ts).

Phase 4 : Génération de code

Générer le code conformément à references/tech-adapters/nextjs-tailwind.md :

1. Structure du projet : app/page.tsx, app/layout.tsx, components/, lib/utils.ts, tailwind.config.ts
2. Composants : Chaque élément DESIGNNAS en composant indépendant (HeroSection, FeaturesSection, etc.)
3. Configuration Tailwind : Étendre les jetons du système de conception (couleurs, polices, animations)
4. Responsive : Utiliser les breakpoints sm:/md:/lg:/xl:
5. Accessibilité : HTML sémantique, texte alt, contraste, focus-visible

Livrable : Code complet et exécutable d'un projet Next.js.

Phase 5 : Validation qualité (boucle fermée)

5.1 Vérification de la conversion

• Couverture des 11 éléments : Vérifier la présence de Hero, Preuve sociale, Fonctionnalités, Avantages, Comment ça marche, Témoignages, Tarification/CTA, FAQ, Rareté, Pied de page (au moins 7 couverts)
• Clarté du CTA : Le texte du CTA utilise-t-il le format « Verbe + Bénéfice » ?
• Titre Hero : Suit-il la formule « Résultat + Public + Mécanisme » ?

5.2 Détection des anti-patrons (vérification élément par élément, voir references/anti-patterns.md)

#	Règle	Logique de détection	Sévérité
1	Police surutilisée	Inter/Roboto/Arial comme police d'affichage	Bloquant
2	Palette modèle	Combinaison modèle dégradé violet + fond blanc pur	Bloquant
3	CTA flou	CTA = Envoyer/En savoir plus/Cliquez ici	Bloquant
4	Absence de preuve sociale	Pas d'élément de preuve sociale sous le Hero	Bloquant
5	Titre Hero faible	Commence par Bienvenue/nom de marque, purement descriptif	Bloquant
6	Absence d'adaptation mobile	Pas de breakpoints sm:/md:/lg: responsive	Avertissement
7	Base d'accessibilité	Absence de alt/aria/HTML sémantique	Avertissement
8	Manque de SEO de base	Absence de balises meta/title/OG	Avertissement
9	Risque de performance	Grande image non optimisée, absence de lazy load	Avertissement
10	Cohérence des jetons	Couleurs codées en dur / espacement non standard	Avertissement

5.3 Cycle de correction automatique (règles bloquantes)

Lorsque les règles bloquantes (1-5) ne sont pas respectées, exécuter automatiquement le cycle de correction :

1. Pour chaque règle bloquante non satisfaite, générer un correctif de code spécifique
2. Remplacer uniquement le code de la Section déclenchant la règle (ne pas modifier les autres sections)
3. Réexécuter la détection de cette règle
4. Répéter les étapes ci-dessus, maximum 3 cycles
5. Si toujours non satisfait après 3 cycles → Rapporter la raison de l'échec, laisser l'utilisateur décider

5.4 Validation des patrons positifs (suggestif, voir references/positive-patterns.md)

#	Patron	Logique de détection
P1	CTA verbe+bénéfice	Le texte du CTA correspond au format « verbe + bénéfice spécifique »
P2	Hero résultat+public	Le titre inclut un résultat quantifiable + public cible
P3	Élément de preuve sociale	La page contient ≥1 type de preuve sociale
P4	Urgence/Rareté	Présence d'un élément d'urgence de places/temps/prix

Les patrons positifs ne déclenchent pas de correction automatique ; ils fournissent uniquement des suggestions d'optimisation dans le rapport.

Livrable : Rapport de détection (tableaux Markdown des anti-patrons + patrons positifs) + résumé des corrections automatiques (le cas échéant).

Phase 5.5 : Itération d'optimisation (optionnel)

Après la Phase 5, proposer 3 options à l'utilisateur :

A) Accepter — Sortir le code final complet du projet B) Modifier une Section spécifiée — L'utilisateur indique la Section à modifier et la demande de modification C) Régénérer une Section spécifiée — L'utilisateur spécifie la Section à régénérer depuis le début

Règles d'itération :

• La modification/régénération n'affecte que la Section spécifiée par l'utilisateur (granularité Section)
• Après chaque modification, redétecter les règles anti-patrons liées à cette Section
• Maximum 3 cycles d'itération, sortir la version courante au-delà
• Chaque cycle produit un journal des modifications : « Cycle N : [Sections] modifiées, [Règles] revérifiées »

Index

Adaptateurs de stack technique

• Next.js 14/15 + Tailwind CSS → references/tech-adapters/nextjs-tailwind.md

Modèles sectoriels

• Page produit SaaS → references/page-templates/saas-product.md
• Page produit e-commerce → references/page-templates/ecommerce.md

Bibliothèque de formules de copywriting

• Titre Hero → references/copy-formulas/hero-headlines.md
• Patrons CTA → references/copy-formulas/cta-patterns.md
• Gestion des objections → references/copy-formulas/objection-handling.md

Références de conception

• Framework de conversion → references/conversion-framework.md
• Système de conception → references/design-system.md
• Styles esthétiques → references/aesthetic-styles.md
• Détection d'anti-patrons → references/anti-patterns.md
• Détection de patrons positifs → references/positive-patterns.md

Notes d'adaptation multi-agents

Cette compétence est conçue pour être agent-agnostic et compatible avec les runtimes suivants :

Runtime	Support	Remarques
Claude Code	Natif	Recommandé, activation via /agent ou mot-clé
Codex CLI	Compatible	Charger directement SKILL.md
Cursor	Compatible	Copier dans .cursorrules ou utiliser Composer
Trae	Compatible	Charger directement SKILL.md
OpenClaw	Compatible	Suivre le protocole skills.sh
Hermes Agent	Compatible	Charger directement SKILL.md
Autres runtimes de compétences basés sur Markdown	Compatible	Tout runtime supportant YAML frontmatter + Markdown

Règles de chemin

Toutes les références aux fichiers utilisent des chemins relatifs par rapport au répertoire racine de cette compétence :

• references/xxx.md
• assets/xxx.svg
• scripts/xxx.py

L'agent ou l'utilisateur résout en fonction de son propre emplacement d'installation, sans dépendre de chemins absolus.

Principe d'autonomie

SKILL.md contient toutes les informations nécessaires et peut être copié et utilisé directement. Les fichiers dans references/ sont des connaissances approfondies supplémentaires, à charger selon les besoins.

Cette compétence suit le protocole ouvert Agent Skills.