Add Puppeteer support for taking browser screenshots

Summary

Enable Claude Code to use Puppeteer for taking screenshots of browser pages. This would significantly assist with front-end development tasks, especially when matching provided designs or verifying visual changes.

Use Cases

1. Design Matching: When users provide mockups or designs, Claude Code could take screenshots of the current implementation to compare against the target design
2. Visual Regression Testing: Capture screenshots before and after changes to verify visual consistency
3. Cross-browser Testing: Take screenshots across different browsers/viewports to ensure responsive design works correctly
4. Documentation: Generate visual documentation of UI components and pages
5. Debugging: Capture visual state when troubleshooting layout or styling issues

Proposed Implementation

• Add Puppeteer as an available tool for Claude Code
• Support common screenshot operations:
• Full page screenshots
• Element-specific screenshots
• Screenshots at different viewport sizes
• Screenshots with different device emulations
• Integration with existing workflow tools

Benefits

• More effective front-end development assistance
• Better design-to-code translation
• Improved debugging capabilities for visual issues
• Enhanced quality assurance for UI changes

Technical Considerations

• Browser management (headless Chrome/Chromium)
• Resource usage and cleanup
• Security considerations for web page access
• Integration with existing Claude Code architecture

This feature would make Claude Code significantly more effective at front-end development tasks by providing visual feedback capabilities.