Générer un cadre

Que fait Générer un cadre ?

Transforme les captures d'écran existantes en PNG encadrés avec frame-kit, qui effectue tout le rendu. Cette compétence localise l'outil, l'exécute, vérifie les résultats et choisit une couverture. Pour d'abord capturer les pages d'un projet, utilisez generate-project-frames.

1. Localiser et vérifier frame-kit

Appelez le dossier <frame-kit>. Utilisez le premier qui contient cli.mjs et un package.json nommé frame-kit :

1. $FRAME_KIT_DIR
2. le dossier derrière une commande frame-kit dans le PATH (readlink -f "$(command -v frame-kit)", son dossier)
3. une recherche dans ~/projects ~/code ~/dev ~, profondeur ≤ 4, en ignorant node_modules (plusieurs correspondances → demander laquelle)
4. demander à l'utilisateur ; s'il n'en a pas, suggérer git clone https://github.com/CrziDev/frame-kit

Ensuite :

• node_modules manquant → npm install dans <frame-kit>.
• Exécutez node <frame-kit>/cli.mjs --help et construisez les commandes uniquement à partir des options listées. Si --resolution ou --fit est absent, l'installation est ancienne : omettez-les et dites à l'utilisateur de git pull.
• "Chromium not found" → npx playwright install chromium dans <frame-kit>, ou définissez CHROME_PATH.

N'écrivez pas le chemin dans un fichier de compétence.

2. Cadrer

node <frame-kit>/cli.mjs single <image|dossier> --out <dossier_cadré> [options]

• --out : toujours le passer. Par défaut <dossier_entrée>/framed/, qui s'imbrique dans un dossier brut. Gardez les images cadrées séparées des sources.
• --url "<hôte>/{name}" : texte de la barre d'adresse ; {name} = nom du fichier sans son préfixe NN-. Utilisez l'hôte et les chemins réels de l'application lorsqu'ils sont connus, sinon omettez.
• --style paper : reçus, factures, impressions. Une exécution sur dossier utilise un seul style, donc relancez ces fichiers individuellement avec --style paper et le même --out.
• --resolution standard|high|max : par défaut max (3840×2400). Utilisez standard (1920×1200) pour les README et aperçus rapides, high (2560×1600) pour le web et les diaporamas. Une sortie plus grande donne un cadre et un texte plus nets, pas plus de détails dans la capture. Utilisez une résolution par lot.
• --fit auto|contain|cover : par défaut auto (capture entière ; pages très longues recadrées depuis le haut). Changez uniquement pour corriger un mauvais recadrage.

Code de sortie 1 signifie que certains fichiers ont échoué ; les autres sont quand même écrits et les échecs sont listés sur stderr. Corrigez la cause (image illisible ou corrompue, type non supporté, plus de 50 Mo) et relancez uniquement ces fichiers. Si tous les fichiers échouent, suspectez Chromium.

3. Couverture (entrée dossier uniquement)

Regardez les images, puis choisissez-en deux qui se complètent :

• arrière : vue d'ensemble du produit (tableau de bord, analytics, accueil), paysage, lisible à taille de vignette.
• avant : l'écran montrant ce que fait l'application, avec du contenu réel, une disposition différente de l'arrière.
• jamais : connexion, états vides, pages d'erreur, captures plein écran très longues, reçus, ou le même écran deux fois.

node <frame-kit>/cli.mjs cover <arrière> <avant> --back-url "…" --front-url "…" --out <dossier_cadré>/00-cover.png (même --resolution). Passez les captures sources, pas les cadrées. Une seule image vaut la peine d'être montrée, ou l'utilisateur veut un titre ? Utilisez headline (voir --help).

4. Vérifier et rapporter

1. node <ce skill>/scripts/verify-frames.mjs <entrée> <dossier_cadré> --resolution <préréglage> vérifie que chaque entrée a un PNG valide de la bonne taille, plus la couverture. Il ne juge pas l'apparence.
2. Lisez chaque PNG de sortie (et la couverture). Cherchez une capture vierge ou partiellement chargée, du contenu rogné, du texte illisible, un mauvais style (reçu dans une fenêtre de navigateur), une barre d'adresse erronée. Relancez uniquement les fichiers concernés avec des options ajustées, puis revérifiez. Si vous ne pouvez pas voir les images, dites-le.
3. Rapportez : dossier cadré, fichiers ayant échoué ou été refaits, la paire de couverture, et en une phrase pourquoi les deux se complètent.