Automatically validate implementations in real browsers after code is written or when user says "test this". Uses Chrome DevTools MCP to test responsive breakpoints (320px, 768px, 1024px), check accessibility compliance (WCAG AA contrast, keyboard navigation, ARIA), validate interactions, and generate detailed technical reports with file paths and specific fixes.
From cms-cultivatornpx claudepluginhub kanopi/claude-toolbox --plugin cms-cultivatorThis skill uses the workspace's default tool permissions.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Implements structured self-debugging workflow for AI agent failures: capture errors, diagnose patterns like loops or context overflow, apply contained recoveries, and generate introspection reports.
Validate design implementations in real browsers using Chrome DevTools MCP to ensure quality, accessibility, and responsiveness.
Real browser testing catches issues that code review cannot.
This skill automatically activates when:
Before validating in browser, determine:
Local development:
http://localhost:8000/componenthttp://site.ddev.site/test-pagehttp://site.test/node/123Staging/production:
https://staging.example.com/featurehttps://production.com/public-pageURL must be:
Standard breakpoints (always test):
What to check at each breakpoint:
WCAG 2.1 Level AA (always check):
How to test:
mcp__chrome-devtools__press_key to Tab through pagemcp__chrome-devtools__take_snapshot to check DOM structureInteractive states:
:hover - Use mcp__chrome-devtools__hover on elements:focus - Tab to elements with keyboard:active - Click elements with mcp__chrome-devtools__clickCapture screenshots:
Console errors:
mcp__chrome-devtools__list_console_messagesNetwork issues:
mcp__chrome-devtools__list_network_requestsUser requests browser validation
↓
Check: Chrome DevTools MCP available?
↓ Yes
Navigate to test URL
↓
Test each breakpoint (320/768/1024px)
↓
Capture screenshots at each breakpoint
↓
Check accessibility (contrast/keyboard/ARIA)
↓
Test interactions (hover/focus/click)
↓
Check console & network errors
↓
Generate detailed technical report
This skill requires Chrome DevTools MCP integration. Correct tool names to use:
Navigation & Pages:
mcp__chrome-devtools__navigate_page - Navigate to URLmcp__chrome-devtools__list_pages - Get available pagesmcp__chrome-devtools__new_page - Create new tabViewport & Screenshots:
mcp__chrome-devtools__resize_page - Change viewport sizemcp__chrome-devtools__take_screenshot - Capture screenshotmcp__chrome-devtools__take_snapshot - Get DOM structureInteraction:
mcp__chrome-devtools__click - Click element by UIDmcp__chrome-devtools__hover - Hover over elementmcp__chrome-devtools__fill - Fill form fieldmcp__chrome-devtools__press_key - Press keyboard keyDebugging:
mcp__chrome-devtools__list_console_messages - Get JavaScript errorsmcp__chrome-devtools__list_network_requests - Check network activity// Navigate to test page
await mcp__chrome-devtools__navigate_page({
url: testUrl,
type: "url"
});
// Wait for page load (built-in)
// Take initial full-page screenshot
await mcp__chrome-devtools__take_screenshot({
filePath: "screenshots/component/initial-fullpage.png",
fullPage: true
});
// Get page structure
const pageSnapshot = await mcp__chrome-devtools__take_snapshot({
verbose: true
});
// Get detailed page structure
const pageStructure = await mcp__chrome-devtools__take_snapshot({
verbose: true
});
// Check for:
// - Proper semantic HTML
// - Heading hierarchy
// - Form labels
// - Image alt attributes
// - ARIA attributes
// - No empty elements
Semantic HTML Checklist:
<header> for site/section header<nav> for navigation<main> for main content (only one per page)<article> for self-contained content<section> for thematic grouping<aside> for tangentially related content<footer> for site/section footerHeading Hierarchy Check:
✅ GOOD:
<h1>Page Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h2>Section 2</h2>
❌ BAD:
<h1>Page Title</h1>
<h3>Section 1</h3> ← Skipped h2
<h2>Section 2</h2>
Image Alt Text Check:
✅ Content images: <img src="chart.png" alt="Q3 sales chart showing 25% growth">
✅ Decorative images: <img src="divider.png" alt="">
❌ Missing alt: <img src="photo.png">
Test at all standard breakpoints:
// Mobile (320px)
await mcp__chrome-devtools__resize_page({
width: 320,
height: 568
});
await mcp__chrome-devtools__take_screenshot({
filePath: "screenshots/component/mobile-320px.png"
});
// Tablet (768px)
await mcp__chrome-devtools__resize_page({
width: 768,
height: 1024
});
await mcp__chrome-devtools__take_screenshot({
filePath: "screenshots/component/tablet-768px.png"
});
// Desktop (1024px)
await mcp__chrome-devtools__resize_page({
width: 1024,
height: 768
});
await mcp__chrome-devtools__take_screenshot({
filePath: "screenshots/component/desktop-1024px.png"
});
// Large Desktop (1920px) - optional
await mcp__chrome-devtools__resize_page({
width: 1920,
height: 1080
});
await mcp__chrome-devtools__take_screenshot({
filePath: "screenshots/component/large-1920px.png"
});
Mobile Validation (320px-767px):
Tablet Validation (768px-1023px):
Desktop Validation (1024px+):
Test all interactive elements:
// Get page snapshot with element UIDs
const snapshot = await mcp__chrome-devtools__take_snapshot({
verbose: false
});
// Find buttons by UID from snapshot
const buttons = snapshot.elements.filter(el => el.role === 'button');
// Test each button
for (const button of buttons) {
// Hover test
await mcp__chrome-devtools__hover({
uid: button.uid
});
await mcp__chrome-devtools__take_screenshot({
filePath: `screenshots/component/button-${button.uid}-hover.png`
});
// Click test
await mcp__chrome-devtools__click({
uid: button.uid
});
// Check result (wait for any changes)
// Take screenshot if needed
}
// Test form interactions
const formInputs = snapshot.elements.filter(el => el.role === 'textbox');
for (const input of formInputs) {
// Fill input
await mcp__chrome-devtools__fill({
uid: input.uid,
value: "Test Value"
});
// Verify input accepted
}
// Test keyboard navigation
await mcp__chrome-devtools__press_key({
key: "Tab"
});
// Check focus moved to next element
Button/Link Checklist:
Test complete keyboard navigation flow:
// Start from top of page
await mcp__chrome-devtools__navigate_page({
url: testUrl,
type: "reload"
});
// Tab through interactive elements
for (let i = 0; i < 10; i++) {
await mcp__chrome-devtools__press_key({
key: "Tab"
});
// Take snapshot to see what's focused
const snapshot = await mcp__chrome-devtools__take_snapshot({
verbose: false
});
// Check that focus indicator is visible
// Check focus order is logical
}
// Test other keyboard interactions
await mcp__chrome-devtools__press_key({
key: "Enter" // Activate button
});
await mcp__chrome-devtools__press_key({
key: "Escape" // Close modal
});
await mcp__chrome-devtools__press_key({
key: "Space" // Activate button/checkbox
});
Keyboard Navigation Checklist:
Check all text meets WCAG AA requirements:
// Get all text elements from snapshot
const textElements = snapshot.elements.filter(el => el.text);
// For each text element:
// 1. Get computed foreground color
// 2. Get computed background color
// 3. Calculate contrast ratio
// 4. Compare against WCAG requirements
// WCAG AA Requirements:
// - Normal text (< 18pt or < 14pt bold): 4.5:1
// - Large text (≥ 18pt or ≥ 14pt bold): 3:1
// - UI components: 3:1
Contrast Ratio Calculation:
Relative Luminance (L) = 0.2126 * R + 0.7152 * G + 0.0722 * B
(where R, G, B are gamma corrected)
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
(where L1 is lighter, L2 is darker)
Example:
Text: #666666 (rgb(102, 102, 102))
Background: #ffffff (rgb(255, 255, 255))
L1 = 1.0 (white)
L2 = 0.132 (gray)
Ratio = (1.0 + 0.05) / (0.132 + 0.05) = 3.8:1
Result: ❌ Fails WCAG AA (need 4.5:1)
Fix: Use #595959 instead
New ratio = 4.54:1 ✅ Passes
Check for JavaScript errors and network issues:
// Get console messages
const consoleMessages = await mcp__chrome-devtools__list_console_messages({
types: ["error", "warn"],
pageSize: 100
});
// Analyze errors
const errors = consoleMessages.filter(msg => msg.type === "error");
const warnings = consoleMessages.filter(msg => msg.type === "warn");
// Get network requests
const networkRequests = await mcp__chrome-devtools__list_network_requests({
resourceTypes: ["document", "script", "stylesheet", "image"],
pageSize: 100
});
// Find failed requests
const failedRequests = networkRequests.filter(req => req.status >= 400);
Console Issues to Report:
Comprehensive accessibility checks:
Focus Indicators:
// Check all focusable elements have visible indicators
// Minimum 2px outline
// High contrast color
// Non-hidden
ARIA Usage:
// Check proper ARIA attributes:
// - aria-label on icon-only buttons
// - aria-describedby for complex widgets
// - aria-live for dynamic content
// - aria-hidden for decorative elements
// - role attributes where needed
Touch Targets:
// Measure all interactive elements
// Must be ≥ 44x44px on mobile viewports
// Spacing between targets ≥ 8px
Generate detailed technical report:
# Validation Report: Component Name
**URL**: {test-url}
**Date**: {timestamp}
## 📊 Summary
✅ Passed: {N} checks
⚠️ Warnings: {N} checks
❌ Failed: {N} checks
## 📱 Responsive Behavior
### Mobile (320px)
Screenshot: screenshots/component/mobile-320px.png
**Issues:**
❌ Text overflow in heading
File: components/hero.scss:45
Current: font-size: 2rem;
Fix: font-size: clamp(1.5rem, 5vw, 2rem);
### Tablet (768px)
✅ Layout optimal
### Desktop (1024px)
✅ Layout optimal
## ♿ Accessibility
### Color Contrast
❌ Body text: 3.8:1 (need 4.5:1)
File: components/hero.scss:23
Current: color: #666
Fix: color: #595959
Calculation: (255+0.05)/(89+0.05) = 4.54:1 ✅
### Keyboard Navigation
✅ All elements focusable
⚠️ Focus indicator weak (1px)
File: base/buttons.scss:15
Fix: outline: 2px solid; outline-offset: 2px;
### ARIA
⚠️ Icon button missing label
File: patterns/hero.php:42
Fix: Add aria-label="Close banner"
## 🖱️ Interactions
✅ Hover states working
✅ Click handlers functioning
## 🐛 Console & Network
✅ No JavaScript errors
✅ All resources loaded
## 📝 Recommendations (Priority Order)
🔴 CRITICAL
1. Fix body text contrast (hero.scss:23)
2. Add aria-label to icon button (hero.php:42)
🟡 IMPORTANT
3. Fix mobile text overflow (hero.scss:45)
4. Strengthen focus indicators (buttons.scss:15)
🟢 NICE TO HAVE
5. Increase touch target size (hero.scss:67)
If Chrome DevTools MCP is not connected, provide manual checklist:
❌ Chrome DevTools MCP not connected
Browser validation requires Chrome DevTools MCP.
**To enable:**
1. Install: https://github.com/anthropics/claude-chrome-mcp
2. Configure in Claude Code settings
3. Restart Claude Code
4. Retry validation
**Alternative: Manual Validation Checklist**
Test URL: {test-url}
📋 Responsive Testing:
□ View at 320px width (mobile)
□ View at 768px width (tablet)
□ View at 1024px+ width (desktop)
□ No horizontal scrolling on mobile
□ Touch targets ≥ 44px on mobile
📋 Accessibility:
□ Check contrast: https://webaim.org/resources/contrastchecker/
□ Test Tab key navigation
□ Verify focus indicators visible
□ Check heading hierarchy
□ Verify alt text on images
📋 Interactions:
□ Test all hover states
□ Test all click actions
□ Check console for errors
□ Verify network requests successful
❌ Cannot access test URL: {url}
**Possible issues:**
- Local dev server not running
- URL typo
- Network/firewall restrictions
- HTTPS certificate issues
**Solutions:**
1. Verify URL in browser first
2. Check dev server is running
3. Try alternate URL
4. Check /etc/hosts for local domains
This skill is used by:
/design-to-block Command/design-to-paragraph Command/design-validate CommandSymptom: Heading text wraps awkwardly or extends beyond container
Fix: Use fluid typography with clamp()
Symptom: Text difficult to read, fails WCAG AA Fix: Darken text color or lighten background
Symptom: Hard to see which element has keyboard focus Fix: Increase outline to 2px, add offset
Symptom: Buttons/links difficult to tap on mobile Fix: Increase padding to ensure 44px minimum
Symptom: Screen readers can't identify icon-only buttons
Fix: Add aria-label with descriptive text
Symptom: Console shows errors, functionality broken Fix: Debug and fix JavaScript, verify asset paths
What this validates:
What this does NOT validate: