app-preview-craft — ストアスクリーンショット、ソーシャルカード、3Dデバイス動画は何をしますか？

このスキルが生成するすべてのものは、テーマによって配置された1つのページ（stage/stage.html）であり、それをヘッドレスChromeでキャプチャします。静止画はスクリーンショットとして撮影され、sharpで仕上げられます。動画はフレーム単位でレンダリングされ、ffmpegにパイプされます。同じページがプレビュースタジオとしても機能するため、ユーザーがそこで見たものがそのままCLIでエクスポートされます。

0. スキルを見つけて、一度だけセットアップする

以下のパスは、この SKILL.md が置かれているディレクトリからの相対パスです。 一度解決して、そのディレクトリをコマンドの先頭に付けてください。$SKILL はそのディレクトリを表します。

SKILL=/絶対/パス/to/app-preview-craft        # SKILL.md、scripts/、stage/ があるフォルダ
# どこにインストールされたかわからない場合（スキルフォルダ、そして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

次に、マシンをチェックします。--fix は、パッケージがない場合にスキル内で npm install を実行します。

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

Doctorは Ready. で終了する必要があります。ffmpegがない場合は警告のみです（静止画は引き続き機能します）。WebGLがないと報告された場合、3Dテーマはレンダリングできません。その場合は、静かにフラットテーマに切り替えるのではなく、その旨を伝えてください。

出力は、ユーザーが作業しているディレクトリ（シェルのカレントディレクトリ）に出力されます。 ただし、ユーザーが --out で別のフォルダを指定した場合はその限りではありません。レンダリング結果を $SKILL 内に書き込まないでください。一時的な状態は $TMPDIR/app-preview-craft/ に保存され、各実行後に削除されます。

1. ワークフロー

カテゴリを選びます（CLIの最初の引数）。ユーザーが要求した内容に基づいて選択します。

カテゴリ	生成物	デフォルトサイズ
`app-store`	セット: スライドごと、サイズごとに1枚のスクリーンショット、および `overview.png`	`iphone-6.9` 1320×2868
`social-card`	1枚のカード（または `--all` で全スライド）og/X/LinkedIn/Instagram/story 用	`og` 1200×630
`screen-video`	スクリーンショットのみを使用した2Dモーション動画。画面録画も受け付けます	`reel` 1080×1920
`device-video`	three.jsを使用したデバイスショーケース動画	`reel` 1080×1920
`device-mockup`	3Dヒーロー静止画。オプションで透明背景も可能	`mockup-landscape` 2400×1600

コンテンツを収集します。 ユーザーのプロジェクトから、スライドごとに1枚ずつ、順序通りにスクリーンショット（PNG/JPG/WebP）や録画（MP4/MOV/WebM）を取得します。ユーザーがコピーを提供しない限り、自分でコピーを作成します（§4参照）。スクリーンショットがない場合は、バンドルされているサンプルアプリ「Tempo」が使用されます。これはテーマの紹介には適していますが、成果物には絶対に使用しないでください。
テーマを選びます。 ユーザーが指定したテーマ名が優先されます。App Storeセットの場合は、アプリのストアカテゴリを§3のテーブルと照合し、どのテーマを選んだか、その理由を伝えてください。ユーザーが決めかねている場合は、まずオプションを表示します。
```
node "$SKILL/scripts/cli.mjs" gallery app-store        # → ./gallery-app-store.png
```
シートを読み返して（ユーザーに表示されるように）、選択してもらいます。スタジオ（§8）は、ユーザーが視覚的にブラウズして微調整したい場合に最適な方法です。

レンダリングします。

node "$SKILL/scripts/cli.mjs" app-store shots/01.png shots/02.png shots/03.png \
  --theme ledger \
  --title "Every euro, *accounted for*" --title "Budgets that *adapt*" --title "Private *by design*" \
  --subtitle "One-line benefit…" --subtitle "…" --subtitle "…" \
  --size iphone-6.9,ipad-13 --set palette.accent=auto

