claude-code-frontend-dev
byhemangjoshi37a· 1 MCP server
🚀 First multimodal AI-powered visual testing plugin for Claude Code. AI that can SEE your UI! 10x faster frontend development with closed-loop testing, browser automation, and Claude 4.5 Sonnet vision.
How to install claude-code-frontend-dev?
hemangjoshi37a/claude-code-frontend-dev
$git clone https://github.com/hemangjoshi37a/claude-code-frontend-devInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Install claude-code-frontend-dev by running `git clone https://github.com/hemangjoshi37a/claude-code-frontend-dev`, then use it for the current task and follow its documentation at https://github.com/hemangjoshi37a/claude-code-frontend-dev.
README.md
| 1 | # 🚀 Claude Code Frontend Dev - AI Visual Testing Plugin |
| 2 | |
| 3 | <div align="center"> |
| 4 | |
| 5 | [](https://claude.com/claude-code) |
| 6 | [](https://anthropic.com) |
| 7 | [](https://playwright.dev) |
| 8 | [](LICENSE) |
| 9 | [](https://github.com/hemangjoshi37a/claude-code-frontend-dev/stargazers) |
| 10 | |
| 11 | **The world's first fully autonomous, multi-agent, closed-loop frontend development system with visual feedback, testing constitutions, and visual memory** |
| 12 | |
| 13 | *Build UIs like a team of expert developers - with vision, coordination, memory, and iterative refinement until perfect.* |
| 14 | |
| 15 | [Features](#-features) • [Demo](#-live-demo) • [Installation](#-quick-start) • [Constitutions](#-testing-constitutions) • [Visual Memory](#-visual-memory) • [Examples](#-examples) |
| 16 | |
| 17 | </div> |
| 18 | |
| 19 | --- |
| 20 | |
| 21 | ## 🎯 The Problem |
| 22 | |
| 23 | Traditional AI code assistants are **blind** to frontend issues: |
| 24 | |
| 25 | ❌ Can't see if buttons are misaligned |
| 26 | ❌ Can't verify colors match design specs |
| 27 | ❌ Can't detect visual regressions |
| 28 | ❌ Can't test user interactions visually |
| 29 | ❌ No feedback loop for UI/UX improvements |
| 30 | |
| 31 | **Result:** Endless back-and-forth, broken UIs, frustrated developers. |
| 32 | |
| 33 | --- |
| 34 | |
| 35 | ## ✨ The Solution |
| 36 | |
| 37 | **Claude Code Frontend Dev** gives AI **vision** and **interactivity** for frontend development: |
| 38 | |
| 39 | ``` |
| 40 | Write Code → Test Visually → AI Sees Results → Auto-Fix → Repeat Until Perfect |
| 41 | ``` |
| 42 | |
| 43 | Like a **human developer** who: |
| 44 | 1. Writes code |
| 45 | 2. Opens the browser |
| 46 | 3. **Looks** at the page |
| 47 | 4. Clicks buttons, fills forms |
| 48 | 5. **Sees** what's broken |
| 49 | 6. Fixes it |
| 50 | 7. **Repeats** until perfect |
| 51 | |
| 52 | But **10x faster** and **never gets tired**. |
| 53 | |
| 54 | --- |
| 55 | |
| 56 | ## 🌟 Features - Expert Edition |
| 57 | |
| 58 | ### 🔄 Closed-Loop Development |
| 59 | - ✅ Automatic visual testing after every code change |
| 60 | - ✅ AI validates results using **multimodal vision** (Claude 4.5 Sonnet) |
| 61 | - ✅ Iterates until requirements are met |
| 62 | - ✅ Zero manual intervention needed |
| 63 | - ✅ **10x-15x faster** than manual testing |
| 64 | |
| 65 | ### 👁️ Expert-Level Testing Suite |
| 66 | |
| 67 | **10 Comprehensive Test Categories:** |
| 68 | |
| 69 | 1. **Functional Testing** |
| 70 | - Interactive element validation |
| 71 | - Form testing (validation, edge cases) |
| 72 | - Navigation testing (routing, links) |
| 73 | - State management verification |
| 74 | |
| 75 | 2. **Accessibility Testing (WCAG 2.1 AA/AAA)** |
| 76 | - ♿ Keyboard navigation validation |
| 77 | - ♿ Screen reader compatibility (ARIA) |
| 78 | - ♿ Color contrast checking (4.5:1+ ratios) |
| 79 | - ♿ Touch target sizing (44x44px) |
| 80 | - ♿ Automated axe-core scanning |
| 81 | |
| 82 | 3. **Performance Testing (Core Web Vitals)** |
| 83 | - ⚡ FCP, LCP, TTI, TBT, CLS, FID metrics |
| 84 | - ⚡ Bundle size analysis |
| 85 | - ⚡ Runtime performance profiling |
| 86 | - ⚡ Network condition testing (3G, offline) |
| 87 | |
| 88 | 4. **Responsive Design Testing** |
| 89 | - 📱 7 viewport breakpoints tested |
| 90 | - 📱 Device emulation (iPhone, iPad, Android) |
| 91 | - 📱 Touch interaction validation |
| 92 | - 📱 Orientation change handling |
| 93 | |
| 94 | 5. **Security Testing** |
| 95 | - 🛡️ XSS vulnerability detection |
| 96 | - 🛡️ CSP (Content Security Policy) validation |
| 97 | - 🛡️ HTTPS/mixed content checking |
| 98 | - 🛡️ Input sanitization verification |
| 99 | |
| 100 | 6. **Expert SEO Optimization** ⭐ NEW |
| 101 | - 🔍 **Technical SEO**: Crawlability, sitemaps, robots.txt, URL structure |
| 102 | - 🔍 **On-Page SEO**: Title tags, meta descriptions, heading hierarchy, keyword optimization |
| 103 | - 🔍 **Structured Data**: Schema.org (Organization, Article, Product, FAQ, Breadcrumb) |
| 104 | - 🔍 **Rich Snippets**: Featured snippet optimization (+15-30% CTR) |
| 105 | - 🔍 **Core Web Vitals for SEO**: LCP, FID, CLS (ranking factors) |
| 106 | - 🔍 **Image SEO**: Alt text, file names, WebP conversion, lazy loading |
| 107 | - 🔍 **Social SEO**: Open Graph, Twitter Cards, social image optimization |
| 108 | - 🔍 **Content SEO**: E-A-T signals, keyword strategy, internal linking |
| 109 | - 🔍 **International SEO**: Hreflang tags, multi-language support |
| 110 | - 🔍 **SEO Audits**: 100-point scoring, competitive analysis, action plans |
| 111 | |
| 112 | 7. **Visual & UX Testing** |
| 113 | - 🎨 Animation quality validation |
| 114 | - 🎨 Visual regression detection |
| 115 | - 🎨 Loading states verification |
| 116 | - 🎨 Error handling assessment |
| 117 | |
| 118 | 8. **Cross-Browser Compatibility** |
| 119 | - 🌐 Chromium, Firefox, WebKit support |
| 120 | - 🌐 Progressive enhancement validation |
| 121 | |
| 122 | 9. **Code Quality** |
| 123 | - 📝 Best practices validation |
| 124 | - 📝 Clean code assessment |
| 125 | - 📝 Maintainability scoring |
| 126 | |
| 127 | 10. **Production Readiness** |
| 128 | - 🚀 Deployment checklist |
| 129 | - 🚀 Pre-launch verification |
| 130 | - 🚀 Monitoring configuration |
| 131 | |
| 132 | 11. **Testing Constitutions** ⭐ NEW |
| 133 | - 📋 Page-specific testing configurations |
| 134 | - 📋 Define features, buttons, forms, graphs to test |
| 135 | - 📋 Custom acceptance criteria per page |
| 136 | - 📋 Reusable test de |
Related
6 picksType
- jcodemunch-mcpToken-efficient code exploration via tree-sitter AST parsing. 70+ languages, 95%+ token savings.Jul 2026
- minimax-coding-plan-mcpSpecialized MiniMax Model Context Protocol (MCP) server designed for coding-plan usersFeb 2026
- neoNeo.mjs is a self-evolving software organism: a professional end-to-end AI engineering team whose cross-model swarm inhabits live apps via Neural Link, Active Hybrid GraphRAG, DreamService, and self-healing loops.Jul 2026
- shadcn-ui-mcp-serverA Model Context Protocol (MCP) server for shadcn/ui components, providing AI assistants with access to component source code, demos, blocks, and metadata.May 2026
- kicad-mcp-proProduction-grade MCP server for KiCad EDA—PCB design, DRC, simulation, BOM, DFM, and manufacturing.Jul 2026
- taiga-ui-mcpModel Context Protocol server providing Taiga UI documentation search and scaffolding tools.Jul 2026
