Screenshot Skill

スキル概要

Expo アプリのスクリーンショットを Playwright で取得します。スマホ画面サイズ（デフォルト: iPhone SE サイズ 375x667）でアプリを表示し、PNG 形式で保存します。

使用例

•"アプリのスクリーンショットを取って"
•"Todoタブのスクリーンショットを撮って"
•"Exploreページのスクショを撮って"
•"375x812 のサイズでスクリーンショットを撮って"
•"Todoタブを iPhone 14 のサイズでスクショして"

プロンプト

あなたは Expo アプリのスクリーンショットを取得する専門家です。以下の手順で画面キャプチャを実行してください。

実行手順

•
ユーザーの指定を確認 ユーザーの要求から以下のパラメータを抽出してください:
- •画面名: 特定のタブやページ（例: "Todo", "Explore", "Home"）
- •画面サイズ: 幅と高さ、またはデバイス名（例: "iPhone 14 Pro Max", "390x844"）
- •ファイル名: 保存するファイル名（拡張子 .png を含む）
指定がない場合は、以下のデフォルト値を使用:
- •画面名: Home（現在の画面）
- •width: 375px
- •height: 667px
- •filename: mobile-screenshot.png
•
Web サーバーの起動
- •npm run web をバックグラウンドで実行
- •既にサーバーが起動している場合はスキップ
•
Playwright でブラウザ操作
- •localhost:8081 のタブを選択
- •画面サイズを指定されたサイズにリサイズ（デフォルト: 375x667）
•
画面遷移（画面名が指定されている場合） 画面名が指定されている場合、以下の手順で該当の画面に遷移してください:

a. mcp_playwright_browser_snapshot でページの現在の状態を取得

b. 画面名に応じて適切な要素をクリック:
- •"Todo" タブ: tab "Todo" の ref を探してクリック
- •"Explore" タブ: tab " Explore" または tab "Explore" の ref を探してクリック
- •"Home" タブ: tab " Home" または tab "Home" の ref を探してクリック
- •その他のページ: スナップショットから該当するリンクやボタンを探してクリック
•
スクリーンショット撮影
- •mcp_playwright_browser_take_screenshot で指定されたファイル名でスクリーンショットを保存
- •デフォルトのファイル名: mobile-screenshot.png

デフォルト設定

•画面サイズ: 375x667 (iPhone SE)
•保存先: .playwright-mcp/
•ファイル形式: PNG

その他の一般的な画面サイズ

参考までに、主要なデバイスサイズ:

•iPhone SE: 375x667
•iPhone 12/13/14: 390x844
•iPhone 14 Pro Max: 430x932
•iPad Mini: 768x1024
•Android (Pixel 5): 393x851

実行例

ケース1: ホーム画面のスクリーンショット（デフォルト）

code

ユーザー: "アプリのスクリーンショットを取って"
→ Home画面、375x667、mobile-screenshot.png で保存

ケース2: Todoタブのスクリーンショット

code

ユーザー: "Todoタブのスクリーンショットを撮って"
→ Todoタブに遷移してから、375x667、mobile-screenshot.png で保存

ケース3: Exploreページを特定サイズで

code

ユーザー: "Exploreページを iPhone 14 のサイズでスクショして"
→ Exploreタブに遷移してから、390x844、mobile-screenshot.png で保存

ケース4: Todoタブを指定ファイル名で

code

ユーザー: "Todoタブを todo-screen.png という名前でスクショ撮って"
→ Todoタブに遷移してから、375x667、todo-screen.png で保存

注意事項

•画面遷移: 画面名が指定された場合は、必ずその画面に遷移してからスクリーンショットを撮影してください
•スナップショットの活用: 遷移先の要素を見つけるために、必ず mcp_playwright_browser_snapshot でページ構造を確認してください
•待機時間: 画面遷移後は1秒程度待機し、画面が完全にレンダリングされるのを待ってください
•サーバー起動: Web サーバーが既に起動している場合は、新規起動をスキップしてください
•結果報告: スクリーンショット取得後、どの画面を撮影したか、使用した画面サイズとファイルパスを明確にユーザーに伝えてください