レスポンシブデザインの検証のために複数のビューポートのブレークポイントでスクリーンショットをキャプチャし、 ドキュメント。レスポンシブ レイアウトのテスト、モバイル/タブレット/デスクトップの検証が必要な場合に使用します。 ビュー、ドキュメント デザイン システム ブレークポイント、または視覚的な回帰テスト ベースラインの作成。 「レスポンシブデザインのテスト」、「ブレークポイントでのスクリーンショット」、「モバイルのキャプチャ」、「 デスクトップ ビュー」、「レスポンシブ デザイン テスト」、または「マルチデバイス スクリーンショット」。で動作します Playwright MCP ツール (browser_navigate、browser_resize、browser_take_screenshot)。
コマンドラインで playwright-responsive-screenshots AI スキルを開発環境にすばやくインストール
ソース: dawiddutoit/custom-claude。
4.1. Basic Screenshot Capture 4.2. Custom Breakpoints 4.3. Multiple Pages 4.4. With Comparison Report
This skill provides an automated workflow for capturing screenshots at multiple viewport sizes:
| Device Category | Width × Height | Common Devices |
レスポンシブデザインの検証のために複数のビューポートのブレークポイントでスクリーンショットをキャプチャし、 ドキュメント。レスポンシブ レイアウトのテスト、モバイル/タブレット/デスクトップの検証が必要な場合に使用します。 ビュー、ドキュメント デザイン システム ブレークポイント、または視覚的な回帰テスト ベースラインの作成。 「レスポンシブデザインのテスト」、「ブレークポイントでのスクリーンショット」、「モバイルのキャプチャ」、「 デスクトップ ビュー」、「レスポンシブ デザイン テスト」、または「マルチデバイス スクリーンショット」。で動作します Playwright MCP ツール (browser_navigate、browser_resize、browser_take_screenshot)。 ソース: dawiddutoit/custom-claude。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/dawiddutoit/custom-claude --skill playwright-responsive-screenshotsレスポンシブデザインの検証のために複数のビューポートのブレークポイントでスクリーンショットをキャプチャし、 ドキュメント。レスポンシブ レイアウトのテスト、モバイル/タブレット/デスクトップの検証が必要な場合に使用します。 ビュー、ドキュメント デザイン システム ブレークポイント、または視覚的な回帰テスト ベースラインの作成。 「レスポンシブデザインのテスト」、「ブレークポイントでのスクリーンショット」、「モバイルのキャプチャ」、「 デスクトップ ビュー」、「レスポンシブ デザイン テスト」、または「マルチデバイス スクリーンショット」。で動作します Playwright MCP ツール (browser_navigate、browser_resize、browser_take_screenshot)。 ソース: dawiddutoit/custom-claude。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/dawiddutoit/custom-claude --skill playwright-responsive-screenshots インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/dawiddutoit/custom-claude