Audit Tools

15 tools for accessibility, visual regression, change verification, performance, and design system auditing. Registered after calling connect.

audit_a11y

Run an accessibility audit using axe-core.

Parameter	Type	Default	Description
scope	string	—	CSS selector to limit the audit scope
tags	string[]	—	WCAG tags to check (e.g., ["wcag2a", "wcag2aa"])

Returns: Violations grouped by severity (critical, serious, moderate, minor), passes, and incomplete checks.

audit_contrast

Check color contrast ratios against WCAG AA.

Returns:

• Failing elements with computed foreground/background colors and contrast ratios
• Passing count
• Resolves effective background through parent element chain

audit_focus_order

Analyze keyboard focus order and tab sequence.

Returns:

• Tab sequence in order
• Focus traps detected
• Hidden but focusable elements
• Elements with positive tabindex
• Label reference issues

audit_responsive

Capture screenshots at multiple viewport widths.

Parameter	Type	Default	Description
viewports	number[]	[375, 768, 1024, 1440]	Viewport widths in pixels

Returns: Screenshot grid with detected issues (overflow, truncation, small tap targets).

audit_snapshot

Capture a visual baseline for later comparison.

Parameter	Type	Default	Description
name	string	required	Baseline identifier
viewports	number[]	—	Capture at specific viewport widths

Returns: Saved baseline file paths.

audit_diff

Compare the current page against a previously captured baseline. Changed pixels are clustered into regions and each region is attributed to the React/Vue component instance that owns it ("only <Sidebar> changed").

Parameter	Type	Default	Description
name	string	required	Baseline to compare against
threshold	number	0.1	Per-pixel color sensitivity (0-1). Not the pass/fail gate
failThreshold	number	0.1	Pass/fail gate: max percentage of pixels allowed to differ
ignoreRegions	rect[]	—	Viewport-px rects excluded from the diff (dynamic content)
attribution	boolean	true	Attribute diff regions to React/Vue component instances
viewport	number	—	Specific viewport width, or all if omitted

Returns: Diff percentage, pass/fail status against the gate, clustered diff regions, per-region component attribution (component name, instance path, source file when resolvable, and a classification: internal-change, resized, displaced with the component that caused the shift, appeared, disappeared), and a diff overlay image. Attribution covers React and Vue; Svelte/Angular pages return an explicit attribution unavailable flag. Baselines captured before component geometry existed degrade gracefully (unknown motion) — recapture to enable full classification.

audit_tokens

Detect design token drift by comparing computed styles against your token definitions.

Parameter	Type	Default	Description
tokensFile	string	required	Path to JSON token definitions

Returns: Violations with the actual value, expected token, and closest match with CIE76 delta-E distance for colors.

audit_dark_mode

Compare your page in light mode vs dark mode.

Returns:

• hasDarkMode — whether the page responds to prefers-color-scheme: dark
• diffPercentage — pixel difference between modes
• Light screenshot, dark screenshot, and diff image

audit_reduced_motion

Check compliance with prefers-reduced-motion.

Returns: List of CSS animations and transitions found, flagging those that don't respect the media query.

audit_aria_valid

Deep ARIA validation beyond what axe-core covers.

Returns:

• Role validity checks
• Required attribute presence
• Label reference integrity
• aria-hidden issues
• Landmark structure analysis

audit_perf

Measure Core Web Vitals.

Returns:

• LCP (Largest Contentful Paint) — with the LCP element identified
• FCP (First Contentful Paint)
• CLS (Cumulative Layout Shift)
• TTFB (Time to First Byte)
• Rating for each: Good / Needs Improvement / Poor

audit_explain

Synthesize results from multiple audits into a grouped diagnosis.

Parameter	Type	Default	Description
runA11y	boolean	true	Include a11y audit
runContrast	boolean	true	Include contrast check
runAria	boolean	true	Include ARIA validation
tokensFile	string	—	Include token drift check

Returns: Violations grouped by root cause, systemic issues identified, and fixes ranked by impact. Designed for AI consumption.

