Amplifier Web UX Expert Bundle

Expert-level support for web UX development workflows: visual testing, regression detection, debugging, and verification before shipping.

The Problem

AI agents working on frontend code face a critical limitation: they can't visually verify their work. When an agent says "I fixed the CSS", there's no way to confirm the UI actually looks correct.

This bundle solves that by providing:

• Visual regression testing with baseline comparison
• Console and network debugging for finding root causes
• Pre-commit verification to catch issues before they reach main
• Evidence-based workflows that prove work is complete

Architecture

This bundle extends amplifier-bundle-browser with development-focused verification capabilities:

┌─────────────────────────────────────────────────────────────┐
│  web-ux-dev                                              │
│  Focus: Development testing & verification                  │
├─────────────────────────────────────────────────────────────┤
│  INCLUDES:                                                  │
│  └── samueljklee/amplifier-bundle-browser                   │
│      (browser automation: navigation, forms, screenshots)   │
├─────────────────────────────────────────────────────────────┤
│  EXTENDS WITH:                                              │
│  ├── tool-visual-compare (pixelmatch baselines)             │
│  ├── ux-expert agent (orchestrates dev workflows)           │
│  ├── visual-verifier agent (regression testing)             │
│  ├── dom-inspector agent (console/network debugging)        │
│  ├── preflight-checker agent (dependency verification)      │
│  └── Dev-focused recipes                                    │
└─────────────────────────────────────────────────────────────┘

Quick Start

1. Install the bundle

amplifier bundle add git+https://github.com/microsoft/amplifier-bundle-web-ux-dev --app

2. Verify prerequisites

"Use preflight-checker to verify my environment is ready"

3. Start verifying

"Verify the homepage at http://localhost:3000 before I commit"

Agents

web-ux-dev:ux-expert (Main Entry Point)

The orchestrator for all web UX verification workflows. Start here for most tasks.

"Verify my changes to the checkout flow work correctly"
"Debug why the modal isn't appearing on the settings page"
"Run visual regression tests before I open my PR"

web-ux-dev:visual-verifier

Screenshot capture and comparison specialist.

"Take a screenshot of the login page"
"Compare the dashboard against the baseline"
"Create a baseline for the new feature page"

web-ux-dev:dom-inspector

Console errors, network failures, and DOM analysis.

"Check for JavaScript errors on the homepage"
"Why is the API data not loading?"
"Inspect the DOM structure of the modal"

web-ux-dev:preflight-checker

Verifies Node.js, Playwright, and browser dependencies.

"Check if my environment is ready for browser testing"
"Why are the screenshot tools failing?"

Inherited from browser bundle

• browser:browser-operator - General browser automation
• browser:web-researcher - Web research tasks
• browser:visual-documenter - Documentation screenshots

Recipes

Recipe	Purpose	Usage
pre-commit-verify	Verify before commit	recipe_path=@web-ux-dev:recipes/pre-commit-verify.yaml
debug-ui-issue	Diagnose UI problems	recipe_path=@web-ux-dev:recipes/debug-ui-issue.yaml
visual-regression-suite	Test multiple pages	recipe_path=@web-ux-dev:recipes/visual-regression-suite.yaml
create-baselines	Establish baselines	recipe_path=@web-ux-dev:recipes/create-baselines.yaml

Example: Pre-commit verification

amplifier tool invoke recipes operation=execute \
  recipe_path=@web-ux-dev:recipes/pre-commit-verify.yaml \
  context='{"url": "http://localhost:3000", "baseline_name": "homepage"}'

Development Workflow Integration

Pre-Commit Checklist

Before committing frontend changes:

1. ✅ No new console errors
2. ✅ No network failures
3. ✅ Visual regression < 1% (or intentional)
4. ✅ Responsive breakpoints verified

PR Verification

When reviewing frontend PRs:

1. Compare before/after screenshots
2. Check for console error regressions
3. Verify mobile/tablet viewports
4. Update baselines if intentional changes

Requirements

• Node.js 18+ - For Playwright MCP
• agent-browser - Installed by browser bundle (npm install -g agent-browser)
• Playwright browsers - npx playwright install chromium (for DevTools inspection)

Troubleshooting

"Browser tools not working"

Run preflight-checker:

"Use preflight-checker to diagnose browser tool issues"

"Visual comparison fails"

Ensure baseline exists:

"List available baselines"
"Create baseline 'homepage' for http://localhost:3000"

"Console errors not captured"

Playwright MCP provides console capture. Check:

cat ~/.amplifier/logs/mcp-servers/playwright.log

Contributing

Contributions welcome! Ideas:

• Additional viewport presets
• Accessibility testing integration
• Performance metrics capture
• CI/CD integration recipes

License

MIT

---

Built for the Amplifier ecosystem.

Extends amplifier-bundle-browser by @samueljklee.