Name: app-preview-craft
Author: Community

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

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

0. スキルの場所を特定し、一度だけセットアップする

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

SKILL=/絶対パス/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テーマはレンダリングできません — 静かにフラットテーマに切り替えるのではなく、その旨を伝えてください。

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

1. ワークフロー

カテゴリを選ぶ（最初のCLI引数）。ユーザーの要望に基づいて選択します。

カテゴリ	生成するもの	デフォルトサイズ
`app-store`	セット：スライドごとに各サイズ1枚のスクリーンショットと `overview.png`	`iphone-6.9` 1320×2868
`social-card`	og/X/LinkedIn/Instagram/ストーリー用のカード1枚（または `--all` スライド）	`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 "あらゆるユーロを、*明確に*" --title "適応する予算*" --title "設計による*プライバシー*" \
  --subtitle "一行で伝えるメリット…" --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。カットアウトPNGには --transparent を追加します。

4. コピー

スライドごとの見出し：6単語以内、機能ではなくメリット。1～2単語を *アスタリスク* で囲むと、テーマのスタイルで強調表示されます。| は強制的に改行します。
サブタイトル：短い一文。キッカー（オプション）：上部にある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 レイアウトは、motion.keys（{ "at": 0..1, "x", "y", "size", "pose": [rx, ry, rz], "cam": { "yaw", "pitch", "dist" }, "ease" } のリスト）を通じて1つの3Dデバイスとカメラを移動させます。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]（zoom-tourターゲット）、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 動画では、ラップトップ画面が主画面として表示され、電話はその隣に表示されます。

7. 出力

すべての出力は、ユーザーの作業ディレクトリ（シェルのcwd）に書き込まれます。

ファイル名：{カテゴリ}-{スライド番号または名前}-{サイズ}.{png|mp4}。overview.png は app-store セットに含まれます。
動画のコーデック：H.264（.mp4）、30 fps。
3Dデバイスモデル（デフォルトのiPhone、Galaxy、MacBook）は、それぞれ CREDITS.txt というライセンスファイルとともに配布されます。3Dデバイスが含まれる画像や動画が配布される場合は、クレジット（CC-BY ... という形式）を画像の近くまたは説明に含める必要があります。ユーザーにこの義務を明確に伝えてください。
ユーザーは、独自の .glb デバイスモデルを ~/.app-preview-craft/models/ に配置し、--device モデルID で使用できます。モデルIDはファイル名（.glb を除く）です。list models で利用可能なモデルを表示します。

8. スタジオ

node "$SKILL/scripts/cli.mjs" studio で開発サーバーを起動します。ブラウザでローカルURLを開くと、現在のテーマと設定でライブプレビューが表示されます。すべての設定（コピー、テーマ、デコレーション、デバイス）はブラウザ内で編集可能で、変更は即座に反映されます。ユーザーが「試してみたい」「調整したい」と言った場合は、スタジオを起動するのが最適な答えです。スタジオは編集可能なプレビューであり、ユーザーが満足したら、CLIでエクスポートできます。

9. 制限事項

このスキルは、アプリのストア掲載やマーケティングのためのビジュアルアセットを生成することに特化しています。図表、スライド、動作中のアプリのスクリーンショットのキャプチャには使用しないでください。
アニメーションや複雑なインタラクションを伴う動画の生成には対応していません。
3DレンダリングにはWebGLが必要です。doctorがWebGLなしと報告した場合、3Dテーマは使用できません。

10. エラーハンドリング

スクリーンショットが見つからない場合、エラーメッセージを表示して処理を中断します。
テーマが見つからない場合、類似のテーマ名を提案します。
無効な設定値は、デフォルト値にフォールバックするか、またはエラーメッセージを表示します。
ffmpegが見つからない場合、動画の生成はスキップされ、警告が表示されます。

app-preview-craft