Vignettes de site dirigées

Thumbnail

Transformez un site web, un projet local ou un article unique en une miniature finie et haute résolution qui semble appartenir à ce site. L'image est composée en HTML/CSS à partir du matériel propre du site et rendue en PNG et WebP sans perte.

Principes

• Inspiré par le site. Chaque miniature est une nouvelle composition construite à partir des éléments signature du site : son visuel principal, ses composants, ses images, ses motifs, sa typographie et ses couleurs. Une capture d'écran dans un cadre d'appareil n'est qu'une des neuf compositions et n'est jamais le choix par défaut.
• Matériel réel uniquement. Utilisez le vrai logo, les vraies images, le vrai texte, les vrais chiffres, couleurs et polices du site. N'inventez jamais de fonctionnalités, prix, statistiques ou affirmations.
• Un livrable par exécution. Fonctionne entièrement automatiquement. La seule question que cette compétence peut poser est la question de langue dans Entrées → Langue.

Communication

• Travaillez en silence. Ne racontez pas les étapes, les découvertes, le raisonnement de conception, les tentatives ou les corrections. L'analyse reste dans les appels d'outils et dans brief.md. Gardez les descriptions des appels d'outils courtes et neutres.
• Parlez uniquement quand c'est nécessaire : la question de langue, un problème bloquant sur lequel l'utilisateur doit agir (le site est inaccessible, le projet ne peut pas être exécuté), et la livraison finale.
• Langue de la session. Écrivez chaque message destiné à l'utilisateur (questions, options, erreurs, la réponse finale) dans la langue que l'utilisateur utilise, indépendamment de la langue de la miniature.
• Réponse finale. Affichez l'image, puis donnez les chemins PNG et WebP et deux à quatre lignes courtes : composition, format, phrase, catégorie, et d'où viennent le logo, les couleurs et la police. Terminez par une ligne proposant des modifications et une ligne suggérant un autre format (voir references/formats.md). Pas de récapitulatif du processus.

Configuration

Les chemins sont relatifs au répertoire de cette compétence (le dossier qui contient ce fichier). Définissez SKILL_DIR comme ce dossier et S=$SKILL_DIR/scripts.

Script	Objectif
`inspect.mjs <url	fichier>`
`extract.mjs <url	fichier> --out `
`extract.mjs <url	fichier> --out --selector "" --name [--transparent]`
`screenshot.mjs <url	fichier> --out <fichier.png> [--width --height --scale --wait]`
render.mjs <fichier.html> [--out <fichier.png>]	Rend une composition en 2x en PNG et WebP sans perte. Lit la taille du canevas depuis la page et signale les polices chargées, les polices échouées, les images cassées et le texte débordant.
history.mjs / history.mjs add <site> "<composition>"	Affiche ou enregistre les compositions récemment utilisées.

Les scripts n'ont pas de dépendances npm. Si aucun navigateur n'est trouvé, définissez CHROME_PATH. Sur macOS, head peut être occulté par un outil Perl ; lisez les fichiers avec cat, sed -n ou python3.

Entrées

Résolvez ces quatre entrées avant de concevoir.

Cible

• Mode URL : la requête contient une URL ou un domaine. Dossier de sortie : ./thumbnail-<domaine>/ dans le répertoire de travail courant. Traitez les autres mots de la requête comme des notes, par exemple une langue, un format, une composition ou un souhait de style.
• Mode projet : pas d'URL. La cible est le projet courant. Dossier de sortie : ./thumbnail/ à la racine du projet.

Conservez tous les fichiers de l'exécution dans le dossier de sortie.

Type de page (mode URL)

Exécutez d'abord inspect.mjs et lisez page.type :

• site : la miniature concerne l'ensemble du site web.
• article : l'URL est un article unique, un billet de blog, un guide ou une actualité. La miniature concerne le sujet de l'article, stylisée avec l'identité du site. Utilisez le dossier de sortie ./thumbnail-<domaine>-<slug>/, où le slug est le dernier segment du chemin, raccourci à environ 40 caractères.

