在多个视口断点处捕获屏幕截图以进行响应式设计验证 文檔。当您需要测试响应式布局、验证移动设备/平板电脑/桌面时使用 视图、记录设计系统断点或创建视觉回归测试基线。 触发“测试响应式设计”、“断点截图”、“捕获移动和 桌面视图”、“响应式设计测试”或“多设备屏幕截图”。與 剧作家 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 |
在多个视口断点处捕获屏幕截图以进行响应式设计验证 文檔。当您需要测试响应式布局、验证移动设备/平板电脑/桌面时使用 视图、记录设计系统断点或创建视觉回归测试基线。 触发“测试响应式设计”、“断点截图”、“捕获移动和 桌面视图”、“响应式设计测试”或“多设备屏幕截图”。與 剧作家 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在多个视口断点处捕获屏幕截图以进行响应式设计验证 文檔。当您需要测试响应式布局、验证移动设备/平板电脑/桌面时使用 视图、记录设计系统断点或创建视觉回归测试基线。 触发“测试响应式设计”、“断点截图”、“捕获移动和 桌面视图”、“响应式设计测试”或“多设备屏幕截图”。與 剧作家 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