報告する前に確認します。 overview.png（セットの場合）、静止画、または動画からフレームを抽出します（--frames 1,4,mid,end は動画の代わりにPNGフレームをレンダリングします。モーションを確認するのに低コストです）。見出しのクリッピング、デバイス上のテキスト、デコレーションを覆っているデバイス、空のスクリーンがないか確認します。--set/スライドごとのオーバーライドで修正し、再レンダリングします。
報告します。 出力パス、テーマ、サイズ、そして3Dデバイスが表示される場合は常に、CREDITS.txt が書き込まれ、CC-BYクレジットが画像とともに移動する必要があること（§7）を報告します。

2. サイズ

node "$SKILL/scripts/cli.mjs" list sizes --category app-store でテーブルを表示します。WxH 形式も使用できます。複数同時に指定する場合: --size iphone-6.9,iphone-6.5,ipad-13

App Store Connect では、iPhoneアプリには6.9インチセット（iphone-6.9）、iPadアプリには ipad-13 が必要です。他のサイズはオプションです。PNG出力はフラットになります（Appleはアルファチャンネルを拒否します）。
タブレットサイズ は、テーマがフレームレスでない限り、自動的にスマートフォンをフラットなタブレットフレームに置き換えます。アプリにiPadのスクリーンショットがある場合は、それらのスライドに使用してください。
アプリプレビュー動画: --size app-preview (886×1920) または app-preview-ipad、15～30秒、30 fps。無音のステレオAACトラックが自動的に追加されます（Connectは音声を期待します）。
Google Play: play-phone、play-tablet、play-feature (1024×500、ソーシャルカード)。

3. テーマ

list themes --category <c> でこれらをレイアウトとともに表示します。各カテゴリに5つ以上のテーマがあります。

app-store — それぞれ人気のアプリカテゴリをモデルにしています

テーマ	アプリカテゴリ	インスピレーション元	外観
`stride`	ヘルスケア＆フィットネス	Strava, Nike Run Club	鮮やかなオレンジ、凝縮されたオールキャップスのピル、スピードストライプ、傾いたスマートフォン
`ledger`	ファイナンス	Revolut, Monzo, Robinhood	ミッドナイトメッシュ、ミント→シアングラデーションの文字、クロームオーブ
`serene`	ヘルス＆マインドフルネス	Calm, Headspace	パステルオーロラ、イタリックのセリフアクセント、柔らかなブロブ上のフレームレス画面
`canvas`	プロダクティビティ	Notion, Things, Linear	温かみのある紙、ノートのグリッド、大きなセリフ、フラットなインクのスマートフォン
`sizzle`	フード＆ドリンク	DoorDash, Uber Eats, Deliveroo	日当たりの良い黄色、水玉模様、赤いマーカーハイライト、傾いたスマートフォン
`wander`	トラベル	Airbnb, Hopper, Booking	夕暮れのグラデーションと、セット全体を駆け巡るレトロな太陽（パノラマ）
`mixtape`	ミュージック＆オーディオ	Spotify, Apple Music	スクリーンがぼやけて輝く背景になり、巨大な輪郭の文字
`arcade`	ゲーム	Apple Arcade, モバイルゲームローンチアート	シンセウェーブグリッド、ネオンリム、光沢のある3Dトイズ
`snapshot`	フォト＆ソーシャル	Instagram, BeReal, VSCO	3枚のフレームレスショットがプリントのように扇状に広がり、温かみのあるフィルムメッシュ
`pulse`	ヘルスデータ＆ウェアラブル	Oura, WHOOP, Apple Health	臨床的な黒、深紅の輝き、フロント向きのPro Maxの下に見出し

テーマは雰囲気を借りていますが、ブランドは借用していません。それらのアプリのロゴ、名前、アートワークは表示されません。

social-card

launch (オーロラ＋傾いたスマートフォン), spotlight (ビーム＋鏡の床), pastel-fan (3枚の扇状に広がった画面), bento (スクリーンクロップのグリッド), neon-grid (シンセウェーブ), editorial (紙、セリフ、デュオトーン画面), duo (MacBook＋スマートフォン — ラップトップ用に desktop 画面を渡してください)。