La détection utilise og:type, JSON-LD (Article, BlogPosting, NewsArticle…), une date de publication, un élément <article>, des chemins d'URL de type blog et la longueur du texte. Les notes de l'utilisateur la remplacent : "à propos du site" signifie site, et "à propos de l'article" ou "à propos du sujet" signifie article, dans n'importe quelle langue.

Langue

Déterminez la langue du contenu à partir de lang et dir, des en-têtes et du texte de l'interface utilisateur. En mode projet, vérifiez également <html lang> et les dossiers de paramètres régionaux tels que locales/<code> ou messages/<code>.json.

1. Si les notes de l'utilisateur nomment une langue, utilisez-la.
2. Si le site a une seule langue, utilisez-la. L'arabe, le persan, l'ourdou et l'hébreu sont disposés de droite à gauche.
3. Si le site prend entièrement en charge deux langues ou plus, demandez à l'utilisateur laquelle utiliser. Utilisez l'outil de question de l'agent s'il en a un ; sinon, demandez dans le chat et attendez. Recommandez la locale par défaut du site.
4. Si la langue n'est pas claire, utilisez l'arabe.

La phrase, la catégorie et tout texte supplémentaire sont rédigés dans la langue choisie.

Format

• Par défaut : une miniature de portfolio, 1080 × 720, pour un site ; Open Graph, 1200 × 630, pour un article.
• Sur demande : si l'utilisateur nomme une plateforme, un emplacement, un rapport d'aspect ou une taille exacte, résolvez-le avec $SKILL_DIR/references/formats.md. Ce fichier donne également le nom du fichier de sortie, les zones de sécurité pour les formats verticaux et des conseils de mise en page.
• Chaque format est rendu en 2x et exporté en PNG et WebP sans perte.

Flux de travail

Travaillez en peu de tours. Chaque tour relit l'ensemble de la conversation, donc le nombre de tours détermine le coût bien plus que n'importe quel fichier individuel. Regroupez les commandes indépendantes en un seul appel shell, lisez les fichiers indépendants en parallèle dans le même tour, et ne relisez jamais un fichier ou une image que vous avez déjà vus.

1. Rendre la cible accessible

• Mode URL : utilisez l'URL.
• Projet statique (un index.html et aucune étape de construction) : utilisez le chemin du fichier. Si les ressources utilisent des chemins absolus à la racine, servez le dossier en arrière-plan (par exemple python3 -m http.server 4173) et utilisez http://localhost:4173.
• Projet avec framework (un package.json avec dev, start ou preview) : installez les dépendances si node_modules est manquant, en utilisant le gestionnaire de paquets qui correspond au fichier de verrouillage. Démarrez le serveur de développement en arrière-plan, lisez son port depuis la sortie, et attendez que curl -s -o /dev/null -w "%{http_code}" <url> réponde. Arrêtez le serveur une fois l'extraction terminée.
• Ne peut pas être exécuté : utilisez une URL déployée depuis package.json (homepage) ou le README. S'il n'y en a pas, construisez à partir des ressources propres du projet (images, composants, styles) et informez l'utilisateur.

2. Inspecter, extraire et vérifier l'historique (une seule commande)

Exécutez les trois dans un seul appel shell :

mkdir -p <out> && node $S/inspect.mjs <url> > <out>/inspect.json && node $S/extract.mjs <url> --out <out>/extract && node $S/history.mjs

Si inspect.json montre que la page est un article, renommez le dossier en ./thumbnail-<domaine>-<slug>/ dans votre prochain appel shell.

3. Comprendre le contenu et étudier l'identité (un seul tour)

Dans le même tour, lisez les champs clés de inspect.json (affichez-les avec un court script plutôt que le fichier entier) et visualisez extract/overview.png. L'aperçu est une planche-contact de chaque capture (héros, sections, éléments, images), chacune étiquetée avec son nom de fichier.

Contenu

