skeletorflet/opencode-supreme-setup

Compétence Landing SaaS

Produire une page d'atterrissage SaaS mono-page. Agent, suis ce workflow exactement.

1. Lire le contexte

Avant d'écrire quoi que ce soit :

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

2. Planifier les sections

Sections obligatoires, dans l'ordre :

1. Héro — 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 padding vertical en px.
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. Tarifs — 2 à 3 paliers. Inclus seulement si has_pricing est vrai.
5. CTA de pied de page — large bande de couleur d'accentuation avec un appel à l'action à un seul bouton.
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 motifs déclarés de boutons, cartes et champs de saisie. N'ajoute pas d'ombres si la section Profondeur et Élévation de DESIGN.md indique "minimal".
• Accentuation : utilise la couleur d'accentuation une seule fois dans la section héro, 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 seul 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 JS externe.
• HTML sémantique (<header>, <main>, <section>, <footer>).
• Chaque élément modifiable balisé avec data-od-id="<slug-unique>" pour 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 significatif et pertinent, pas du lorem ipsum (utilise les entrées product_name et tagline; génère une copie spécifique 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/de repli valide).
• Les points de rupture responsive correspondent à la section Comportement Responsive de DESIGN.md.
• La page est esthétique à 1 440 px, 768 px et 375 px (simule mentalement).
• L'accentuation n'est utilisée que deux fois au total.

6. Terminé

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

---

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

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

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

Points à noter :

• Le bloc od: en front-matter est optionnel pour la compatibilité avec Claude-Code uniquement, mais son ajout active les entrées typées, les curseurs, les métadonnées d'aperçu et le filtrage par capacité de l'OD.
• Le workflow sous le front-matter est du Markdown simple que l'agent lit comme son prompt système.
• DESIGN.md est traité comme un collaborateur, pas comme une surcharge. La compétence donne à l'agent l'autorité de remplacer les instructions 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 souhaitant la compatibilité avec le mode commentaire doivent annoter leur sortie.

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