screen-video (2D)

carousel, stack (カードがはじけ飛ぶ), scroll (長いキャプチャがスマートフォン内をスクロールする), zoom-tour (各スライドの focus にフルブリードのケンバーンズ効果), wall (傾いた壁のスクリーン), store-preview (App Storeプレビュースタイル — --size app-preview を使用), grid-reveal。

device-video (3D)

turntable, orbit (カメラが弧を描く), float (ループ可能), rise (カメラが押し込まれる), flip (背面→前面の表示), trio (3つのモデルが扇状に広がる), desk (MacBookの蓋が開き、スマートフォンがその横にスライドイン。両方とも scene.floor の上に立つ), spotlight (ミラーの上で360°回転), synthwave, keyframes (あなた自身のデバイスとカメラの動きを motion.keys から指定 — §5参照)。

device-mockup (3D静止画)

studio, noir, pedestal, levitate, lineup (すべてのスマートフォンモデル), flatlay, desk-duo。--transparent を追加すると、切り抜きPNGになります。

4. コピー

スライドごとの見出し: 6語以内、機能ではなくメリットを伝えるもの。テーマのスタイルで強調するために、1～2語を *アスタリスク* で囲みます。" | " は改行を強制します。
サブタイトル: 1つの短い文。キッカー（オプション）: その上の1語のラベル。
最初の2つのスライドで訴求力を伝えます。ほとんどの買い物客はそれ以上スクロールしません。
評価、ダウンロード数、受賞歴、プレスからの引用をでっち上げないでください。rating や laurels などのデコレーションは、ユーザーから提供された実際の数値に使用してください。不明な場合は質問してください。
競合他社の名前を記載したり、ストアガイドラインで許可されている範囲を超えてApple/Googleの商標を使用したりしないでください。

5. あらゆる設定

解決順序（後で指定したものが優先）: 組み込みベース → レイアウトデフォルト → テーマ（およびその extends チェーン） → カスタムテーマファイル → プロジェクト設定 themeOverrides → CLIショートカット → --set → スライドごとの theme。

ショートカット: --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 path=value は 任意の テーマキーに到達します（繰り返し可能）。list options は、型と範囲が文書化されたパスを出力します。値は型変換されます。JSONはリスト/オブジェクトに使用できます: --set device.pose=5,-15,4 --set 'decor=[{"kind":"sparkles","count":8}]'。
device.pose は x,y,z 度です。テーマは、ストアのサムネイルサイズでも画面が読めるように、ヨーが約±20°、ロールが±6°以内に収まります。より急なポーズも可能ですが、読みやすさが犠牲になります。
色は auto を受け付けます。最初のスクリーンショット内で最も鮮やかな色になります: --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、またはユーザー自身のモデルのID（§7）。
レイアウトは種類内で交換可能です（list layouts）: 静止画 — hero-top, hero-bottom, tilt, duo, fan, split, big-type, callout, bento, laptop-phone, showcase, pedestal, lineup, flatlay; 動画 — carousel, stack, scroll, zoom-tour, wall, phone-swap, grid-reveal, turntable, orbit, float, rise, flip, trio, desk, spotlight, keyframes。
独自のモーション: keyframes レイアウトは、1つの3Dデバイスとカメラを motion.keys に従って移動します。motion.keys は { "at": 0..1, "x", "y", "size", "pose": [rx, ry, rz], "cam": { "yaw", "pitch", "dist" }, "ease" } のリストです。at は動画全体に対する割合です。キーが省略した値は、前のキーから引き継がれます。最初のキーはテーマ自身のポーズから始まります。イージング: 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}}]'。アニメーションライブラリは使用されていません。すべてのフレームは時間の純粋な関数であり、これによりフレームを順不同でレンダリングできます。--frames 0,2,mid,end で動きを確認してください。

