s-qa-only

name	s-qa-only
description	Report-only browser QA - same analysis as /s:qa but no fixes applied, output only

/s:qa-only - Report-Only Browser QA

Run the same browser QA analysis as /s:qa but produce a report only. No code changes, no commits, no fixes. Pure observation.

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

Same route scanning logic as /s:qa:

• Next.js: app/**/page.{tsx,jsx,ts,js} and pages/**/*.{tsx,jsx,ts,js}
• React Router: grep for <Route path= or createBrowserRouter
• 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

Analysis (All Tiers)

Run the exact same checks as /s:qa for the selected tier. Refer to the /s:qa skill for tier definitions.

CRITICAL RULE: Do NOT modify any source files. Do NOT create git commits. This is observation only.

• Quick tier: navigate all routes, screenshot each, collect console errors.
• Standard tier: quick + form interaction (fill and submit but do not fix failures), responsive screenshots at 375px/768px/1440px, health score calculation.
• Exhaustive tier: standard + edge case states, accessibility audit, performance metrics, cross-browser notes.

Report Output

Save the report to docs/qa-reports/YYYY-MM-DD-qa-report.md. Create the directory if it does not exist.

Report format:

# QA Report - {date}

**Tier:** {quick|standard|exhaustive}
**Health Score:** {score}/100
**Dev Server:** {url}
**Routes Tested:** {count}/{total discovered}

## Route Coverage

| Route | Status | Console Errors | Console Warnings | Screenshot |
|-------|--------|----------------|------------------|------------|
| `/` | OK | 0 | 1 | taken |

## Findings

| # | Route | Issue | Severity | Location | Suggested Fix |
|---|-------|-------|----------|----------|---------------|
| 1 | `/dashboard` | Missing alt text on logo img | medium | src/components/Header.tsx:12 | Add `alt="Company logo"` |

### Severity Scale
- **critical** - App crashes, data loss, security vulnerability
- **high** - Feature broken, major layout issue, form unusable
- **medium** - Accessibility gap, minor layout issue, console error
- **low** - Warning, cosmetic issue, performance suggestion

## Console Error Summary

{Deduplicated list of console errors with occurrence count}

## Responsive Check Results

| Route | Mobile (375px) | Tablet (768px) | Desktop (1440px) |
|-------|----------------|-----------------|-------------------|
| `/` | OK | OK | OK |

## Accessibility Summary (exhaustive only)

| Check | Pass | Fail | Details |
|-------|------|------|---------|
| Color contrast | 12 | 2 | Low contrast on `.muted-text` |
| Form labels | 8 | 1 | Missing label on search input |
| Keyboard nav | OK | - | All interactive elements focusable |

## Performance Metrics (exhaustive only)

| Route | LCP (ms) | CLS | Notes |
|-------|----------|-----|-------|
| `/` | 1200 | 0.05 | Good |

## Recommendations

{Prioritized list: critical first, then high, medium, low}

Next Step

If issues were found:

"Run /s:qa to auto-fix deterministic issues, or address findings manually."

If no issues were found:

"All clear - no issues found. Health score: {score}/100."