🚀 Claude Code Frontend Dev - AI Visual Testing Plugin

The world's first fully autonomous, multi-agent, closed-loop frontend development system with visual feedback

Build UIs like a team of expert developers - with vision, coordination, and iterative refinement until perfect.

Features • Demo • Installation • How It Works • Examples

🎯 The Problem

Traditional AI code assistants are blind to frontend issues:

❌ Can't see if buttons are misaligned ❌ Can't verify colors match design specs ❌ Can't detect visual regressions ❌ Can't test user interactions visually ❌ No feedback loop for UI/UX improvements

Result: Endless back-and-forth, broken UIs, frustrated developers.

✨ The Solution

Claude Code Frontend Dev gives AI vision and interactivity for frontend development:

Write Code → Test Visually → AI Sees Results → Auto-Fix → Repeat Until Perfect

Like a human developer who:

Writes code
Opens the browser
Looks at the page
Clicks buttons, fills forms
Sees what's broken
Fixes it
Repeats until perfect

But 10x faster and never gets tired.

🌟 Features - Expert Edition

🔄 Closed-Loop Development

✅ Automatic visual testing after every code change
✅ AI validates results using multimodal vision (Claude 4.5 Sonnet)
✅ Iterates until requirements are met
✅ Zero manual intervention needed
✅ 10x-15x faster than manual testing

👁️ Expert-Level Testing Suite

10 Comprehensive Test Categories:

Functional Testing
- Interactive element validation
- Form testing (validation, edge cases)
- Navigation testing (routing, links)
- State management verification
Accessibility Testing (WCAG 2.1 AA/AAA)
- ♿ Keyboard navigation validation
- ♿ Screen reader compatibility (ARIA)
- ♿ Color contrast checking (4.5:1+ ratios)
- ♿ Touch target sizing (44x44px)
- ♿ Automated axe-core scanning
Performance Testing (Core Web Vitals)
- ⚡ FCP, LCP, TTI, TBT, CLS, FID metrics
- ⚡ Bundle size analysis
- ⚡ Runtime performance profiling
- ⚡ Network condition testing (3G, offline)
Responsive Design Testing
- 📱 7 viewport breakpoints tested
- 📱 Device emulation (iPhone, iPad, Android)
- 📱 Touch interaction validation
- 📱 Orientation change handling
Security Testing
- 🛡️ XSS vulnerability detection
- 🛡️ CSP (Content Security Policy) validation
- 🛡️ HTTPS/mixed content checking
- 🛡️ Input sanitization verification
Expert SEO Optimization ⭐ NEW
- 🔍 Technical SEO: Crawlability, sitemaps, robots.txt, URL structure
- 🔍 On-Page SEO: Title tags, meta descriptions, heading hierarchy, keyword optimization
- 🔍 Structured Data: Schema.org (Organization, Article, Product, FAQ, Breadcrumb)
- 🔍 Rich Snippets: Featured snippet optimization (+15-30% CTR)
- 🔍 Core Web Vitals for SEO: LCP, FID, CLS (ranking factors)
- 🔍 Image SEO: Alt text, file names, WebP conversion, lazy loading
- 🔍 Social SEO: Open Graph, Twitter Cards, social image optimization
- 🔍 Content SEO: E-A-T signals, keyword strategy, internal linking
- 🔍 International SEO: Hreflang tags, multi-language support
- 🔍 SEO Audits: 100-point scoring, competitive analysis, action plans
Visual & UX Testing
- 🎨 Animation quality validation
- 🎨 Visual regression detection
- 🎨 Loading states verification
- 🎨 Error handling assessment
Cross-Browser Compatibility
- 🌐 Chromium, Firefox, WebKit support
- 🌐 Progressive enhancement validation
Code Quality
- 📝 Best practices validation
- 📝 Clean code assessment
- 📝 Maintainability scoring
Production Readiness
- 🚀 Deployment checklist
- 🚀 Pre-launch verification
- 🚀 Monitoring configuration

🎯 Expert Validation System

Industry-Standard Quality Scoring:

✅ PASS (95-100/100): Ship immediately
⚠️ PASS WITH NOTES (85-94/100): Ship with confidence
🔄 ITERATE (65-84/100): Needs improvement
❌ FAIL (< 65/100): Critical issues

Evidence-Based Decisions:

Specific issue identification with file:line locations
Code snippets for fixes
Effort estimates (time to fix)
Re-test requirements

🤖 Browser Automation

✅ Clicks buttons, fills forms, navigates pages
✅ Captures screenshots at every step (multi-viewport)
✅ Monitors console logs and errors
✅ Supports keyboard/mouse interactions
✅ Network interception & emulation

⚡ Automatic Triggering