カスタムテーマ は、テーマキーの任意のサブセットと extends を含むJSON（または .mjs）ファイルです。

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

--theme path/to/acme.json を渡すか、./.app-preview-craft/themes/（または ~/.app-preview-craft/themes/）に配置して --theme acme を使用します。list themes はカスタムテーマも表示します。

プロジェクト設定。 node "$SKILL/scripts/cli.mjs" init app-store は app-preview-craft.json を書き込みます。その後、node "$SKILL/scripts/cli.mjs"（引数なし）でそれをレンダリングし、フラグはそれをオーバーライドします。$SKILL/examples/app-preview-craft.json は完全な動作例です: スライドごとのコピー、デコレーションとテーマのオーバーライド、カスタムテーマファイル、デスクトップ画面、および1つのコマンドでApp Storeセット、ソーシャルカード、モックアップ、動画をレンダリングする jobs リストが含まれています。設定ファイル内のパスは、設定ファイルからの相対パスで解決されます。

スライドごとのキー: screen, desktop (ラップトップディスプレイ), title, subtitle, kicker, theme (そのスライドのみのオーバーライド), decor (そのスライドのテーマのデコレーションを置き換える), focus: [x, y, zoom] (ズームツアーのターゲット), hold (動画内の秒数), trim: [start, end] および at (録画の何秒目のフレームを静止画に使用するか), bigWord (big-typeレイアウト)。

デコレーション アイテムは {kind, x, y, scale, rotate, style, layer, delay, …} で、x/yはページの割合、style は glass | solid | light | dark | outline のいずれかです。

kind	追加キー
`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` (画像パス) または `glyph`, `width`
`stat`	`label`, `value`, `trend`, `trendColor`
`callout`	`rect: [x, y, w, h]` (拡大するスクリーンショットの領域), `w`, `border`, `radius`
`arrow`	`w`, `h`, `text` (手書きメモ), `flip`, `stroke`
`logo`	`name`, `src` (アプリアイコンのパス)
`store-badge`	`top`, `text`、または `src` (公式バッジアートワーク)
`sparkles` `confetti`	`count`, `colors[]`, `area: [x0, y0, x1, y1]`, `seed`
`blob`	`size`, `color`, `opacity` (デバイスの背後に配置)
`orbs` `rings` `shapes`	3Dプリミティブ: `count`, `shapes[]`, `finish` (glossy chrome matte glass iridescent), `area`, `items[]`
`credit`	`text` (デフォルトはモデルのクレジット行)

6. 画面と処理

sharpは、Chromeが起動する前にすべてのスクリーンショットを準備します: screen.cleanStatusBar (9:41 / フルバッテリーのiOSステータスバーを再描画 — スマートフォン形状のキャプチャのみ), tint + tintAmount, duotone: "#dark,#light", saturate, brightness, sharpen、および blur-shot 背景用の事前ブラー背景。
iPhoneモデルでは、Dynamic Island が、モデルのパンチホールとカメラの切り抜き部分の上に1つの統合された黒いピルとして描画され、iOSの表示と一致します。Dynamic Islandの領域を空にして（通常のiOSキャプチャで問題ありません）スクリーンショットを提供してください。cleanStatusBar は、その両側の時刻とアイコンを保持します。
ディスプレイよりも高いキャプチャは、動画ではスクロールされ（scroll テーマ）、静止画では上部が表示されます（screen.fit=top）。
録画は、出力フレームレートでffmpegによってフレームに分割されます。動画では、各録画のスライドはクリップの長さだけ続きます（hold でオーバーライド、trim でカット）。静止画は1つのフレームを使用します（at、デフォルトは中央）。
ラップトップディスプレイは、スライドに desktop 画面がない場合、スマートフォンのスクリーンショットをぼかしたコピーの上にレターボックス表示します。desktop は録画も受け付けます。desk 動画では、ラップトップの画面がいっぱいになるように desktop 画面が引き伸ばされます。

7. 3Dデバイスモデル

