faire-site

Faire un site au standard cinématographique

Tout nouveau site sort d'un seul modèle, assemblé avec cinq skills appliquées dans cet ordre, chacune avec un rôle. Sauter l'une d'elles ou changer l'ordre produit l'un de ces trois résultats : joli et sans conversion, qui convertit mais sans finition, ou cassé sur mobile.

Avant de commencer

1. Lisez ce qui existe sur l'entreprise : identite.md, site.json, _memoire/ ou le brief que l'opérateur fournit. Les faits (nom, téléphone, adresse, prix, note, avis, photos) proviennent uniquement de là et des sources publiques de l'entreprise. Avis sur le site seulement s'il est 100 % positif : sont exclus ceux qui mentionnent un défaut, un problème, une réclamation, une affaire annulée ou tout point qui suscite un doute, même si l'avis se termine par un éloge. En cas de doute, il n'entre pas. On ne cite pas non plus, ailleurs sur le site, la personne ayant écrit un avis qui a été exclu.
2. Couleurs de la marque entières, pas seulement l'accent. Si le logo ou la façade utilisent deux couleurs (ex. : orange et bleu), les deux apparaissent avec présence sur le site, dans les tons de la façade ou du logo. Un fond quasi noir ne compte pas comme la deuxième couleur.
3. Logo défini devient icône d'onglet. Si l'entreprise a un logo (envoyé par le propriétaire, Linktree, site, enseigne ou redessiné et approuvé), il est le favicon du site : fichier img/favicon.png (carré, à partir du logo sans fond, avec espace de respiration, 64 et 180 px) lié dans le <head> par <link rel="icon"> et <link rel="apple-touch-icon">. Logo trop large pour être lisible en 16 px : utilisez l'élément central (l'étiquette, le monogramme, l'initiale dans la lettre du logo), jamais une autre lettre ou icône inventée. Sans logo, le favicon est l'initiale dans les couleurs de la marque.
4. Commencez par le template inclus : ${CLAUDE_SKILL_DIR}/template/ (son README.md explique les placeholders, les photos et le script personnaliser.sh). Il convient à toute boutique ou service local ; échangez les sections qui n'ont pas de sens pour le créneau. Un autre template seulement si le créneau exige une structure que celui-ci n'a pas, et même dans ce cas, avec sa finition.
5. Base technique : HTML statique (un seul index.html avec CSS et JS dans le même fichier, plus img/). Offre le même visuel et les mêmes animations, consomme moins de tokens, se publie sans build et ne casse pas à cause de dépendances. Next.js seulement si le site a besoin d'un serveur : formulaire qui enregistre en base ou déclenche un webhook avec clé secrète, zone de connexion, blog avec de nombreuses pages générées, ou lorsque le projet existe déjà en Next (dans ce cas, conservez la base).
6. Sur un site qui existe déjà, conservez la version actuelle (versions/vN-avant-vN+1/) avant toute modification.

La séquence (une skill à la fois, dans cet ordre)

1. frontend-design : direction visuelle avec l'identité réelle de l'entreprise (couleur du logo, typographie d'affiche, contraste de section). Se termine quand la palette, les polices et la structure des sections sont décidées.
2. landing-page-cinematografica : mouvement et finition (entrée échelonnée, bruit, boutons avec poids, mise en valeur des avis, nombre qui compte, coins vifs ou diagonales). Se termine quand aucun élément de sa liste d'interdits n'apparaît.
3. revenue-centric-design (ouvrez references/conversion-and-landing-pages.md) : hero qui réussit le test des 5 secondes, preuve dans le premier écran du mobile, CTA spécifique avec une ligne de garantie en dessous, CTA toutes les 1,5 sections, moins de clics pour sortir. Se termine quand la promesse n'est pas plus grande que la preuve.
4. copywriting (base Eugene Schwartz) : tous les textes, dans la langue du client final, sans inventer de fait. Se termine quand chaque phrase du site est vérifiable dans une source de l'entreprise.
5. adaptar-mobile, toujours en dernier : 360 et 375 px, et vérifier que 1440 px n'a pas cassé. Se termine avec les captures ouvertes et regardées.

Clôture

• Servez localement et envoyez le lien (http://localhost:PORT). Publier seulement quand l'opérateur le demande.
• À la livraison, dites lesquelles des cinq skills ont été exécutées et ce qui est resté sans preuve (fait non confirmé, test uniquement en émulation).