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