list devices は、内蔵モデル（Apple + いくつかのAndroid）、素材（finish）、および ---付与--- を表示します。各モデルは、原作者にクレジットを表示することを条件に、CC-BY 4.0ライセンスの下で使用が許可されています。 CLIは <出力フォルダ>/CREDITS.txt を書き込みます。クレジットは画像とともに移動する必要があります。つまり、画像の近くのメタデータ内、キャプション内、または画像自体に、以下の形式で表示する必要があります。

スマートフォンモデル「{name}」by {author} — CC BY 4.0, {source}

credit デコレーションは、これを自動的に画像に焼き付けます。スキルはクレジットを管理します。あなたがする必要があるのは、クレジットが常に含まれていることを確認することだけです。モデルを再配布したり、スキルをフォークしてモデルを変更したりする場合は、同じライセンス/クレジット条件が適用されます。

独自のモデル: GLTF/GLB + 事前計算されたレンダリングマップ（environment）。スキル内のモデルスロットに直接配置するか、パスを渡します。これはデバイスモーションデータを必要とする上級者向けの機能です。最初は内蔵モデルを使用してください。

8. プレビュースタジオ

CLIに preview カテゴリを指定すると、コマンドライン引数なしでスタジオが起動します。

node "$SKILL/scripts/cli.mjs" preview

これにより、ファイルシステムのファイルを stage/preview.mjs ルーターでローカルHTTPサーバーが起動し、ブラウザが開きます。ユーザーはテーマをブラウズし、スライドをドラッグ＆ドロップし、コピーを編集し、設定を調整し、すぐにレンダリングできます。スタジオは同じ stage/stage.html + テーマエンジンを使用するため、「見たままが出力」です。

ユーザーが「プレビューしてくれ」または「スタジオを開いて」と言った場合は、このコマンドを実行してください。ユーザーがブラウズしたいがスタジオを必要としない場合は、代わりに gallery（§1のステップ3）を使用してください。

9. 出力ファイル

app-store は Overview.png + iPhone 6.9" Screenshot 1.png…Screenshot 3.png + iPad 13" Screenshot 1.png… を生成します。--flat は各スライドのフラットな {index}.png を生成します。
social-card は social-card-og.png（--all の場合は名前付きバリアント）を生成します。ポスター用の social-card-story.png。
device-mockup デフォルトの mockup.png、--transparent ファイル、--all フレームごとの画像のシーケンス。
動画は device-video.mp4 または screen-video.mp4。--frames を指定すると、代わりに {name}-{n}.png フレームが生成されます。
--format webp (app-store と social-card を除くすべて)、--format jpg。
--out <dir> は出力ディレクトリを設定します（デフォルトは cwd）。
--verbose は進捗状況と生成されたCLIコマンドを表示します。--debug はレンダリングされた stage.html と、Node.jsがテーマをどのように解決したかを {output}.json に保存します。

10. トラブルシューティング

問題	原因／解決策
テーマがレンダリングされない	doctorを実行してください。`--fix` を忘れずに。`stage/` にパーミッションの問題がないか確認してください。
動画が黒い/空っぽ	ffmpegがインストールされていますか？doctorの出力を確認してください。フレームレートまたはコーデックの互換性の問題が考えられます。
テキストが途切れている	見出しまたはサブタイトルが長すぎます。短くするか改行を入れてください。`--set layout.padding` を試してください。
デバイスがデコレーションを覆っている	`device.pose` または `device.scale` を調整します。異なるレイアウトを試してください。
エクスポートに失敗する	`$TMPDIR/app-preview-craft/` に書き込み権限があることを確認してください。ディスク容量を確認してください。

11. ライセンス

このスキル自体（ドキュメントとコード）はMITライセンスです。出力ファイル（画像、動画）のライセンスはユーザーが決定します。ただし、出力に3Dデバイスモデル（§7）が含まれる場合は、CC-BY 4.0のクレジット表示が必要です。

app-preview-craft — ストアスクリーンショット、ソーシャルカード、3Dデバイス動画