onfire7777/universal-ai-skills-library

Compétence Page d'Accueil SaaS

Produire une page d'accueil SaaS en une seule page. Agent, suis exactement ce workflow.

1. Lire le contexte

Avant d'écrire quoi que ce soit :

• Lis DESIGN.md dans le répertoire de travail courant. S'il est absent, arrête-toi et demande-le.
• Identifie la palette de couleurs, les tokens de typographie et les principes de mise en page.
• Note la section "Guide des instructions de l'agent" — elle remplace toute instruction ici en cas de conflit.

2. Planifier les sections

Sections obligatoires, dans l'ordre :

1. Héros — logo ou mot-symbole, titre (saisie de l'accroche), sous-titre (1–2 phrases), CTA principal, CTA secondaire. Utilise le paramètre hero_density comme espacement vertical en pixels.
2. Fonctionnalités — 3 à 6 tuiles de fonctionnalités. Chacune : icône, titre court, corps de 1 à 2 phrases.
3. Preuve sociale — proof_count logos ou témoignages. Si 0, ignore cette section.
4. Tarification — 2 à 3 formules. Inclus uniquement si has_pricing est vrai.
5. Pied-de-page CTA — grande bande de couleur d'accent avec un bouton d'appel à l'action unique.
6. Pied-de-page — minimal : liens + copyright.

3. Appliquer le système de design

• Toutes les couleurs doivent provenir des tokens de DESIGN.md. N'invente pas de valeurs hexadécimales.
• Typographie : utilise la police d'affichage déclarée pour les titres, la police de corps pour tout le reste.
• Mise en page : respecte la grille, la largeur maximale et les règles d'espacement entre sections.
• Composants : utilise les modèles de boutons, cartes et champs déclarés. N'ajoute pas d'ombres si la section "Profondeur et Élévation" de DESIGN.md indique un style minimal.
• Accent : utilise la couleur d'accent une seule fois dans le héros, une seule fois dans le CTA du pied-de-page et pour tous les liens. Ne sature pas la page.

4. Écrire le fichier

Génère un unique index.html autonome avec :

• Tout le CSS intégré dans un bloc <style> dans <head>.
• Des polices de secours système si les polices de DESIGN.md ne sont pas chargeables depuis Google Fonts, etc.
• Aucun JavaScript externe.
• HTML sémantique (<header>, <main>, <section>, <footer>).
• Chaque élément éditable balisé avec data-od-id="<slug-unique>" afin que le mode commentaire de l'application hôte puisse le cibler.

5. Auto-vérification

Avant de terminer, vérifie :

• Tout le texte est porteur de sens, pas de lorem ipsum (utilise les entrées product_name et tagline ; génère un contenu précis et plausible pour le reste).
• Aucune référence de couleur cassée (chaque valeur CSS de couleur se trouve dans la palette de DESIGN.md ou est une variante alpha/fallback valide).
• Les points de rupture responsive correspondent à la section "Comportement Responsive" de DESIGN.md.
• La page est visuellement correcte à 1440w, 768w et 375w (simulation mentale).
• L'accent est utilisé au maximum deux fois au total.

6. Terminé

Écris uniquement index.html. Ne génère pas de fichier CSS séparé, de fichier JS ou de README.

---

Pour les auteurs de compétences qui lisent ceci comme référence

C'est une compétence minimale mais complète. Structure :

saas-landing-skill/
├── SKILL.md    ← vous êtes ici
└── assets/
    └── base.html    (template de démarrage optionnel ; cette compétence n'en utilise pas)

Points à remarquer :

• Le bloc od: en front-matter est facultatif pour la compatibilité avec Claude Code uniquement, mais son ajout active les entrées typées d'OD, les curseurs, les métadonnées de prévisualisation et le filtrage par capacité.
• Le workflow sous le front-matter est du Markdown simple que l'agent lit comme son instruction système.
• DESIGN.md est traité comme un collaborateur, pas comme une surcharge. La compétence donne à l'agent l'autorité de passer outre lorsque le brief entre en conflit, mais jamais d'inventer de nouveaux tokens.
• Le balisage data-od-id est la façon dont nous connectons les éléments au mode commentaire. Les compétences qui souhaitent la compatibilité avec le mode commentaire doivent annoter leur sortie.

Voir ../../skills-protocol.md pour le protocole complet.