UI Verification Skill

Skill Type: Verification Pattern Library Used By: ui-verification-worker, Main Agent (Phase 5) Trigger: When frontend files are modified in Phase 4 Method: MCP chrome-devtools

Overview

This skill provides reusable patterns for UI/UX verification using Claude in Chrome. It uses a subagent-based approach where browser interactions are delegated to a general-purpose agent with access to Claude in Chrome extension.

When to Use This Skill

Automatic Trigger Conditions:

1. •

   Frontend files modified:

   • •**/components/**/*
   • •**/pages/**/*
   • •**/views/**/*
   • •**/*.css, **/*.scss, **/*.sass, **/*.less
   • •**/src/**/*.{tsx,jsx,ts,js,vue,svelte}
2. •

   Phase 5 Code Review Gate active

3. •

   User has MCP chrome-devtools server configured

Skill Contents

Quick Reference

Subagent Approach

// Launch subagent with Claude in Chrome access
const verificationResult = await Task({
  subagent_type: 'general-purpose',
  model: 'sonnet',
  description: 'UI verification via Claude in Chrome',
  prompt: `You are a UI verification specialist using Claude in Chrome...

  **Tasks**:
  1. Open browser with Claude in Chrome extension
  2. Navigate to pages and capture screenshots
  3. Test interactive elements
  4. Check console for errors
  5. Return structured JSON report
  `
})

Directory Structure

.steering/{YYYY-MM-DD}-{feature-name}/
├── screenshots/
│   ├── login-page.png
│   ├── login-filled.png
│   ├── login-success.png
│   ├── {page-name}.png
│   └── {page-name}-{action}.png
└── reports/
    └── phase5-ui-verification.md

Integration with EDAF

This skill is automatically loaded when:

1. •ui-verification-worker is launched
2. •Phase 5 detects frontend changes
3. •User asks Claude Code to run UI verification

Key Difference from MCP Approach:

• •❌ No MCP server setup required
• •❌ No WSL2 environment restrictions
• •✅ Uses official Claude in Chrome extension
• •✅ Subagent handles all browser interactions
• •✅ Works across all platforms

Subagent Workflow

Main Worker
    ↓
    ├─→ Collect requirements (dev server URL, login info)
    ├─→ Identify modified pages from design doc
    ├─→ Create screenshot directory
    ↓
Launch Subagent (general-purpose)
    ↓
    ├─→ Open browser with Claude in Chrome
    ├─→ Authenticate (if required)
    ├─→ For each page:
    │     ├─→ Navigate to page
    │     ├─→ Capture screenshot
    │     ├─→ Test interactive elements
    │     └─→ Check console errors
    ↓
Return JSON report to main worker
    ↓
Main Worker
    ├─→ Parse JSON results
    ├─→ Generate markdown report
    └─→ Verify all screenshots saved

Advantages

Claude in Chrome Benefits:

• •✅ Official Support: Anthropic's official extension
• •✅ No Setup: No MCP server configuration needed
• •✅ Cross-Platform: Works on macOS, Linux, Windows, WSL2
• •✅ Flexible: Subagent can handle complex scenarios
• •✅ Maintainable: Less infrastructure to manage
• •✅ Reliable: Direct browser integration

Related Resources

• •Worker: .claude/agents/workers/ui-verification-worker.md
• •Report Template: REPORT-TEMPLATE.md (same directory)
• •User Guide: USER-GUIDE.md (same directory)
• •Checklist: CHECKLIST.md (same directory)