Skip to main content
hc
Submit
collectionsSource-backedReview first Safety ✓ Privacy ✓

Accessibility QA For AI-Built Interfaces

Collection for validating AI-generated UI: computer-use GUI QA skill, DevTools and Playwright MCP servers, accessibility hook, and frontend visual QA command for AI-built interfaces.

by kiannidev·added 2026-06-17·
Claude Code
HarnessClaude Code
Bundle:5 items
Review first — review before installing

Open the source and read safety notes before installing.

Safety notes

  • Browser automation can submit forms or trigger side effects—use staging URLs.
  • Computer-use flows may interact with real desktop applications—scope carefully.

Privacy notes

  • Screenshots and DOM snapshots may capture user data—scrub before sharing.

Prerequisites

  • Local or preview environment for AI-generated UI—not production first.
  • WCAG target agreed with design stakeholders.

Schema details

Install type
copy
Troubleshooting
No
Collection metadata
Items
5 entries
Estimated setup
70 minutes
Difficulty
intermediate
Included entries
hooks/accessibility-checkercommands/frontend-visual-qaskills/claude-code-computer-use-gui-qa-capability-packmcp/chrome-devtools-mcp-servermcp/playwright-mcp-server
Installation order
accessibility-checkerfrontend-visual-qaclaude-code-computer-use-gui-qa-capability-packchrome-devtools-mcp-serverplaywright-mcp-server
Full copyable content
Run accessibility-checker on AI-generated markup, validate with frontend-visual-qa, then add DevTools and Playwright MCP plus computer-use GUI QA for interactive checks.

About this resource

What this collection sets up

Focuses on AI-generated interface QA (computer-use and visual validation) rather than general frontend test harness setup alone.

Source Verification Notes

Verified on 2026-06-17:

Layer Source
WCAG checks W3C WCAG 2.1 quick reference
Visual QA command Claude Code frontend visual QA workflow
Computer-use GUI QA code.claude.com computer-use documentation
Browser MCP servers Playwright and Chrome DevTools MCP entry docs

Duplicate Check

Distinct from frontend-qa-accessibility-workflow (broader Storybook/BrowserStack bundle). This collection emphasizes AI-built UI validation with computer-use and visual QA command steps.

Editorial Disclosure

Curated bundle by kiannidev linking existing source-backed HeyClaude entries.

#accessibility#ai-built-ui#qa#playwright

Source citations

Add this badge to your README

Show that Accessibility QA For AI-Built Interfaces is listed on HeyClaude. Paste this Markdown into your README — it renders the badge and links back to this page.

Listed on HeyClaude
[![Listed on HeyClaude](https://heyclau.de/badge/collections/accessibility-qa-for-ai-built-interfaces.svg)](https://heyclau.de/entry/collections/accessibility-qa-for-ai-built-interfaces)

How it compares

Accessibility QA For AI-Built Interfaces side by side with 3 alternatives on trust, install, platform support, and disclosed safety notes — all from reviewed registry metadata.

FieldAccessibility QA For AI-Built Interfaces

Collection for validating AI-generated UI: computer-use GUI QA skill, DevTools and Playwright MCP servers, accessibility hook, and frontend visual QA command for AI-built interfaces.

Open dossier 		Accessibility Checker - Claude Code Hooks

Automated accessibility testing and compliance checking for web applications following WCAG 2.1 and WCAG 2.2 guidelines. This hook automatically runs accessibility scans on HTML files after they are written or edited, using axe-core for comprehensive WCAG compliance testing.

Open dossier 		Playwright MCP Server for Claude

Official Microsoft Playwright MCP server that lets Claude drive a real browser through Playwright's accessibility tree for fast, deterministic web automation and testing.

Open dossier 		/frontend-visual-qa - Chrome Design Verification Runbook

Community slash command runbook for frontend visual QA using documented Claude Code Chrome integration workflows: enable /chrome, open a local page, read console messages, and follow the design verification checklist from the Chrome integration guide.

Open dossier
Trust
Install riskReview firstReview firstReview firstReview first
Notes Safety ✓ Privacy ✓ Safety · Privacy · Safety ✓ Privacy ✓ Safety ✓ Privacy ✓
Categorycollectionshooksmcpcommands
Sourcesource-backedsource-backedsource-backedsource-backed
AuthorkiannidevJSONboredMicrosoftkiannidev
Added2026-06-172025-09-192026-06-022026-06-16
Platforms
Claude Code
Claude Code
Claude CodeClaude Desktop
Claude Code
Source repo————
Safety notes✓Browser automation can submit forms or trigger side effects—use staging URLs. Computer-use flows may interact with real desktop applications—scope carefully.— missing✓Launches and controls a real browser process that can navigate to arbitrary URLs and submit forms on your behalf. Treat any site the agent visits as untrusted; only allow automation against pages and actions you intend to run. Persisted browser profiles can keep cookies and logged-in sessions between runs, so isolate sensitive accounts.✓Chrome integration runs in a visible browser with your logged-in session; avoid production admin flows. Handle login pages and CAPTCHAs manually when the integration pauses.
Privacy notes✓Screenshots and DOM snapshots may capture user data—scrub before sharing.— missing✓Page content, form input, and accessibility snapshots from visited sites are returned to the model context. Avoid driving the browser through pages that contain production credentials or private user data unless the profile is isolated.✓Console logs and screenshots may include staging data; redact before external sharing.
Prerequisites
  • Local or preview environment for AI-generated UI—not production first.
  • WCAG target agreed with design stakeholders.
— none listed
  • Node.js 18+ and npx available (verify with: npx --version)
  • Claude Code or Claude Desktop with MCP support
  • Internet access for the first run, which downloads the Playwright browser binaries
  • Claude Code 2.0.73+ and Claude in Chrome extension 1.0.36+ on Chrome or Edge.
  • Local dev server reachable from the operator browser session.
Install—
mkdir -p .claude/hooks && touch .claude/hooks/accessibility-checker.sh && chmod +x .claude/hooks/accessibility-checker.sh
claude mcp add playwright -- npx @playwright/mcp@latest
/frontend-visual-qa <route-or-host>
Config—
{
  "hooks": {
    "postToolUse": {
      "script": "./.claude/hooks/accessibility-checker.sh",
      "matchers": [
        "write",
        "edit"
      ]
    }
  }
}
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ],
      "type": "stdio"
    }
  }
}
—
Citations
ClaimUnclaimedUnclaimedUnclaimedUnclaimed

Signals

Loading live community signals…

More like this, weekly

A short, calm digest of reviewed Claude resources. Unsubscribe any time.