Uploaded August 2025 | Updated September 2026, 3 weeks ago
🚀 Access ALL video resources & get personalized help in my community:
skool.com/agentic-labs/about?ref=3fd61190e13d426dbf4f3b38adc7de69
💬 My AI voice-to-text software (Wispr Flow): wisprflow.ai/r?LEON114
☕ Buy me a coffee: buymeacoffee.com/leonvanzyl
💵 Donate using PayPal: paypal.com/ncp/payment/EKRQ8QSGV6CWW
📺 More Claude Code Tutorials: youtube.com/watch?v=50tzzaOvcO0&list=PL4HikwTaYE0FRIBAw9b1TREYXd0heqDlc&index=4
📄 Free Agentic Coding Starter Kit: youtu.be/T0zFZsr_d0Q
Stop struggling with UI issues in your Claude Code projects - learn how to give your AI coding assistant browser vision to fix problems automatically!
⚡ WHAT YOU'LL BUILD/LEARN:
🔹 Set up Playwright MCP server in Claude Code for browser automation
🔹 Automatically detect and fix UI clipping issues in Claude Code apps
🔹 Create comprehensive automated testing workflows using Claude Code
🔹 Troubleshoot visual bugs without manual screenshots in Claude Code
🔹 Build a complete data structuring application using Claude Code + my Agentic Coding Starter Kit
🎯 PERFECT FOR:
✅ Claude Code users struggling with UI issues in generated apps
✅ Developers new to Claude Code MCP server integrations
✅ Anyone building apps with Claude Code, Bolt, or Lovable platforms
✅ Beginners learning Claude Code advanced workflows and automation
✅ Users of the Agentic Coding Starter Kit + Claude Code combination
🛠️ TOOLS COVERED:
Claude Code (AI coding assistant with MCP browser automation)
Playwright MCP Server (browser vision for Claude Code agents)
Agentic Coding Starter Kit (free Claude Code boilerplate)
⏰ DETAILED TIMESTAMPS:
0:00 - Introduction: Common UI issues in Claude Code applications
0:35 - Demo: Application built with Claude Code + Agentic Starter Kit
1:17 - Text clipping in Claude Code generated UI
1:52 - Why Claude Code agents code blind: The UI design challenge
2:07 - Playwright MCP server setup for Claude Code
2:30 - Installing MCP server and connecting to Claude Code
2:47 - Agent troubleshooting UI issues automatically
3:16 - Claude Code agent fixing text clipping in real-time
3:41 - Automated workflow setup
4:15 - Full user journey testing
5:18 - Additional Claude Code bug fixes: Modal overlay resolution
5:53 - Wrap up
#ClaudeCode #PlaywrightMCP
🚀 Access ALL video resources & get personalized help in my community:
skool.com/agentic-labs/about?ref=3fd61190e13d426dbf4f3b38adc7de69
💬 My AI voice-to-text software (Wispr Flow): wisprflow.ai/r?LEON114
☕ Buy me a coffee: buymeacoffee.com/leonvanzyl
💵 Donate using PayPal: paypal.com/ncp/payment/EKRQ8QSGV6CWW
📺 More Claude Code Tutorials: youtube.com/watch?v=50tzzaOvcO0&list=PL4HikwTaYE0FRIBAw9b1TREYXd0heqDlc&index=4
📄 Free Agentic Coding Starter Kit: youtu.be/T0zFZsr_d0Q
Stop struggling with UI issues in your Claude Code projects - learn how to give your AI coding assistant browser vision to fix problems automatically!
⚡ WHAT YOU'LL BUILD/LEARN:
🔹 Set up Playwright MCP server in Claude Code for browser automation
🔹 Automatically detect and fix UI clipping issues in Claude Code apps
🔹 Create comprehensive automated testing workflows using Claude Code
🔹 Troubleshoot visual bugs without manual screenshots in Claude Code
🔹 Build a complete data structuring application using Claude Code + my Agentic Coding Starter Kit
🎯 PERFECT FOR:
✅ Claude Code users struggling with UI issues in generated apps
✅ Developers new to Claude Code MCP server integrations
✅ Anyone building apps with Claude Code, Bolt, or Lovable platforms
✅ Beginners learning Claude Code advanced workflows and automation
✅ Users of the Agentic Coding Starter Kit + Claude Code combination
🛠️ TOOLS COVERED:
Claude Code (AI coding assistant with MCP browser automation)
Playwright MCP Server (browser vision for Claude Code agents)
Agentic Coding Starter Kit (free Claude Code boilerplate)
⏰ DETAILED TIMESTAMPS:
0:00 - Introduction: Common UI issues in Claude Code applications
0:35 - Demo: Application built with Claude Code + Agentic Starter Kit
1:17 - Text clipping in Claude Code generated UI
1:52 - Why Claude Code agents code blind: The UI design challenge
2:07 - Playwright MCP server setup for Claude Code
2:30 - Installing MCP server and connecting to Claude Code
2:47 - Agent troubleshooting UI issues automatically
3:16 - Claude Code agent fixing text clipping in real-time
3:41 - Automated workflow setup
4:15 - Full user journey testing
5:18 - Additional Claude Code bug fixes: Modal overlay resolution
5:53 - Wrap up
#ClaudeCode #PlaywrightMCP
