jpoindexter/theft-kit

Page d'atterrissage SaaS en une seule page avec héros, fonctionnalités, preuve sociale, tarifs et appel à l'action. Respecte les jetons de couleur, typographie et mise en page du DESIGN.md actif.

Qu'est-ce que theft-kit ?

Ce skill génère une landing page SaaS complète en une page unique, idéale pour les startups ou produits SaaS cherchant à présenter rapidement une page de vente professionnelle. Il intègre les sections obligatoires : héros avec appel à l'action, fonctionnalités (3 à 6 tuiles), preuve sociale (logos ou témoignages, paramétrable), tarification (2-3 paliers, activable) et pied de page avec appel à l'action. Le skill suit rigoureusement un DESIGN.md présent dans le répertoire de travail, lisant les couleurs, la typographie et les règles de mise en page définies. Il produit un fichier `index.html` autonome avec CSS intégré, balisage sémantique HTML5, et chaque élément modifiable est marqué d'un attribut `data-od-id` pour l'édition en mode commentaire. Le skill est compatible avec Claude Code et d'autres agents, et inclut une auto-vérification pour garantir que le texte est significatif (pas de lorem ipsum), les références de couleurs sont valides et la mise en page est réactive (écrans 1440w, 768w, 375w).

Compatible avec✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/jpoindexter/theft-kit/tree/HEAD/saas-landing

Documentation

Compétence Landing Page SaaS

Produire une page d'atterrissage SaaS en une seule page. Agent, suis précisément 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 manque, arrête-toi et demande-en un.
Identifie la palette de couleurs, les jetons typographiques et les principes de mise en page.
Note la section "Guide d'invite pour l'agent" — elle remplace toute instruction ici en cas de conflit.

2. Planifier les sections

Sections requises, dans l'ordre :

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

3. Appliquer le système de design

Toutes les couleurs doivent provenir des jetons 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 des sections.
Composants : utilise les motifs de boutons/cartes/saisies déclarés. N'ajoute pas d'ombres si DESIGN.md indique minimal pour "Profondeur et Élévation".
Accent : utilise la couleur d'accent une fois dans le héros, une fois dans l'appel à l'action du pied de page, et pour tous les liens. Ne sature pas la page.

4. Écrire le fichier

Produis un seul fichier index.html autonome avec :

Tout le CSS intégré dans un bloc <style> dans <head>.
Des polices de secours système si les polices DESIGN.md ne sont pas chargeables depuis Google Fonts, etc.
Aucun JS externe.
HTML sémantique (<header>, <main>, <section>, <footer>).
Chaque élément modifiable marqué 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 non du lorem ipsum (utilise product_name et les entrées tagline ; génère une copie spécifique plausible pour le reste).
Aucune référence de couleur cassée (chaque valeur CSS couleur est dans la palette de DESIGN.md ou une variante alpha/fallback valide).
Les points de rupture responsives correspondent à la section "Comportement Responsive" de DESIGN.md.
La page rend bien à 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é, fichier JS ou 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épart optionnel ; cette compétence n'en utilise pas)

Points à remarquer :

Le bloc front-matter od: est optionnel pour la compatibilité Claude-Code uniquement, mais son ajout active les entrées typées de OD, les curseurs, les métadonnées de prévisualisation et le filtrage des capacités.
Le workflow en dessous du front-matter est du Markdown simple que l'agent lit comme son prompt système.
DESIGN.md est traité comme un collaborateur, pas comme un remplacement. La compétence donne à l'agent l'autorité de remplacer lorsque le brief entre en conflit, mais jamais d'inventer de nouveaux jetons.
Le marquage 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.

Respecte ces quatre règles dans le contrat du package ; ne dépends pas d'un fichier de protocole au niveau du dépôt qui pourrait ne pas voyager avec cette compétence.