imshaikot/app-preview-craft

app-preview-craft – Store-Screenshots, Social Cards und 3D-Gerätevideos

Alles, was dieser Skill erstellt, ist eine Seite (stage/stage.html), die von einem Theme posiert und mit Headless Chrome aufgenommen wird: Standbilder werden als Screenshot erfasst und mit sharp bearbeitet, Videos werden Bild für Bild gerendert und an ffmpeg weitergeleitet. Dieselbe Seite versorgt auch das Vorschau-Studio, sodass das, was der Benutzer dort sieht, exakt dem CLI-Export entspricht.

0. Skill finden und einmalig einrichten

Die nachfolgenden Pfade beziehen sich auf das Verzeichnis, das diese SKILL.md enthält. Lösen Sie ihn einmal auf und setzen Sie ihn als Präfix vor Befehle – $SKILL bezeichnet dieses Verzeichnis durchgehend:

SKILL=/absoluter/pfad/zu/app-preview-craft        # das Verzeichnis mit SKILL.md, scripts/, stage/
# Nicht sicher, wo es installiert wurde? (Skill-Ordner, dann der Claude Code-Plugin-Cache)
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

Überprüfen Sie dann die Maschine. --fix führt npm install innerhalb des Skills aus, wenn Pakete fehlen:

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

Doctor muss mit Ready. enden. Ein fehlendes ffmpeg ist nur eine Warnung (Standbilder funktionieren trotzdem). Falls es kein WebGL meldet, können 3D-Themes nicht gerendert werden – sagen Sie dies, anstatt stillschweigend auf flache Themes umzuschalten.

Die Ausgaben gehen in das Verzeichnis, in dem der Benutzer arbeitet (das cwd der Shell), es sei denn, er nennt einen anderen Ordner mit --out. Schreiben Sie niemals Renderings in $SKILL. Temporäre Zustände werden in $TMPDIR/app-preview-craft/ gespeichert und nach jedem Durchlauf gelöscht.

1. Arbeitsablauf

1. Kategorie auswählen (das erste CLI-Argument) basierend auf der Benutzeranfrage:

   Kategorie	Erzeugt	Standardgröße
   app-store	Ein Set: ein Screenshot pro Slide, pro Größe, plus overview.png	iphone-6.9 1320×2868
   social-card	Eine Karte (oder --all Slides) für og/X/LinkedIn/Instagram/Story	og 1200×630
   screen-video	2D-Bewegung aus den Screens allein; akzeptiert Screen-Recordings	reel 1080×1920
   device-video	three.js-Geräte-Showcase-Video	reel 1080×1920
   device-mockup	3D-Helden-Standbild, optional transparent	mockup-landscape 2400×1600

2. Inhalte sammeln. Screenshots (PNG/JPG/WebP) und/oder Aufnahmen (MP4/MOV/WebM) aus dem Projekt des Benutzers, einen pro Slide, in der richtigen Reihenfolge. Schreiben Sie den Kopie-Text selbst, es sei denn, der Benutzer hat ihn geliefert (siehe §4). Ohne Screens wird die mitgelieferte Beispiel-App „Tempo" verwendet – zum Zeigen von Themes ok, niemals für ein auslieferbares Ergebnis.

3. Theme auswählen. Ein vom Benutzer genanntes Theme gewinnt. Für App Store-Sets, gleichen Sie die Store-Kategorie der App mit der Tabelle in §3 ab und teilen Sie mit, welches Theme Sie gewählt haben und warum. Wenn der Benutzer unentschlossen ist, zeigen Sie ihm zuerst die Optionen:

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

   Lesen Sie das Blatt zurück (damit es für den Benutzer gerendert wird) und lassen Sie ihn wählen. Das Studio (§8) ist die bessere Antwort, wenn sie visuell stöbern und anpassen möchten.

4. Rendern.

   node "$SKILL/scripts/cli.mjs" app-store shots/01.png shots/02.png shots/03.png \
     --theme ledger \
     --title "Jeder Euro, *buchstäblich*" --title "Budgets, die sich *anpassen*" --title "Privat *von Grund auf*" \
     --subtitle "Einzeiliger Nutzen…" --subtitle "…" --subtitle "…" \
     --size iphone-6.9,ipad-13 --set palette.accent=auto
   

