ParthJadhav/app-store-screenshots

App Store & Google Play スクリーンショットジェネレーター

これは何か – AIコーディングエージェント向けの スキル で、Apple App Store、Mac App Store、Google Playで必要なマーケティングスクリーンショットを作成するためのフル機能の Next.js エディターを構築します。このツールは、生のデバイスキャプチャを広告スタイルのスライドデッキに変換し、接続されたキャンバス上で要素を配置し、ストアで必要なすべてのサイズでPNGバンドルをエクスポートします。

主な機能

• ドラッグ＆ドロップ対応の接続キャンバス、レガシーデッキ用の分離モード、スクリーンの並べ替え用サイドバー。
• インスペクターパネルで、コピー、見出し、レイアウト、要素の変形を編集。既製の見出しフォーミュラを備えた Copy ideas メニューを含む。
• テーマピッカーと Style Lab。18の定義済みビジュアルスタイル（パレット、タイポグラフィ、レイアウト）を提供し、ロック、シャッフル、リミックスが可能。
• シーンプレイグラウンド。グローバル背景、デバイスシャドウ、3Dチルト、拡大鏡ルーペを提供。
• マルチプラットフォーム対応：iPhone、iPad、iPhone Duo、Apple TV、Apple Watch、CarPlay、Mac、Androidスマートフォン/タブレット、Play Storeフィーチャーグラフィック。
• ロケールとRTL対応。エクスポートバンドルはプラットフォーム、デバイス、解像度、言語ごとに整理。
• すべてのプロジェクト状態は app-store-screenshots.json に保存され、アップロードされたソース画像は public/screenshots/uploaded/ に置かれるため、デッキは完全にgit追跡可能。

使用方法

1. npx skills add ParthJadhav/app-store-screenshots でスキルをインストール（または手動でクローン）。
2. コーディングエージェント（Claude Code、Cursorなど）に、アプリの App Storeスクリーンショットをビルド するよう依頼し、簡単な説明、希望するスライド数、ビジュアルスタイル、プラットフォーム、ロケールを提供します。
3. スキルは、上記のエディターUIを備えたNext.jsプロジェクトを構築します。
4. 開発サーバーを実行し、生のデバイススクリーンショットを読み込み、コピー/レイアウトを調整し、スタイルを選択し、ストア対応PNGを含むzipをエクスポートします。

重要性 – 準拠したスクリーンショットアセットの作成は、モバイル開発者にとって退屈で詳細な作業です。このプロジェクトはUI中心の部分を自動化し、AIエージェントがプロンプトとスキャフォールディングを処理し、開発者は専用エディターでビジュアルデッキを微調整できます。

技術スタック – Next.js、React、TypeScript、Tailwind CSS、shadcn/ui、Radix、html-to-image、JSZip、dnd-kit、react-rnd。

ライセンス – MIT。