s-qa

name	s-qa
description	Browser QA with 3 tiers (quick/standard/exhaustive) - screenshots, form tests, responsive checks, atomic fix commits

/s:qa - Browser QA

Run browser-based quality assurance against the running application. Detects issues, captures evidence, and applies atomic fixes.

Prerequisites

1. Browser Tool Detection

Prefer Playwright MCP if available (check for mcp__plugin_playwright_playwright__browser_navigate). If Playwright MCP is not available, ensure the binary exists:

sh ${CLAUDE_PLUGIN_ROOT}/bin/setup-browser.sh

Use ~/.claude-stack/bin/gstack-browse as fallback.

2. Dev Server Detection

Check for a running dev server on common ports in this order:

• http://localhost:3000
• http://localhost:3001
• http://localhost:5173
• http://localhost:8080

Attempt a HEAD request to each. Use the first that responds. If none respond, inform the user:

"No dev server detected on ports 3000, 3001, 5173, or 8080. Start your dev server and try again."

3. Route Discovery

Scan the codebase to build a route list:

• Next.js: app/**/page.{tsx,jsx,ts,js} and pages/**/*.{tsx,jsx,ts,js}
• React Router: grep for <Route path= or createBrowserRouter definitions
• Vite/SPA: check src/router or src/routes
• Fallback: use / as the only route

Tier Selection

Accept a tier flag from the user. Default is --standard.

Flag	Tier	Scope
--quick	Quick	Routes + screenshots + console errors
--standard	Standard	Quick + forms + responsive + health score
--exhaustive	Exhaustive	Standard + edge cases + a11y + performance

---

Quick Tier

1. Navigate to each discovered route.
2. Take a full-page screenshot of each route. Save to a temporary location.
3. Capture all browser console errors and warnings.
4. Produce a summary table:

Route	Screenshot	Console Errors	Console Warnings
/	taken	0	2

Standard Tier (default)

Everything in Quick, plus:

1. Form Interaction Tests - For each form found on a page:
   • Fill all inputs with valid sample data.
   • Submit the form.
   • Check for validation errors, success messages, or network failures.
2. Responsive Checks - For each route, resize viewport and screenshot at:
   • Mobile: 375x812
   • Tablet: 768x1024
   • Desktop: 1440x900
3. Link Verification - Click internal links, verify navigation succeeds (no 404).
4. Health Score Calculation (0-100):
   • Start at 100.
   • Deduct 10 per console error.
   • Deduct 5 per console warning.
   • Deduct 15 per broken link / 404.
   • Deduct 10 per form submission failure.
   • Deduct 5 per responsive layout overflow (horizontal scroll detected).
   • Minimum score: 0.

Exhaustive Tier

Everything in Standard, plus:

1. Edge Case States - For each route, test:
   • Empty state (no data / clear local storage)
   • Error state (block API requests, observe error boundaries)
   • Loading state (throttle network to Slow 3G, capture skeleton/spinner)
2. Accessibility Checks:
   • Color contrast (evaluate window.getComputedStyle on text elements)
   • Form labels (every input must have an associated label or aria-label)
   • Keyboard navigation (Tab through interactive elements, verify focus ring)
   • ARIA landmarks (check for main, nav, header roles)
3. Performance Metrics - Evaluate via window.performance:
   • LCP (Largest Contentful Paint)
   • FID (First Input Delay) approximation
   • CLS (Cumulative Layout Shift)
4. Cross-Browser Notes - Document any webkit-specific CSS, vendor prefixes, or known incompatibilities found in source.

Fix Protocol

When an issue is found and a fix is deterministic (e.g., missing alt text, console error from typo, broken import):

1. Take a "before" screenshot.
2. Apply the minimal fix in source code.
3. Wait for hot-reload or rebuild.
4. Take an "after" screenshot.
5. Create an atomic git commit: fix(qa): {short description of what was fixed}
6. One fix per commit. Do not batch fixes.

If a fix is ambiguous or requires design decisions, add it to the findings table as "manual review needed" and do NOT auto-fix.

Output

Produce a QA report:

## QA Report - {date}
**Tier:** {quick|standard|exhaustive}
**Health Score:** {score}/100
**Routes Tested:** {count}
**Issues Found:** {count} ({auto-fixed} auto-fixed, {remaining} remaining)

### Findings
| # | Route | Issue | Severity | Auto-Fixed | Details |
|---|-------|-------|----------|------------|---------|

### Screenshots
{List of before/after screenshot references}

### Recommendations
{Prioritized list of remaining issues}

Next Step

Suggest: "Run /s:verify to verify all requirements against the current state."