5. Vor dem Bericht prüfen. Lesen Sie overview.png (Sets), das Standbild oder ziehen Sie Einzelbilder aus einem Video (--frames 1,4,mid,end rendert PNG-Frames statt eines Videos – günstig zur Bewegungskontrolle). Achten Sie auf abgeschnittene Überschriften, Text über dem Gerät, ein Gerät, das Dekor verdeckt, oder leere Screens. Beheben Sie diese Probleme mit --set/pro-Slide-Überschreibungen und rendern Sie neu.

6. Berichten Sie die Ausgabepfade, das Theme und die Größe und – immer wenn ein 3D-Gerät erscheint – dass CREDITS.txt geschrieben wurde und dass der CC-BY-Credit mit den Bildern mitwandern muss (§7).

2. Größen

node "$SKILL/scripts/cli.mjs" list sizes --category app-store gibt die Tabelle aus. Jede BxH funktioniert auch. Mehrere auf einmal: --size iphone-6.9,iphone-6.5,ipad-13.

• App Store Connect benötigt den 6,9"-Satz (iphone-6.9) für iPhone-Apps und ipad-13 für iPad-Apps; andere Größen sind optional. Die PNG-Ausgabe wird flachgelegt (Apple lehnt Alpha ab).
• Tablet-Größen tauschen automatisch das Telefon gegen einen flachen Tablet-Rahmen aus, es sei denn, das Theme ist rahmenlos. Geben Sie iPad-Screenshots für diese Slides, wenn die App welche hat.
• App Preview Videos: --size app-preview (886×1920) oder app-preview-ipad, 15–30 s, 30 fps. Ein stiller Stereo-AAC-Track wird automatisch hinzugefügt (Connect erwartet Audio).
• Google Play: play-phone, play-tablet und play-feature (1024×500, Social-Card).

3. Themes

list themes --category <c> gibt diese mit ihren Layouts aus. Jede Kategorie hat ≥ 5.

app-store – jedes nach einer beliebten App-Kategorie modelliert

Theme	App-Kategorie	Inspiriert von	Look
stride	Gesundheit & Fitness	Strava, Nike Run Club	heißes Orange, kompakte Caps-Pillen, Speed-Streifen, geneigtes Telefon
ledger	Finanzen	Revolut, Monzo, Robinhood	Mitternachts-Mesh, Minze-Cyan-Verlaufswörter, Chrom-Orbs
serene	Gesundheit & Achtsamkeit	Calm, Headspace	pastellene Aurora, kursive Serifen-Akzente, rahmenloser Bildschirm auf einem weichen Blob
canvas	Produktivität	Notion, Things, Linear	warmes Papier, Notizbuch-Raster, große Serife, flaches Tinten-Telefon
sizzle	Essen & Trinken	DoorDash, Uber Eats, Deliveroo	sonniges Gelb, Tupfen, rote Marker-Highlights, geneigtes Telefon
wander	Reisen	Airbnb, Hopper, Booking	Dämmerungsverlauf mit einer Retro-Sonne, die sich über das gesamte Set erstreckt (Panorama)
mixtape	Musik & Audio	Spotify, Apple Music	Ihr Bildschirm zu einem leuchtenden Hintergrund verschwommen, riesiges umrandetes Wort
arcade	Spiele	Apple Arcade, Launch-Art von Mobilspielen	Synthwave-Raster, Neon-Ränder, glänzende 3D-Spielzeuge
snapshot	Foto & Social	Instagram, BeReal, VSCO	drei rahmenlose Aufnahmen wie Fächer angeordnet, warmer Film-Mesh
pulse	Gesundheitsdaten & Wearables	Oura, WHOOP, Apple Health	klinisches Schwarz, tiefrotes Leuchten, Überschrift unter einem Front-Pro-Max

Die Themes entleihen eine Stimmung, niemals eine Marke: keine Logos, Namen oder Grafiken dieser Apps erscheinen.

social-card

launch (Aurora + geneigtes Telefon), spotlight (Strahl + Spiegelboden), pastel-fan (drei aufgefächerte Bildschirme), bento (Raster aus Screen-Ausschnitten), neon-grid (Synthwave), editorial (Papier, Serife, Duoton-Bildschirm), duo (MacBook + Telefon – geben Sie einen desktop-Screen für den Laptop an).