• Site : qu'est-ce que c'est, à qui est-ce destiné, qu'est-ce que ça offre, et qu'est-ce qui le rend unique ? Utilisez inspect.json, extract.json et, en mode projet, le README, package.json, les composants de page d'accueil et héros, les fichiers de paramètres régionaux, les balises méta, le manifeste et les styles.
• Article : de quoi parle l'article, et qu'en retirera le lecteur ? Utilisez page.article (titre, description, section, tags, auteur, date, temps de lecture, sous-titres, image de couverture, images dans l'article, blocs de code) et le texte de l'article.
• Si le texte de la page est mince (une page rendue côté client ou un mur anti-bot), récupérez-le d'une autre manière, par exemple avec un outil de récupération web ou curl.

Identité : à partir de l'aperçu (plus l'image de couverture pour un article), notez :

• Ambiance et style : photographique, 3D, illustration plate, luxe, ludique, technique, éditorial, minimaliste…
• Éléments signature : les deux à quatre choses par lesquelles les gens reconnaissent le site, par exemple une image ou un objet principal, une carte ou une vignette de produit distinctive, un motif, un exemple de code, un ensemble d'icônes, un dégradé, un traitement typographique.
• Jetons : couleurs, fond de page, couleurs des boutons, rayons, ombres, dégradés, style des titres, et style des badges ou boutons.

4. Choisir la composition

Si l'utilisateur demande explicitement une composition, utilisez-la. Cela s'applique lorsque l'utilisateur en nomme une (par exemple "Collage de composants") ou en décrit clairement l'idée, dans n'importe quelle langue (par exemple "un collage des cartes du site" ou "une grille de ses fonctionnalités"). Utilisez cette composition même si elle a été utilisée récemment, et sautez la vérification de l'historique. Les autres notes de l'utilisateur s'appliquent toujours.

Sinon, choisissez-la vous-même :

1. Utilisez l'historique imprimé à l'étape 2.
2. Lisez $SKILL_DIR/references/compositions.md et choisissez la composition qui exprime le mieux les éléments signature de ce site.
3. Évitez les compositions utilisées dans les deux dernières exécutions, sauf si rien d'autre ne convient.
4. Écrivez <out>/brief.md. Gardez-le court : mots-clés d'identité, éléments signature et les fichiers que vous utiliserez, la composition choisie et pourquoi, et un croquis de mise en page d'une ligne.

5. Ouvrir les ressources choisies en taille réelle (un seul tour)

L'aperçu sert à choisir, pas à voir les détails. Une fois que vous savez quels deux à quatre atouts le design utilisera (et le logo), ouvrez-les en pleine résolution, tous en parallèle en un seul tour, pour vérifier les petits textes, les motifs fins et la netteté avant de concevoir. Si une partie dont vous avez besoin n'a pas été détectée, capturez-la avec extract.mjs --selector dans le même tour.

6. Rédiger le contenu

Phrase

• Site : ce que le site offre et pourquoi c'est important. Utilisez 5 à 10 mots pour l'arabe et 6 à 12 mots pour l'anglais ou d'autres langues. Rédigez un texte marketing naturel sans point final et ne répétez pas le nom du site.
• Article : l'idée centrale de l'article, soit son titre resserré pour tenir, soit un résumé fidèle d'une ligne. Utilisez 5 à 12 mots pour l'arabe et 6 à 14 pour d'autres langues. N'ajoutez rien qui ne soit pas dans l'article.
• Il doit tenir en trois lignes. Vous pouvez mettre en évidence un à trois mots clés en utilisant la couleur d'accent ou le traitement des titres du site.

Catégorie

• Deux ou trois mots dans la langue de la miniature.
• Site : le type de produit, par exemple Boutique en ligne, Plateforme d'apprentissage, Site d'entreprise, Tableau de bord SaaS, Plateforme de réservation ou Portfolio.
• Article : la section ou le sujet de l'article, par exemple Guide, Étude de cas, Tutoriel ou le sujet lui-même.