✅ Detects when you edit frontend files (.jsx, .tsx, .vue, .svelte, .css)
✅ Starts dev server automatically (Vite, Next.js, etc.)
✅ Runs comprehensive test suite without asking
✅ Reports results with screenshots & metrics

🎨 Framework Agnostic

Works with any frontend framework:

React, Vue, Svelte, Angular
Vite, Next.js, Create React App, Nuxt, SvelteKit
Plain HTML/CSS/JavaScript
Any custom framework

🎬 Live Demo

Real Test: Counter & Form Validation

Step 1: Initial Load

✅ AI verifies: Counter starts at 0

Step 2: After 6 Clicks

✅ AI verifies: Counter incremented to 6

Step 3: Form Submitted

✅ AI verifies: Success message displays

What the AI Actually Sees:

👁️ Counter Value: Reads exact numbers "0" → "6" → "5" → "0"
👁️ Form Input: Sees typed text "Claude Code" and "test@claude.ai"
👁️ Success Message: Reads "✅ Success! Welcome, Claude Code!"
👁️ Visual States: Detects blue focus borders, fade animations
👁️ Console Logs: Monitors all events, catches errors

🚀 Quick Start

Installation (5 minutes)

# 1. Clone into Claude Code plugins directory
cd ~/.claude/plugins
git clone https://github.com/hemangjoshi37a/claude-code-frontend-dev.git frontend-dev

# 2. Install dependencies
cd frontend-dev
npm install

# 3. Restart Claude Code
# Plugin will auto-load on next launch!

Verify Installation

Type /frontend-dev in Claude Code - you should see one smart command:

/frontend-dev - Intelligent frontend development with automatic visual testing

This ONE command smartly handles everything:

✅ Automatic testing (when files change)
✅ Manual development (implement features)
✅ Manual testing (test existing code)
✅ No need to choose - it detects context automatically!

🧠 How It Works

Closed-Loop Multi-Agent Architecture

                    ┌─────────────────────────────┐
                    │   USER COMMAND /frontend-dev   │
                    │   "add a dark mode toggle"      │
                    └──────────────┬──────────────────┘
                                   │
                                   ▼
        ┌──────────────────────────────────────────────────────────┐
        │       CLOSED-LOOP COORDINATOR (Master Orchestrator)       │
        │   • Parses intent & plans comprehensively (10-20 steps)  │
        │   • Reads necessary code for context                     │
        │   • Coordinates 5 specialized agents                     │
        │   • Implements code changes                              │
        │   • Manages closed-loop feedback until perfect           │
        └───┬────────┬────────┬────────┬────────────────────────────┘
            │        │        │        │
            │ Parallel Execution   │
            ▼        ▼        │        │
        ┌───────┐ ┌───────┐  │        │
        │ UX    │ │ SEO   │  │        │
        │Design │ │Spec   │  │        │
        └───┬───┘ └───┬───┘  │        │
            │         │       │        │
            └────┬────┘       │        │
                 │            │        │
                 ▼            ▼        ▼
           [Implement]  [Dev Server] [Test]
                 │            │        │
                 ▼            ▼        ▼
        ┌─────────────────────────────────────┐
        │  1️⃣  DEV SERVER MANAGER AGENT       │
        │  • Auto-detects framework           │
        │  • Starts dev server                │
        │  • Returns URL: http://localhost:*  │
        └─────────────┬───────────────────────┘
                      │
                      ▼
        ┌─────────────────────────────────────┐
        │  2️⃣  FRONTEND TESTER AGENT          │
        │  • Browser automation (Playwright)  │
        │  • Captures screenshots (CRITICAL)  │
        │  • Monitors console (errors/logs)   │
        │  • Tests all interactions           │
        │  • Tests all viewports              │
        └─────────────┬───────────────────────┘
                      │
                      ▼
        ┌─────────────────────────────────────┐
        │  Visual Evidence + Console Logs      │
        │  📸 Screenshots at every step        │
        │  📊 Console output (errors/warnings) │
        │  ⚡ Performance metrics              │
        └─────────────┬───────────────────────┘
                      │
                      ▼
        ┌─────────────────────────────────────┐
        │  3️⃣  FRONTEND VALIDATOR AGENT       │
        │  • Analyzes screenshots (AI vision) │
        │  • Validates vs requirements        │
        │  • Checks console for errors        │
        │  • Decision: PASS ✅ or FAIL ❌     │
        │  • Provides specific fixes          │
        └─────────────┬───────────────────────┘
                      │
              ┌───────┴────────┐
              │                │
              ▼                ▼
           PASS ✅          FAIL ❌
              │                │
              │                ▼
              │     ┌──────────────────────┐
              │     │ Coordinator Applies  │
              │     │ Fixes Automatically  │
              │     └──────────┬───────────┘
              │                │
              │                ▼
              │        [Re-test Loop]
              │       (Up to 5 iterations)
              │                │
              │←───────────────┘
              │
              ▼
        ┌─────────────────────────────────────┐
        │  COMPLETION REPORT                   │
        │  ✅ Feature implemented & validated  │
        │  📸 Visual evidence (screenshots)    │
        │  📝 Code changes summary             │
        │  🚀 Production-ready                 │
        └──────────────────────────────────────┘

