From design-eval
Captures full-page screenshots, navigates authentication flows, runs Lighthouse audits, and tests responsive design using playwright-cli without writing code.
npx claudepluginhub tan-yong-sheng/ai-vision-mcp --plugin design-evalThis skill uses the workspace's default tool permissions.
Capture full-page screenshots, navigate authentication flows, run Lighthouse audits, and test responsive design using `playwright-cli` commands. No code writing required.
Automates browser tasks via Playwright CLI for AI agents: navigate pages, take snapshots/screenshots, fill forms, click elements from command line. Use with shell access.
Automates browser testing for web apps using Playwright MCP: navigate pages, click/fill elements, take screenshots, verify UI/console logs, debug frontend issues, validate responsive design.
Automates browsers via Playwright CLI shell commands: navigate pages, interact with elements (click, fill, type), capture screenshots/snapshots/PDFs, manage tabs for web testing.
Share bugs, ideas, or general feedback.
Capture full-page screenshots, navigate authentication flows, run Lighthouse audits, and test responsive design using playwright-cli commands. No code writing required.
/design-eval:audit-accessibility)# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Open browser and navigate
playwright-cli open http://localhost:8787
# Take screenshot (saves to .playwright-cli/page-*.png)
playwright-cli screenshot --filename=.playwright-cli/login-page.png
# Close browser
playwright-cli close
# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Open browser
playwright-cli open http://localhost:8787
# Get page snapshot for reference
playwright-cli snapshot --filename=.playwright-cli/before-audit.yaml
# Run Lighthouse audit (accessibility + performance)
playwright-cli run-code "async page => {
const result = await page.evaluate(() => {
return {
url: window.location.href,
title: document.title,
accessibility: 'audit-required'
};
});
return result;
}"
# Take screenshot
playwright-cli screenshot --filename=.playwright-cli/login-lighthouse.png
# Close
playwright-cli close
# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Open browser at login page
playwright-cli open http://localhost:8787/login
# Get snapshot to see form elements
playwright-cli snapshot --filename=.playwright-cli/login-form.yaml
# Fill form (use element refs from snapshot)
playwright-cli fill e1 "tys203831@gmail.com"
playwright-cli fill e2 "&Test1234"
# Capture before submit
playwright-cli screenshot --filename=.playwright-cli/form-filled.png
# Click submit button
playwright-cli click e3
# Wait for navigation
playwright-cli wait-for-load-state networkidle
# Capture authenticated page
playwright-cli screenshot --filename=.playwright-cli/authenticated-page.png
# Get snapshot of authenticated state
playwright-cli snapshot --filename=.playwright-cli/authenticated.yaml
# Close
playwright-cli close
# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Desktop (1280x720)
playwright-cli open http://localhost:8787
playwright-cli resize 1280 720
playwright-cli screenshot --filename=.playwright-cli/desktop.png
playwright-cli close
# Tablet (768x1024)
playwright-cli open http://localhost:8787
playwright-cli resize 768 1024
playwright-cli screenshot --filename=.playwright-cli/tablet.png
playwright-cli close
# Mobile (375x667)
playwright-cli open http://localhost:8787
playwright-cli resize 375 667
playwright-cli screenshot --filename=.playwright-cli/mobile.png
playwright-cli close
# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Open browser at login
playwright-cli open http://localhost:8787
# Capture login page
playwright-cli screenshot --filename=.playwright-cli/1-login-page.png
# Run Lighthouse on login page
playwright-cli run-code "async page => {
// Return page metrics for accessibility analysis
return {
url: page.url(),
title: await page.title(),
headingCount: await page.evaluate(() => document.querySelectorAll('h1,h2,h3,h4,h5,h6').length)
};
}"
# Fill and submit login form
playwright-cli fill e1 "tys203831@gmail.com"
playwright-cli fill e2 "&Test1234"
playwright-cli click e3
playwright-cli wait-for-load-state networkidle
# Capture dashboard
playwright-cli screenshot --filename=.playwright-cli/2-dashboard.png
# Get snapshot for element inspection
playwright-cli snapshot --filename=.playwright-cli/dashboard-structure.yaml
# Navigate to other pages
playwright-cli goto http://localhost:8787/settings
playwright-cli screenshot --filename=.playwright-cli/3-settings.png
playwright-cli snapshot --filename=.playwright-cli/settings-structure.yaml
# Save browser state for later use
playwright-cli state-save .playwright-cli/auth-session.json
# Close
playwright-cli close
Common device sizes for testing:
| Device | Width | Height |
|---|---|---|
| Mobile (iPhone 12) | 390 | 844 |
| Mobile (Galaxy S21) | 360 | 800 |
| Tablet (iPad) | 768 | 1024 |
| Tablet (iPad Pro) | 1024 | 1366 |
| Desktop (Standard) | 1280 | 720 |
| Desktop (Wide) | 1920 | 1080 |
| Desktop (Ultra-wide) | 2560 | 1440 |
# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Capture and audit a single page
playwright-cli open http://localhost:8787
playwright-cli screenshot --filename=.playwright-cli/page.png
playwright-cli snapshot --filename=.playwright-cli/page-structure.yaml
playwright-cli close
# Then feed to accessibility audit
/design-eval:audit-accessibility --imageSource .playwright-cli/page.png --level AA
# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Test across all breakpoints
for size in "375x667" "768x1024" "1280x720" "1920x1080"; do
IFS='x' read -r width height <<< "$size"
playwright-cli open http://localhost:8787
playwright-cli resize $width $height
playwright-cli screenshot --filename=.playwright-cli/screenshot-${width}x${height}.png
playwright-cli close
done
# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Login and capture multiple pages
playwright-cli open http://localhost:8787/login
# Capture login page
playwright-cli screenshot --filename=.playwright-cli/1-login.png
# Fill and submit
playwright-cli fill e1 "tys203831@gmail.com"
playwright-cli fill e2 "&Test1234"
playwright-cli click e3
playwright-cli wait-for-load-state networkidle
# Capture dashboard
playwright-cli screenshot --filename=.playwright-cli/2-dashboard.png
# Navigate to other pages
playwright-cli goto http://localhost:8787/settings
playwright-cli screenshot --filename=.playwright-cli/3-settings.png
playwright-cli goto http://localhost:8787/profile
playwright-cli screenshot --filename=.playwright-cli/4-profile.png
# Save session for reuse
playwright-cli state-save .playwright-cli/auth-session.json
playwright-cli close
# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Capture and get page metrics
playwright-cli open http://localhost:8787
# Get page structure
playwright-cli snapshot --filename=.playwright-cli/before-audit.yaml
# Capture screenshot
playwright-cli screenshot --filename=.playwright-cli/page-for-audit.png
# Get page metrics for accessibility analysis
playwright-cli run-code "async page => {
return {
url: page.url(),
title: await page.title(),
headings: await page.evaluate(() =>
document.querySelectorAll('h1,h2,h3,h4,h5,h6').length
),
buttons: await page.evaluate(() =>
document.querySelectorAll('button').length
),
forms: await page.evaluate(() =>
document.querySelectorAll('form').length
),
images: await page.evaluate(() =>
document.querySelectorAll('img').length
)
};
}"
playwright-cli close
# Feed screenshot to accessibility audit
/design-eval:audit-accessibility --imageSource .playwright-cli/page-for-audit.png --level AA
When you run playwright-cli snapshot, you get element references (e.g., e1, e2, e3). Use these in commands:
# Get snapshot to see available elements
playwright-cli snapshot
# Use element refs in commands
playwright-cli fill e1 "email@example.com"
playwright-cli fill e2 "password"
playwright-cli click e3 # submit button
playwright-cli open http://localhost:8787
playwright-cli snapshot # See available elements
# Now use element refs from snapshot
# After form submission or navigation
playwright-cli click e3
playwright-cli wait-for-load-state networkidle
playwright-cli screenshot # Capture after page loads
# Group related screenshots with prefixes
playwright-cli screenshot --filename=1-login.png
playwright-cli screenshot --filename=2-dashboard.png
playwright-cli screenshot --filename=3-settings.png
# Save authenticated session
playwright-cli state-save auth-session.json
# Later, load it in a new session
playwright-cli open http://localhost:8787 --profile=/path/to/profile
playwright-cli state-load auth-session.json
playwright-cli run-code "async page => {
await page.addStyleTag({
content: '* { animation: none !important; transition: none !important; }'
});
}"
playwright-cli screenshot --filename=no-animations.png
# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Capture screenshot
playwright-cli open http://localhost:8787
playwright-cli screenshot --filename=.playwright-cli/page.png
playwright-cli close
# Run accessibility audit
/design-eval:audit-accessibility --imageSource .playwright-cli/page.png --level AA --wcag-version 2.1
# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli
# Capture at multiple viewports
playwright-cli open http://localhost:8787
playwright-cli resize 1280 720
playwright-cli screenshot --filename=.playwright-cli/desktop.png
playwright-cli close
# Check visual consistency
/design-eval:audit-visual-consistency --imageSource .playwright-cli/desktop.png
# Get fresh snapshot
playwright-cli snapshot
# Element refs change after navigation
# Get new snapshot after each navigation
playwright-cli goto http://localhost:8787/new-page
playwright-cli snapshot # Get new element refs
# Wait for content to load
playwright-cli wait-for-load-state networkidle
playwright-cli screenshot
# Get snapshot to verify element refs
playwright-cli snapshot
# Check if button is clickable
playwright-cli run-code "async page => {
return await page.isEnabled('button[type=\"submit\"]');
}"
# Save state explicitly
playwright-cli state-save my-session.json
# Verify state was saved
ls -la my-session.json
# Load in new session
playwright-cli open http://localhost:8787
playwright-cli state-load my-session.json