Suppléments d'article (optionnel)

• Auteur, date et temps de lecture, en petit. Utilisez uniquement les valeurs réelles de la page.

Logo

• Utilisez toujours le vrai logo et visualisez-le avant de l'utiliser.
  • Projet : cherchez dans public/, static/, assets/, src/assets/ et app/ pour logo*.{svg,png,webp}, icon*.svg, favicon.svg, apple-touch-icon.png et icon-512*.png, plus les icônes du manifeste et les composants de logo en ligne.
  • URL : utilisez inspect.json : logoSvgs (SVG en ligne), logoBackgrounds (logos dessinés comme arrière-plans CSS, souvent un SVG prêt), logoImgs et icons. Préférez un logo vectoriel ou transparent ; ne le recadrez de extract/elements/*-header.png qu'en dernier recours, car un recadrage apporte le fond de la page. Enregistrez les fichiers dans le dossier de sortie.
• Les SVG en ligne qui utilisent currentColor ou des variables CSS ont besoin de couleurs de remplissage réelles. Ne mettez pas de boîte ou d'arrière-plan derrière le logo à moins que cela ne soit nécessaire pour le contraste : logos clairs sur zones sombres, logos sombres sur zones claires.
• Pour un article, le logo est une petite signature, pas le héros.
• Si aucun logo n'existe, utilisez une icône Lucide qui exprime l'idée (https://cdn.jsdelivr.net/npm/[email protected]/icons/<nom>.svg), stylisée aux couleurs de la marque. Ne dessinez jamais de faux logo.

7. Police

• Sources : extract/fonts.css (les règles @font-face propres au site, avec les fichiers de police téléchargés) et extract.json (fonts.google). En mode projet, vérifiez également next/font, les règles @font-face, les importations Google Fonts, le paramètre fontFamily de Tailwind et les fichiers de police dans public/fonts.
• Chargez-la : ajoutez le <link> juste après le lien Noto Sans dans le canevas, puis définissez --font: "<Police du Site>", "Noto Sans Arabic", "Noto Sans", sans-serif.
• Vérifiez la couverture : la police doit couvrir l'écriture de la miniature. Une police uniquement latine ne peut pas rendre le texte arabe, donc revenez à Noto Sans Arabic. Si une police d'affichage n'a qu'un seul poids, utilisez ce poids ; ne simulez jamais le gras.
• Repli : si la police manque dans la liste des polices que render.mjs signale, ou apparaît dans failedFonts, utilisez Noto Sans Arabic ou Noto Sans à la place.

8. Construire et rendre

1. Copiez $SKILL_DIR/assets/canvas.html vers <out>/<nom>.html. Le nom est thumbnail pour le format par défaut et thumbnail-<preset> pour les autres formats.
2. Définissez la taille du canevas avec --w et --h dans la première règle :root (la valeur par défaut est 1080px × 720px). Disposez la mise en page pour cette forme, et pour les formats verticaux, gardez le texte à l'intérieur de la zone de sécurité.
3. Concevez en HTML et CSS simples ; le SVG en ligne est le bienvenu.
   • Remplacez les variables de conception et la règle de fond .canvas à la fin du bloc <style>, puis ajoutez vos propres règles après celles-ci.
   • Placez le balisage à l'intérieur de <div class="canvas"> et laissez le <script> de fermeture inchangé.
   • Référencez les ressources avec des chemins relatifs, tels que extract/images/…, extract/elements/… et logo.png.
4. Marquez le texte pour le moteur de rendu :
   • data-fit="3" sur la phrase la réduit jusqu'à ce qu'elle tienne en trois lignes. data-min définit la plus petite taille ; elle ne descend jamais en dessous du minimum lisible du format.
   • data-text="<nom>" sur les éléments de texte permet au moteur de rendu de signaler les débordements.
   • data-decor sur le texte qui n'est pas destiné à être lu (un logo défini en typographie, un mot énorme en fond...

[Le reste du SKILL.md est tronqué pour la traduction]