screen-video (2D)

carousel, stack (Karten fliegen weg), scroll (lange Aufnahmen scrollen innerhalb des Telefons), zoom-tour (randloser Ken Burns zu jedem focus der Slides), wall (geneigte Wand aus Bildschirmen), store-preview (App-Store-Vorschau-Stil – verwenden Sie --size app-preview), grid-reveal.

device-video (3D)

turntable, orbit (Kamera schwenkt), float (loopbar), rise (Kamera zoomt herein), flip (Rückseite → Vorderseite-Enthüllung), trio (drei Modelle fächern sich auf), desk (MacBook-Deckel öffnet sich, Telefon gleitet daneben; beide stehen auf scene.floor), spotlight (360° auf einem Spiegel), synthwave, keyframes (eigene Geräte- und Kamerabewegung, von motion.keys – siehe §5).

device-mockup (3D-Standbilder)

studio, noir, pedestal, levitate, lineup (jedes Telefonmodell), flatlay, desk-duo. Fügen Sie --transparent für ein freigestelltes PNG hinzu.

4. Kopie-Text

• Überschrift pro Slide: ≤ 6 Wörter, ein Nutzen, kein Feature. Umschließen Sie 1–2 Wörter mit *Sternchen*, um sie im Theme-Stil hervorzuheben; " | " erzwingt einen Zeilenumbruch.
• Untertitel: ein kurzer Satz. Kicker (optional): ein einwortiges Label oben.
• Die ersten beiden Slides tragen den Pitch – die meisten Käufer scrollen nie weiter.
• Erfinden Sie niemals Bewertungen, Downloadzahlen, Auszeichnungen oder Pressezitate. Dekor wie rating und laurels ist für echte Zahlen, die der Benutzer Ihnen gibt; fragen Sie bei Unsicherheit nach.
• Nennen Sie keine Konkurrenten oder verwenden Sie Apple/Google-Markenzeichen in Texten, die über die Store-Richtlinien hinausgehen.

5. Alles konfigurieren

Auflösungsreihenfolge, später gewinnt: eingebaute Basis → Layout-Standardwerte → Theme (und dessen extends-Kette) → benutzerdefinierte Theme-Datei → Projektkonfiguration themeOverrides → CLI-Verknüpfungen → --set → pro-Slide-theme.

• Verknüpfungen: --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 pfad=wert erreicht jeden Theme-Key (wiederholbar). list options gibt die dokumentierten Pfade mit Typen und Bereichen aus. Werte werden typsicher konvertiert; JSON funktioniert für Listen/Objekte: --set device.pose=5,-15,4 --set 'decor=[{"kind":"sparkles","count":8}]'.
• device.pose ist x,y,z Grad. Themes bleiben innerhalb von etwa ±20° Gieren und ±6° Rollen, sodass der Bildschirm bei Store-Thumbnail-Größe noch lesbar ist; steilere Posen funktionieren, kosten aber Lesbarkeit.
• Farben akzeptieren auto = die lebendigste Farbe im ersten Screenshot: --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 oder die ID des eigenen Gerätemodells (§7).
• Layouts sind innerhalb einer Art austauschbar (list layouts): Standbilder – hero-top, hero-bottom, tilt, duo, fan, split, big-type, callout, bento, laptop-phone, showcase, pedestal, lineup, flatlay; Videos – carousel, stack, scroll, zoom-tour, wall, phone-swap, grid-reveal, turntable, orbit, float, rise, flip, trio, desk, spotlight, keyframes.
• Eigene Bewegung: Das keyframes-Layout bewegt ein 3D-Gerät und die Kamera durch motion.keys, eine Liste aus { "at": 0..1, "x", "y", "size", "pose": [rx, ry, rz], "cam": { "yaw", "pitch", "dist" }, "ease" }. at ist ein Bruchteil des gesamten Videos; ein Wert, den ein Key auslässt, hält die vorherige Einstellung bei; der erste Key startet von der eigenen Pose des Themes. Easing: 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}}]'. Keine Animationsbibliothek ist beteiligt: Jeder Frame ist eine reine Funktion seiner Zeit, was es ermöglicht, Frames in beliebiger Reihenfolge zu rendern. Überprüfen Sie eine Bewegung mit --frames 0,2,mid,end.

