app-preview-craft

app-preview-craft — captures d'écran pour le store, cartes sociales et vidéos d'appareils 3D

Tout ce que cette compétence crée est une page (stage/stage.html) mise en scène par un thème et capturée par Chrome headless : les images fixes sont saisies par capture d'écran et finalisées par sharp, les vidéos sont rendues image par image et envoyées dans ffmpeg. La même page alimente le studio de prévisualisation, donc ce que l'utilisateur voit est exactement ce que la CLI exporte.

0. Trouver la compétence, la configurer une fois

Les chemins ci-dessous sont relatifs au répertoire contenant ce SKILL.md. Résolvez-le une fois et prefixez les commandes avec — $SKILL désigne ce répertoire dans tout le document :

SKILL=/chemin/absolu/vers/app-preview-craft        # le dossier avec SKILL.md, scripts/, stage/
# pas sûr de l'endroit où il a été installé ? (dossiers de compétences, puis le cache du plugin Claude Code)
find ./.claude/skills ./.agents/skills ./.goose/skills ~/.claude/skills ~/.agents/skills \
     ~/.gemini/skills ~/.config/goose/skills ~/.claude/plugins \
     -path '*app-preview-craft*/scripts/cli.mjs' 2>/dev/null | head -1

Ensuite, vérifiez la machine. --fix exécute npm install dans la compétence si des paquets manquent :

node "$SKILL/scripts/doctor.mjs" --fix

Doctor doit se terminer par Ready. Une absence de ffmpeg n'est qu'un avertissement (les images fixes fonctionnent quand même). S'il signale l'absence de WebGL, les thèmes 3D ne peuvent pas être rendus — dites-le plutôt que de basculer silencieusement vers des thèmes plats.

Les sorties vont dans le répertoire de travail de l'utilisateur (le cwd du shell) sauf s'il nomme un autre dossier avec --out. N'écrivez jamais de rendus dans $SKILL. L'état temporaire se trouve dans $TMPDIR/app-preview-craft/ et est supprimé après chaque exécution.

1. Flux de travail

1. Choisissez la catégorie (le premier argument de la CLI) en fonction de ce que l'utilisateur a demandé :

   Catégorie	Crée	Taille par défaut
   app-store	Un jeu : une capture par diapositive, par taille, plus overview.png	iphone-6.9 1320×2868
   social-card	Une carte (ou --all diapositives) pour og/X/LinkedIn/Instagram/story	og 1200×630
   screen-video	Animation 2D à partir des captures d'écran seules ; accepte les enregistrements d'écran	reel 1080×1920
   device-video	Vidéo de présentation d'appareil three.js	reel 1080×1920
   device-mockup	Image fixe 3D héroïque, éventuellement transparente	mockup-landscape 2400×1600

2. Rassemblez le contenu. Captures d'écran (PNG/JPG/WebP) et/ou enregistrements (MP4/MOV/WebM) du projet de l'utilisateur, une par diapositive, dans l'ordre. Rédigez vous-même le texte sauf si l'utilisateur l'a fourni (voir §4). Sans captures d'écran, l'exemple d'application "Tempo" est utilisé — acceptable pour montrer les thèmes, jamais pour un livrable.