🤖 The 6-Agent Team

Closed-Loop Coordinator (NEW! Master Orchestrator)

Plans comprehensive task breakdown (10-20 steps)
Reads codebase for full context
Coordinates all 5 specialized agents
Implements code changes
Manages iterative feedback loop
Makes autonomous decisions
Handles long-horizon tasks (no human intervention)

UX Design Specialist (Expert)

Modern design trends (glassmorphism, neumorphism)
Color theory, typography, spacing
Accessibility-aware design recommendations

Frontend Tester (Critical for Closed-Loop)

Browser automation with Playwright
Screenshot capture at EVERY step
Console monitoring (errors/warnings)
Multi-viewport testing
Visual evidence collection

Frontend Validator (Quality Gate)

Screenshot analysis (AI vision)
Requirements validation
PASS/FAIL decisions
Specific fix recommendations

SEO Specialist (Expert)

Technical SEO audits
Structured data implementation
Core Web Vitals optimization
Social media optimization

Dev Server Manager (Infrastructure)

Framework auto-detection
Dev server lifecycle management
Health monitoring

Technology Stack

AI Model: Claude 4.5 Sonnet (multimodal vision)
Browser: Puppeteer (default) or Playwright
Frameworks: Auto-detects Vite, Next.js, CRA, Vue, Svelte, etc.
Screenshots: AI-powered visual analysis
Triggers: PostToolUse hooks for automatic testing

📚 Examples

Example 1: Fix Misaligned Button

You write:

<button style={{marginLeft: 100}}>Click Me</button>

AI workflow:

📸 Takes screenshot
👁️ Sees button is way off-center
💡 Reports: "Button has excessive left margin (100px). Not centered."
🔧 Auto-fixes:

<button style={{margin: '0 auto', display: 'block'}}>Click Me</button>

📸 Re-tests, verifies fix
✅ Reports: PASS

Example 2: Form Validation

Requirement: "Show green success message after form submit"

AI workflow:

Fills form with test data
Clicks submit button
📸 Captures screenshot
👁️ Reads message: "✅ Form submitted successfully"
Validates: Green color (#10B981), checkmark visible
✅ Reports: PASS - All requirements met

Example 3: Expert SEO Optimization ⭐ NEW

You ask: "Optimize my landing page for SEO"

AI workflow:

🔍 Runs comprehensive SEO audit
- Technical SEO (robots.txt, sitemap, URL structure)
- On-page SEO (title, meta, headings)
- Structured data analysis
- Core Web Vitals for SEO
- Image SEO check
- Social media tags
📊 Generates SEO score: 85/100
🎯 Identifies issues:
- Major: Missing Article schema (no rich snippets)
- Major: Mobile LCP 3.2s (affects rankings)
- Minor: Meta description too short (95 chars)
- Minor: 12 images missing alt text
🔧 Provides specific fixes:

<!-- Add Article Schema for Rich Snippets -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "image": ["https://example.com/image.jpg"],
  "author": {"@type": "Person", "name": "Author"},
  "publisher": {"@type": "Organization", "name": "Company"},
  "datePublished": "2025-11-11"
}
</script>

<!-- Optimize Meta Description -->
<meta name="description" content="Extended description with keywords and CTA that is 150-160 characters long for optimal SERP display">

<!-- Convert hero image to WebP for LCP -->
<picture>
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Descriptive keyword-rich alt text" loading="lazy">
</picture>

📈 Expected results:
- SEO Score: 85/100 → 95/100
- Rich Snippets: Enabled (+15-30% CTR boost)
- Mobile LCP: 3.2s → 2.1s (passing Core Web Vital)
- Organic Traffic: +25-40% in 3-6 months
✅ Reports: SEO optimizations complete, ready for search engines

Example 4: Catch Visual Regression

You accidentally change:

.heading { color: blue; }  →  .heading { color: white; }

On purple background:

👁️ AI sees white text on purple = invisible
🚨 Reports: "Text not readable - insufficient contrast (WCAG 2.1 fail)"
💡 Suggests: Use color: #FFFFFF with darker background, or switch to high-contrast color
🔧 Auto-fixes color
✅ Re-validates

🎯 Use Cases

Perfect For:

