mcpField
S
screenshot

screenshot

github.com/zernieテスト・品質15337 回インストール1 日前に更新
リポジトリ

screenshot について

screenshot は、ローカルで配信したページを撮影するコントリビューター向けスキルです。プリインストール済みの Chromium と playwright-core を使い、撮影前にページをスクロールして遅延表示の要素を表示させます。

主な機能

  1. 01プリインストール済み Chromium でローカルページを撮影
  2. 02デスクトップ・モバイル表示のスクリーンショット
  3. 03スクロールによる遅延表示のトリガー
  4. 04ビューポートサイズのカスタマイズ
  5. 05送信前の画像表示確認

活用シーン

  1. 01コミット前のランディングページ変更の確認
  2. 02監査レポートのページ表示のプレビュー
  3. 03ローカルサイトのデスクトップ・モバイル撮影

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/zernie/vigiles --skill screenshot

インストール後、Claude Code で/screenshotを入力して読み込まれたか確認します。

同梱ファイルscripts/shot.mjs

詳細

screenshot — ローカルページをレンダリングしてキャプチャする

コントリビューター向けの開発スキルです。playwright-core を使って、コンテナにプリインストール済みの Chromium（playwright install やブラウザーのダウンロードは不要）を操作し、ローカルで配信されているページをフルページスクリーンショットとして撮影します。手作業で行う際に得られた貴重な知見をもとに作られています（以下を参照）。

使用する場面

  • 「ランディングページ／サイトのスクリーンショットを撮って」「レポートの表示を確認して」「site/ をレンダリングして見せて」などの場合。
  • コミット前に、site/（ランディングページ）または report/（監査レポート）の UI 変更を検証する場合。

手順

  1. 対象をビルドする（Vite アプリの場合は dist/ が必要です）：
    • ランディングページ：cd site && npm install && npm run build → site/dist/
    • レポート：ルートで npm run build を実行するとビルドされます → dist/audit-report.template.html
  2. ポートで配信する（相対パスのアセット参照には、そのディレクトリをウェブルートにする必要があります）： 
    cd site/dist && python3 -m http.server 8899 >/tmp/httpd.log 2>&1 &
sleep 1 && curl -s -o /dev/null -w "%{http_code}\n" http://localhost:8899/   # expect 200
  3. ドライバーを用意する（ブラウザーのダウンロードは不要。PLAYWRIGHT_BROWSERS_PATH を使用します）： 
    node -e "require.resolve('playwright-core')" 2>/dev/null || npm install --no-save playwright-core
  4. 撮影する 同梱スクリプトを使うと、<outDir>/<name>-desktop.png と -mobile.png が書き出されます： 
    node .claude/skills/screenshot/scripts/shot.mjs http://localhost:8899/ "$SCRATCHPAD" landing
    SHOT_WIDTHS="1440x900,768x1024,390x844" でビューポートを変更できます。
  5. 送信前に確認する：デスクトップ版 PNG を Read して正常にレンダリングされたことを確認し、続けて SendUserFile （display: render）を使ってユーザーに表示します。リポジトリではなく、スクラッチパッドのディレクトリに送信してください。

このスキルに組み込まれた落とし穴（同じ失敗を繰り返さないために）

  • スクロールで表示する要素は空白のカードになることがあります。 スクロール時にフェードインするセクション（opacity-0 + IntersectionObserver）は、単純な fullPage スクリーンショットでは表示されない状態で撮影されます。ヒーロー部分はレンダリングされますが、その下はすべて空白になります。このスクリプトは上から下へスクロールして表示をトリガーし、撮影前に上部へ戻ります。カードが空白なら、これが原因です。
  • Chromium は /opt/pw-browsers/chromium-*/chrome-linux/chrome にプリインストールされています。executablePath と --no-sandbox を渡してください。playwright install は絶対に実行しないでください（ブロックされており、時間を無駄にします）。
  • ESM から CJS をインポートする場合：playwright-core のエントリーポイントは CJS であり、スクラッチパッドから実行するスクリプトでは、単純なインポートでリポジトリの node_modules を解決できません。createRequire(cwd + '/package.json') を使用してください（このスクリプトではそのようにしています）。
  • モバイル版のアップロードは SendUserFile で 400 エラーになることがあります。一度だけ再試行するか、デスクトップ版のみを送信してください。

配布対象外

これは .claude/ にあるコントリビューター向けスキル（このリポジトリ独自のハーネス）であり、公開された利用者向けスキルではありません。

コメント

Markdown 対応