3. Choisissez un thème. Un thème nommé par l'utilisateur l'emporte. Pour les jeux App Store, associez la catégorie de l'application au tableau du §3 et dites quel thème vous avez choisi et pourquoi. Quand l'utilisateur hésite, montrez-lui d'abord les options :

   node "$SKILL/scripts/cli.mjs" gallery app-store        # → ./gallery-app-store.png
   

   Lisez la feuille (afin qu'elle s'affiche pour l'utilisateur) et laissez-le choisir. Le studio (§8) est la meilleure réponse quand il veut parcourir et ajuster visuellement.

4. Rendez.

   node "$SKILL/scripts/cli.mjs" app-store shots/01.png shots/02.png shots/03.png \
     --theme ledger \
     --title "Chaque euro, *compté*" --title "Des budgets qui *s'adaptent*" --title "Privé *par conception*" \
     --subtitle "Un avantage en une ligne…" --subtitle "…" --subtitle "…" \
     --size iphone-6.9,ipad-13 --set palette.accent=auto
   

5. Inspectez avant de faire votre rapport. Lisez overview.png (jeux), l'image fixe, ou extrayez des trames d'une vidéo (--frames 1,4,mid,end rend des images PNG au lieu d'une vidéo — peu coûteux pour vérifier l'animation). Recherchez les titres tronqués, le texte sur l'appareil, un appareil couvrant la décoration, des écrans vides. Corrigez avec --set/les overrides par diapositive et re-rendez.

6. Faites votre rapport des chemins de sortie, du thème et de la taille, et — chaque fois qu'un appareil 3D apparaît — que CREDITS.txt a été écrit et que le crédit CC-BY doit accompagner les images (§7).

2. Tailles

node "$SKILL/scripts/cli.mjs" list sizes --category app-store affiche le tableau. N'importe quelle LxH fonctionne aussi. Plusieurs à la fois : --size iphone-6.9,iphone-6.5,ipad-13.

• App Store Connect nécessite le jeu 6,9" (iphone-6.9) pour les applications iPhone et ipad-13 pour les applications iPad ; les autres tailles sont optionnelles. La sortie PNG est aplatie (Apple rejette l'alpha).
• Les tailles tablette remplacent automatiquement le téléphone par un cadre de tablette plat, sauf si le thème est sans cadre. Donnez des captures d'écran iPad pour ces diapositives quand l'application en a.
• Vidéos d'aperçu d'application : --size app-preview (886×1920) ou app-preview-ipad, 15–30 s, 30 fps. Une piste AAC stéréo silencieuse est ajoutée automatiquement (Connect attend de l'audio).
• Google Play : play-phone, play-tablet, et play-feature (1024×500, carte sociale).

3. Thèmes

list themes --category <c> les affiche avec leurs mises en page. Chaque catégorie en a ≥ 5.

app-store — chacun modélisé sur une catégorie d'application populaire

Thème	Catégorie d'application	Inspiré par	Aspect
stride	Santé & Fitness	Strava, Nike Run Club	orange vif, pilules condensées en majuscules, bandes de vitesse, téléphone incliné
ledger	Finance	Revolut, Monzo, Robinhood	maillage nocturne, mots dégradés menthe→cyan, orbes chromés
serene	Santé & Pleine conscience	Calm, Headspace	aurore pastel, accents italiques sérifs, écran sans cadre sur une tache douce
canvas	Productivité	Notion, Things, Linear	papier chaud, grille de cahier, grand sérif, téléphone à encre plate
sizzle	Food & Boisson	DoorDash, Uber Eats, Deliveroo	jaune ensoleillé, pois, surlignages marqueur rouge, téléphone incliné
wander	Voyage	Airbnb, Hopper, Booking	dégradé crépusculaire avec un soleil rétro qui traverse tout le jeu (panorama)
mixtape	Musique & Audio	Spotify, Apple Music	votre écran flouté en arrière-plan lumineux, mot géant souligné
arcade	Jeux	Apple Arcade, art de lancement de jeux mobiles	grille synthwave, jantes néon, jouets 3D brillants
snapshot	Photo & Social	Instagram, BeReal, VSCO	trois photos sans cadre disposées en éventail, maillage argentique chaud
pulse	Données de santé & Wearables	Oura, WHOOP, Apple Health	noir clinique, lueur pourpre, titre sous un Pro Max orienté vers l'avant

Les thèmes empruntent une ambiance, jamais une marque : aucun logo, nom ou œuvre de ces applications n'apparaît.

social-card

launch (aurore + téléphone incliné), spotlight (faisceau + sol miroir), pastel-fan (trois écrans en éventail), bento (grille d'extraits d'écran), neon-grid (synthwave), editorial (papier, sérif, écran bichrome), duo (MacBook + téléphone — passez un écran desktop pour le portable).

screen-video (2D)

carousel, stack (les cartes s'envolent), scroll (les captures longues défilent dans le téléphone), zoom-tour (Ken Burns plein écran jusqu'au focus de chaque diapositive), wall (mur incliné d'écrans), store-preview (style d'aperçu App Store — utilisez --size app-preview), grid-reveal.

device-video (3D)

turntable, orbit (arcs de caméra), float (en boucle), rise (la caméra se rapproche), flip (révélation arrière → avant), trio (trois modèles se déploient), desk (le couvercle du MacBook s'ouvre, le téléphone glisse à côté ; les deux se tiennent sur scene.floor), spotlight (360° sur un miroir), synthwave, keyframes (votre propre appareil et mouvement de caméra, à partir de motion.keys — voir §5).

device-mockup (images fixes 3D)

studio, noir, pedestal, levitate, lineup (chaque modèle de téléphone), flatlay, desk-duo. Ajoutez --transparent pour un PNG détouré.

4. Texte

• Titre par diapositive : ≤ 6 mots, un avantage pas une fonctionnalité. Encadrez 1–2 mots avec *astérisques* pour les mettre en valeur dans le style du thème ; " | " force un saut de ligne.
• Sous-titre : une phrase courte. Accroche (optionnelle) : un mot d'étiquette au-dessus.
• Les deux premières diapositives portent le pitch — la plupart des acheteurs ne défilent jamais plus loin.
• N'inventez jamais d'évaluations, de téléchargements, de récompenses ou de citations de presse. Les décorations telles que rating et laurels sont pour les chiffres réels que l'utilisateur vous donne ; demandez en cas de doute.
• Ne nommez pas les concurrents et n'utilisez pas les marques Apple/Google dans le texte au-delà de ce que les directives du store autorisent.

5. Configuration de n'importe quoi

Ordre de résolution, le dernier gagne : base intégrée → valeurs par défaut de la mise en page → thème (et sa chaîne extends) → fichier de thème personnalisé → configuration du projet themeOverrides → raccourcis CLI → --set → thème par diapositive theme.

• Raccourcis : --layout --device --finish --pose --font --body-font --bg --bg2 --bg3 --ink --sub --accent --accent2 --background --pattern --background-image --clean-status-bar --no-decor --duration --fps --speed --intro --outro.
• --set chemin=valeur atteint n'importe quelle clé du thème (répétable). list options affiche les chemins documentés avec les types et les plages. Les valeurs sont coercées ; JSON fonctionne pour les listes/objets : --set device.pose=5,-15,4 --set 'decor=[{"kind":"sparkles","count":8}]'.
• device.pose est x,y,z degrés. Les thèmes restent approximativement à ±20° de lacet et ±6° de roulis pour que l'écran reste lisible à la taille de vignette du store ; des poses plus fortes fonctionnent mais nuisent à la lisibilité.
• Les couleurs acceptent auto = la couleur la plus vive de la première capture d'écran : --accent auto.
• --device iphone-17-pro | iphone-17-pro-max | iphone-12-pro | galaxy-s21-ultra | macbook-pro-16 | flat[:phone|phone-android|tablet|browser] | frameless | none, ou l'id du modèle de l'utilisateur (§7).
• Les mises en page sont interchangeables au sein d'une catégorie (list layouts) : images fixes — hero-top, hero-bottom, tilt, duo, fan, split, big-type, callout, bento, laptop-phone, showcase, pedestal, lineup, flatlay ; vidéos — carousel, stack, scroll, zoom-tour, wall, phone-swap, grid-reveal, turntable, orbit, float, rise, flip, trio, desk, spotlight, keyframes.
• Votre propre animation : la mise en page keyframes déplace un appareil 3D et la caméra à travers motion.keys, une liste de { "at": 0..1, "x", "y", "size", "pose": [rx, ry, rz], "cam": { "yaw", "pitch", "dist" }, "ease" }. at est une fraction de la vidéo entière ; une valeur qu'une clé omet conserve celle de la clé précédente ; la première clé part de la pose du thème lui-même. Les easings : linear inOutCubic inOutSine outCubic outQuart outBack inOutQuart outExpo. --theme keyframes --set 'motion.keys=[{"at":0,"y":1.4,"pose":[0,70,0]},{"at":0.3,"y":0.62,"pose":[4,-20,3],"ease":"outQuart"},{"at":1,"pose":[0,15,0],"cam":{"dist":0.9}}]'. Aucune bibliothèque d'animation n'est impliquée : chaque trame est une fonction pure de son temps, ce qui permet de rendre les trames dans le désordre. Vérifiez un mouvement avec --frames 0,2,mid,end.

Thèmes personnalisés sont des fichiers JSON (ou .mjs) avec n'importe quel sous-ensemble de clés de thème plus extends :

{ "extends": "app-store/ledger", "name": "Acme", "palette": { "accent": "#ff5a1f" },
  "type": { "display": "bricolage", "weight": 800 }, "device": { "finish": "#1c1f24" } }

Passez --theme chemin/vers/acme.json, ou déposez-le dans ./.app-preview-craft/themes/ (ou ~/.app-preview-craft/themes/) et utilisez --theme acme. list themes montre les thèmes personnalisés.

Configuration du projet. node "$SKILL/scripts/cli.mjs" init app-store écrit app-preview-craft.json ; ensuite node "$SKILL/scripts/cli.mjs" (sans arguments) le rend, et les flags le surchargent encore. $SKILL/examples/app-preview-craft.json est un exemple complet et fonctionnel : texte par diapositive, décor et surcharges de thème, un fichier de thème personnalisé, un écran de bureau, et une liste jobs qui rend un jeu App Store, une carte sociale, une maquette et une vidéo en une seule commande. Les chemins dans une configuration sont résolus par rapport au fichier de configuration.

Clés par diapositive : screen, desktop (affichage portable), title, subtitle, kicker, theme (surcharges pour cette diapositive uniquement), decor (remplace la décoration du thème pour cette diapositive), focus: [x, y, zoom] (cible zoom-tour), hold (secondes dans une vidéo), trim: [start, end] et at (quelle seconde d'un enregistrement une image fixe utilise), bigWord (mise en page big-type).

Éléments de décor sont {kind, x, y, scale, rotate, style, layer, delay, …} avec x/y comme fractions de page et style parmi glass | solid | light | dark | outline :

type	clés supplémentaires
badge	text, icon (star bolt heart check sparkle trophy leaf lock music pin flame bell chart shield globe play)
rating	score, label, starColor
laurels	top, text, bottom
chips	items[], icons[], width, lead
notification	app, title, body, time, icon (chemin d'image) ou glyph, width
stat	label, value, trend, trendColor
callout	rect: [x, y, w, h] de la capture d'écran à agrandir, w, border, radius
arrow	w, h, text (note manuscrite), flip, stroke
logo	name, src (chemin de l'icône de l'application)
store-badge	top, text, ou src pour l'œuvre officielle du badge
sparkles confetti	count, colors[], area: [x0, y0, x1, y1], seed
blob	size, color, opacity (se place derrière l'appareil)
orbs rings shapes	Primitives 3D : count, shapes[], finish (glossy chrome matte glass iridescent), area, items[]
credit	text (par défaut la ligne de crédit du modèle)

6. Écrans et traitements

• sharp prépare chaque capture d'écran avant que Chrome ne démarre : screen.cleanStatusBar (redessine une barre d'état iOS 9:41 / batterie pleine — captures en forme de téléphone uniquement), tint + tintAmount, duotone: "#sombre,#clair", saturate, brightness, sharpen, et un fond pré-flouté pour les arrière-plans blur-shot.
• Sur les modèles iPhone, la Dynamic Island est dessinée comme une pilule noire fusionnée sur les découpes de pilule et de caméra du modèle, correspondant à ce qu'iOS affiche. Fournissez des captures d'écran avec la zone de l'île dégagée (toute capture iOS normale l'est) ; cleanStatusBar garde l'heure et les icônes de chaque côté.
• Une capture plus haute que l'affichage défile dans les vidéos (thème scroll) et montre son haut dans les images fixes (screen.fit=top).
• Les enregistrements sont divisés en trames par ffmpeg au taux d'images de sortie ; dans les vidéos, chaque diapositive d'enregistrement dure aussi longtemps que le clip (surchargez avec hold, coupez avec trim). Les images fixes utilisent une trame (at, par défaut : le milieu).
• L'écran du portable letterboxe une capture d'écran de téléphone sur une copie floutée, sauf si la diapositive a un écran desktop. desktop accepte aussi un enregistrement. Dans la vidéo desk, l'écran du MacBook montre le desktop assigné ; sans lui, l'écran du portable est noir.