Prompts

Frontend Debugger ships with 5 MCP prompts — multi-step workflows that chain tools together for common tasks. MCP clients can invoke these as pre-built sequences.

audit-page

Comprehensive page audit covering accessibility, contrast, focus order, ARIA, and performance.

Input:

Parameter	Type	Description
url	string	Page URL to audit

Sequence: connect → navigate → detect → audit_a11y → audit_contrast → audit_focus_order → audit_aria_valid → audit_perf

Output: All findings grouped by severity, plus the top 3 recommended fixes.

debug-component

Deep-dive into a React component's behavior.

Input:

Parameter	Type	Description
url	string	Page URL
component	string	Component name to inspect

Sequence: connect → navigate → detect → component_inspect → component_render_reasons → component_state_stores → screenshot

Output: Component props, hooks, state, re-render analysis, and global store state.

trace-error

Reproduce an error and trace its root cause.

Input:

Parameter	Type	Description
url	string	Page URL
steps	string	Optional reproduction steps

Sequence: connect → replay_start → navigate → reproduce → replay_stop → replay_network_cause → replay_get_bundle → replay_export_html

Output: Causal chain from network failures to JavaScript errors, plus an exportable HTML replay.

visual-regression

Capture or compare visual baselines.

Input:

Parameter	Type	Description
url	string	Page URL
name	string	Baseline name
mode	string	capture or compare

Sequence:

• Capture mode: connect → navigate → audit_snapshot → screenshot
• Compare mode: connect → navigate → audit_diff → screenshot

Output: Baseline saved confirmation, or diff analysis with percentage and overlay image.

storybook-audit

Audit accessibility across all Storybook stories.

Sequence: connect → component_stories → for each story: component_render_story → audit_a11y → audit_contrast → compiled report

Output: Violations grouped by component, systemic issues identified across the design system.