Skip to main content
affpapa.org
RU EN
skill CX Codex

browser-qa · c0x12c — Claude Code skill: what it does, how to install

Drives Playwright in Chromium to test pages, interactive UI elements, and responsive layouts before merging pull requests or deploying.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add c0x12c/ai-toolkit --skill browser-qa -a claude-code
Open on GitHub

What browser-qa does

The skill directs an assistant to inspect client-side applications using headless Chromium. It traverses discovered views, tracking HTTP response codes, missing assets, and uncaught script exceptions inside console.error. Testing covers two distinct profiles: 1280px desktop displays and 375px mobile viewports with touch event emulation enabled.

During execution, the tool verifies core user interactions without running persistent daemons. It clicks buttons, verifies modal visibility, confirms navigation links, and checks form validation logic. Any failed step captures a screenshot to document regressions accurately.

On applications running live websockets or recurring polling requests, standard networkidle listeners freeze execution indefinitely, which requires switching checks to domcontentloaded or explicit element selectors. The skill delivers a structured breakdown of failures first without altering codebase files automatically.

What it helps with

  • inspect web pages for broken network requests and console errors
  • verify layout consistency on 1280px and 375px viewports
  • validate interactive buttons, modal dialogs, and form submissions
  • capture failure screenshots during pre-release smoke testing

Example prompts for the agent

  • Run browser-qa on the local frontend build to inspect responsive layouts and console issues
  • Use browser-qa to verify form validation and check for broken navigation links before opening a PR

How to install browser-qa

1Skills CLI (Vercel)

npx skills add c0x12c/ai-toolkit --skill browser-qa -a claude-code

2Manually: put the files in place

~/.claude/skills/browser-qa/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/browser-qa/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about browser-qa

How to install browser-qa in Claude Code?

Run npx skills add c0x12c/ai-toolkit --skill browser-qa -a claude-code. The file will be written to ~/.claude/skills/browser-qa/SKILL.md.

What does the browser-qa skill do?

It spins up Playwright to navigate application routes, interact with buttons and forms, test responsive viewports, and generate an evaluation report with failure screenshots.

Does browser-qa report framework console warnings?

No, non-critical warnings such as React hydration notices are skipped. The skill flags actual network failures and explicit console.error events only.

Similar skills

All skills for Testing and QA →

browser-qa by other authors comes first.

browser-qa affaan-m Drives a live page through a browser MCP: console errors, Core Web Vitals, forms, screenshots at three widths and axe-core. Ends with a SHIP or DO NOT SHIP verdict. CX Codex +1 4,900installs improve-codebase-architecture Matt Pocock This skill scans a codebase for architectural friction, then builds a visual HTML report with refactoring candidates. Use it before a deeper architecture review. 1,163,035installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs tdd Matt Pocock Guides the red-green TDD loop: ensures tests are written first, keep them at public interfaces, and avoid coupling to implementation details. 1,141,062installs skill-creator official anthropics Creates and refines skills, then tests them with prompts, evaluations, and performance checks. 414,180installs agent-browser vercel-labs A CLI skill for browser control: it opens pages, fills forms, clicks buttons, and tests web apps. Use it when an agent needs to act inside a website. CX Codex +1 1,200,000installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs

From the same set33

database-table-creator This skill guides an end-to-end table addition, from a SQL migration to Kotlin repository tests. Use it when a project needs a new table or entity. CX Codex +1 ★ 109repo stars database-patterns Hands your agent a fixed set of database rules: column types, UUID keys, soft deletes and migration templates. Useful when it writes tables or repositories. CX Codex +1 ★ 109repo stars content-engine Turns an article, demo, or raw thought into tailored posts for X, LinkedIn, YouTube, and newsletters. Enforces platform rules and sharp hooks. CX Codex +1 ★ 109repo stars competitive-teardown Research a named competitor or compare several products, businesses, and user complaints. Use the skill before building or preparing a competition slide. CX Codex +1 ★ 109repo stars ci-cd-patterns A skill with GitHub Actions templates, PR checks and deployment steps. Handy when CI breaks or you are wiring it up from scratch. CX Codex +1 ★ 109repo stars brainstorm Turn a topic or rough concept into project ideas, then screen them for demand and risk. Useful when you want to explore a space before choosing what to test. CX Codex +1 ★ 109repo stars backend-api-design Tells the agent how to shape RPC-style APIs: a thin controller, a manager holding business logic, a repository for data access. Useful when adding endpoints or auditing existing ones. CX Codex +1 ★ 109repo stars article-writing Drafts long-form guides, technical tutorials, and blog posts without robotic filler. It cuts hollow opening paragraphs and keeps explanations tied to concrete evidence. CX Codex +1 ★ 109repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor