frontend-qa

Local-first frontend QA for React & Next.js. Point frontend-qa at your running app and it drives a real Chromium browser (via Playwright) to find accessibility, performance, console, network, visual, bundle, and static-analysis issues — then writes a structured JSON report you can diff in CI.

Everything runs on your machine. Your source is never uploaded. No cloud, no LLM, no telemetry. Every issue is tagged with how it was found — Measured / Observed / Static Analysis / Heuristic / Inferred — so you never mistake a guess for a measurement.

Status: early release (0.1.x). Output shape may change before 1.0. Docs: https://frontendprobe.vercel.app/

Install

npm install -g frontend-qa
# or run without installing
npx frontend-qa --help

First run downloads a Chromium build via Playwright:

npx playwright install chromium

Quick start

# Scan a running dev server (accessibility, console, network, perf, visual)
frontend-qa scan --url http://localhost:5173

# Analyze a production bundle directory (sizes, heavy modules)
frontend-qa bundle --dir ./dist

# Static analysis of a source tree (no browser)
frontend-qa static --dir ./src

Run frontend-qa <command> --help for the full flag list.

What it checks

| Area | Powered by | What you get | |------|-----------|--------------| | ♿ Accessibility | axe-core | WCAG violations with impact + selector | | ⚡ Performance | Lighthouse | Core Web Vitals & Lighthouse metrics | | 🧭 Runtime | Playwright / Chromium | console errors, failed requests, load timing, screenshots | | 🖼️ Visual | pixelmatch | screenshot diffs against a baseline | | 📦 Bundle | static scan | bundle sizes and heavy modules | | 🔎 Code | ts-morph | static analysis of your source tree |

Reports & privacy

Each run writes a JSON report under .local/frontend-qa/runs/<runId>/report.json. Authorization, Cookie, Set-Cookie, and API-key/token headers are redacted at the collector boundary before anything touches disk — so reports are safe to commit or share.

Programmatic use

import { buildProgram, runCli } from 'frontend-qa';

MCP server (AI clients)

The project also ships a Model Context Protocol (MCP) server that exposes these scans to AI clients like Claude — so an agent can run a QA scan and read the results directly. It lives in the source repository (not yet a standalone npm package).

Links

• 🌐 Docs / live site: https://frontendprobe.vercel.app/
• 📦 npm: https://www.npmjs.com/package/frontend-qa
• 💻 Source: https://github.com/mishra-naman/frontend-Probe

License

MIT © Naman Mishra