Benutzerdefinierte Themes sind JSON- (oder .mjs-) Dateien mit einer beliebigen Teilmenge von Theme-Keys plus extends:

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

Übergeben Sie --theme pfad/zu/acme.json oder legen Sie es in ./.app-preview-craft/themes/ (oder ~/.app-preview-craft/themes/) ab und verwenden Sie --theme acme. list themes zeigt benutzerdefinierte.

Projektkonfiguration. node "$SKILL/scripts/cli.mjs" init app-store schreibt app-preview-craft.json; danach rendert node "$SKILL/scripts/cli.mjs" (ohne Argumente) diese, und Flags überschreiben sie. $SKILL/examples/app-preview-craft.json ist ein vollständiges, funktionierendes Beispiel: pro-Slide-Kopie, Dekor und Theme-Überschreibungen, eine benutzerdefinierte Theme-Datei, ein Desktop-Bildschirm und eine jobs-Liste, die ein App-Store-Set, eine Social-Card, ein Mockup und ein Video in einem Befehl rendert. Pfade in einer Konfiguration werden relativ zur Konfigurationsdatei aufgelöst.

Pro-Slide-Keys: screen, desktop (Laptop-Bildschirm), title, subtitle, kicker, theme (Überschreibungen nur für diesen Slide), decor (ersetzt das Theme-Dekor für diesen Slide), focus: [x, y, zoom] (Zoom-Tour-Ziel), hold (Sekunden in einem Video), trim: [start, end] und at (welche Sekunde einer Aufnahme ein Standbild verwendet), bigWord (big-type-Layout).

Decor-Elemente sind {kind, x, y, scale, rotate, style, layer, delay, …} mit x/y als Seitenbruchteilen und style eines von glass | solid | light | dark | outline:

kind	zusätzliche Keys
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 (Bildpfad) oder glyph, width
stat	label, value, trend, trendColor
callout	rect: [x, y, w, h] des Screenshots zum Vergrößern, w, border, radius
arrow	w, h, text (handgeschriebener Notizzettel), flip, stroke
logo	name, src (App-Symbol-Pfad)
store-badge	top, text oder src für das offizielle Badge-Artwork
sparkles confetti	count, colors[], area: [x0, y0, x1, y1], seed
blob	size, color, opacity (liegt hinter dem Gerät)
orbs rings shapes	3D-Primitive: count, shapes[], finish (glossy chrome matte glass iridescent), area, items[]
credit	text (standardmäßig die Modell-Credit-Zeile)

6. Screens und Behandlungen

• sharp bereitet jeden Screenshot vor, bevor Chrome startet: screen.cleanStatusBar (zeichnet eine 9:41 / voll-aufgeladene iOS-Statusleiste neu – nur Telefon-förmige Aufnahmen), tint + tintAmount, duotone: "#dunkel,#hell", saturate, brightness, sharpen und eine vorab unscharfe Kulisse für blur-shot-Hintergründe.
• Auf iPhone-Modellen wird die Dynamic Island als eine zusammenhängende schwarze Pille über den Pillen-/Kameraausschnitten des Modells gezeichnet, passend zu dem, was iOS zeigt. Liefern Sie Screenshots mit freiem Dynamic-Island-Bereich (jede normale iOS-Aufnahme ist ok); cleanStatusBar behält die Uhrzeit und Icons auf beiden Seiten.
• Eine Aufnahme, die höher als das Display ist, scrollt in Videos (scroll-Theme) und zeigt in Standbildern ihren oberen Teil (screen.fit=top).
• Aufnahmen werden von ffmpeg in Einzelbilder bei der Ausgabe-Bildrate aufgeteilt; in Videos dauert jeder Slide einer Aufnahme so lange wie der Clip (überschreiben mit hold, beschneiden mit trim). Standbilder verwenden ein Einzelbild (at, Standard: Mitte).
• Laptop-Displays zeigen ein Telefon-Screenshot mit Letterbox über einer unscharfen Kopie, es sei denn, der Slide hat einen desktop-Screen. desktop akzeptiert auch eine Aufnahme. Im desk-Video …

(Fortsetzung folgt… aufgrund der Zeichenbegrenzung wird der verbleibende Teil des Markdown bei Bedarf in einer separaten Nachricht geliefert)