🎨 UI/UX Development - Pixel-perfect design verification
🧪 Visual Regression Testing - Catch unintended changes
♿ Accessibility Testing - Validate contrast, focus states, keyboard nav
📱 Responsive Design - Test across viewport sizes
🎭 Animation Testing - Verify transitions, fades, transforms
🐛 Bug Reproduction - "AI, click the blue button and tell me what you see"
📊 Component Libraries - Test all variants visually (Storybook integration)

Industries:

🛒 E-commerce (product pages, checkout flows)
💼 SaaS dashboards (admin panels, analytics)
📢 Marketing websites (landing pages, CTAs)
📱 Mobile apps (React Native, Ionic)
🎨 Design systems (Storybook, Figma integration)

📊 Performance Benchmarks

Tested on real-world projects:

Task	Manual Testing	With This Plugin	Speedup
Form validation	5 mins	30 secs	10x ⚡
Visual regression	15 mins	1 min	15x ⚡
Responsive design	20 mins	2 mins	10x ⚡
Bug reproduction	10 mins	45 secs	13x ⚡

Average productivity gain: 12x faster

🔧 Configuration

Automatic Mode

Create .claude-plugin/visual-tests.json for custom test scenarios:

{
  "tests": [
    {
      "name": "Dark Mode Toggle",
      "steps": [
        {"action": "click", "selector": "#theme-toggle"},
        {"action": "screenshot", "name": "dark-mode"},
        {"validate": "Background should be dark (#1F2937)"}
      ]
    }
  ]
}

Framework Override

Auto-detection works great, but you can override:

{
  "devServer": {
    "command": "npm run dev",
    "port": 3000,
    "framework": "vite"
  }
}

🎓 Learn More

Resources:

📖 Full Documentation
🎥 Video Tutorial (coming soon)
💬 Discord Community (coming soon)
🐦 Follow on Twitter
🌐 hjLabs.in - IIOT | ML/AI | ALGOTRADING

Related Projects:

Claude Code - AI coding assistant
Playwright - Browser automation
Puppeteer - Headless Chrome

🤝 Contributing

Contributions welcome! This is open source and community-driven.

Areas We Need Help:

🌐 Multi-language support (i18n)
📱 Mobile browser testing (iOS Safari, Android)
🎨 More framework examples (Angular, Ember)
📖 Documentation improvements
🐛 Bug fixes and optimizations

Want to contribute? Check our Contributing Guide!

🚀 Roadmap

📄 License

MIT License - Free for personal and commercial use.

See LICENSE for details.

🙏 Acknowledgments

Built with ❤️ by Hemang Joshi @ hjLabs.in

Powered by:

Claude 4.5 Sonnet - Multimodal AI
Anthropic Claude Code - Plugin platform
Puppeteer - Browser automation

⭐ Star This Project!

If this plugin saves you time, give us a star ⭐ on GitHub!

It helps others discover this tool and motivates us to keep improving it.

Made with 🤖 + 👁️ by AI that can actually SEE your code

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
.claude-plugin		.claude-plugin
agents		agents
assets/screenshots		assets/screenshots
commands		commands
hooks		hooks
mcp		mcp
plugins/frontend-dev		plugins/frontend-dev
ARCHITECTURE.md		ARCHITECTURE.md
EXAMPLES.md		EXAMPLES.md
README.md		README.md
SETUP.md		SETUP.md
hooks.json		hooks.json

hemangjoshi37a/claude-code-frontend-dev

Folders and files

Latest commit

History

Repository files navigation

🚀 Claude Code Frontend Dev - AI Visual Testing Plugin

🎯 The Problem

✨ The Solution

🌟 Features - Expert Edition

🔄 Closed-Loop Development

👁️ Expert-Level Testing Suite

🎯 Expert Validation System

🤖 Browser Automation

⚡ Automatic Triggering

🎨 Framework Agnostic

🎬 Live Demo

Real Test: Counter & Form Validation

What the AI Actually Sees:

🚀 Quick Start

Installation (5 minutes)

Verify Installation

🧠 How It Works

Closed-Loop Multi-Agent Architecture

🤖 The 6-Agent Team

Technology Stack

📚 Examples

Example 1: Fix Misaligned Button

Example 2: Form Validation

Example 3: Expert SEO Optimization ⭐ NEW

Example 4: Catch Visual Regression

🎯 Use Cases

Perfect For:

Industries:

📊 Performance Benchmarks

🔧 Configuration

Automatic Mode

Framework Override

🎓 Learn More

Resources:

Related Projects:

🤝 Contributing

Areas We Need Help:

🚀 Roadmap

📄 License

🙏 Acknowledgments

⭐ Star This Project!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Contributors 36

Uh oh!

Languages

Packages