audit_snapshot_update

Re-capture an existing baseline, replacing the previous version.

Parameter	Type	Default	Description
name	string	required	Baseline to update
viewports	number[]	—	Viewport widths

Returns: What changed before overwriting.

audit_explain_ai

Use an LLM to produce per-issue explanations with root-cause analysis, concrete fix suggestions, and likely file paths. Runs locally with your own key.

Parameter	Type	Default	Description
runA11y	boolean	true	Include a11y audit
runContrast	boolean	true	Include contrast check
runAria	boolean	true	Include ARIA validation
tokensFile	string	—	Include token drift check
sourceMapHints	string	—	Source path prefix hint (e.g. src/components/) to improve file-path inference
maxIssues	number	20	Maximum violations to send to the model
provider	"anthropic" | "openai"	anthropic	LLM backend. openai also covers OpenAI-compatible / open-source servers
baseURL	string	—	OpenAI-compatible base URL (e.g. http://localhost:11434/v1 for Ollama). Implies provider=openai
model	string	per-provider	claude-haiku-4-5-20251001 (anthropic) or gpt-4o-mini (openai)

Returns: A summary string, a top-priority action, and an array of issues each with:

• issue — what is wrong
• rootCause — why it is happening
• fixSuggestion — how to fix it
• likelyFilePath — probable source file (best-effort)
• severity — critical / high / medium / low
• isRegression — whether this looks like a recent introduction

Choosing a provider

Backend	How to select	Key / endpoint
Anthropic (default)	nothing, or provider: "anthropic"	ANTHROPIC_API_KEY
OpenAI	provider: "openai"	OPENAI_API_KEY
OpenRouter / Together / Groq	provider: "openai" + baseURL	that service's key + base URL
Ollama / vLLM / LM Studio / LocalAI (open-source, self-hosted)	provider: "openai" + baseURL (e.g. http://localhost:11434/v1)	usually no key

The OpenAI path speaks the standard /v1/chat/completions contract, so any OpenAI-compatible server works by pointing baseURL at it. Selection precedence: the provider argument → FRONTEND_DEBUGGER_AI_PROVIDER env → an OpenAI signal (baseURL, OPENAI_BASE_URL, or OPENAI_API_KEY with no Anthropic key) → Anthropic.

TIP

This tool is MIT-licensed and runs locally with your own key (or no key, for local servers) — no fee, no account, no gate. See LICENSING.md.

verify_change

Verify a UI change in a single call. On first run (or with update: true) it captures a named combined baseline — visual snapshot + component geometry + component tree + accessibility. On later runs it returns one pass/fail proof artifact: the change is safe only if the visual diff is within tolerance and there are no new accessibility violations. Visual diff regions are attributed to the React/Vue component instance that owns them.

Parameter	Type	Default	Description
name	string	required	Combined baseline name
update	boolean	false	Recapture the baseline instead of comparing
threshold	number	0.1	Per-pixel color sensitivity (0-1). Not the pass/fail gate
failThreshold	number	0.1	Pass/fail gate: max percentage of pixels allowed to differ
ignoreRegions	rect[]	—	Viewport-px rects excluded from the diff (dynamic content)
attribution	boolean	true	Attribute diff regions to React/Vue component instances
viewports	number[]	[1440]	Viewport widths for the visual baseline
viewport	number	—	Compare only this viewport
scope	string	—	CSS selector to scope the a11y audit

Returns: status (baseline-captured / passed / changed), passed, an attribution block (ok / partial / unavailable with the detected framework, a human-readable reason when degraded — e.g. "attribution unavailable: svelte detected" — and per-region summary lines like diff region (50,50 40x30) falls inside <Sidebar> at src/Sidebar.tsx:14 [internal-change]), per-viewport visual results with diff regions, a component-tree delta (added / removed / count-changed components), an accessibility delta (new / resolved rules, worsened / improved), and diff overlay images for any changed viewport. Attribution is explanatory and never affects passed.