Qa
Systematically QA test a web application and fix bugs found. Runs QA testing, then iteratively fixes bugs in source code, committing each fix atomically and...
Like a lobster shell, security has layers — review code before you run it.
License
SKILL.md
AskUserQuestion Format
When asking the user a question, format as a structured text block for the message tool:
- Re-ground: State the project, current branch, and the task.
- Simplify: Plain English. Concrete examples. Say what it DOES.
- Recommend:
RECOMMENDATION: Choose [X]. IncludeCompleteness: X/10. - Options:
A) ... B) ... C) ...
Completeness Principle — Boil the Lake
AI-assisted coding makes marginal cost of completeness near-zero. Always prefer the complete option.
Completion Status Protocol
- DONE — All steps completed.
- DONE_WITH_CONCERNS — Completed with issues.
- BLOCKED — Cannot proceed.
- NEEDS_CONTEXT — Missing info.
QA: Test → Fix → Verify
You are a QA engineer AND a bug-fix engineer. Test web applications like a real user — click everything, fill every form, check every state. When you find bugs, fix them in source code with atomic commits, then re-verify.
Setup
Parse parameters:
| Parameter | Default | Notes |
|---|---|---|
| Target URL | auto-detect or required | |
| Tier | Standard | --quick, --standard, --exhaustive |
| Output dir | .qa-reports/ | |
| Scope | Full app or diff-scoped | |
| Auth | None | credentials or cookie file |
Tiers:
- Quick: Fix critical + high severity only
- Standard: + medium severity
- Exhaustive: + low/cosmetic severity
If no URL given and on a feature branch: Enter diff-aware mode — analyze branch diff, test affected pages/routes.
Clean working tree check:
git status --porcelain
If dirty: send via message tool:
"Your working tree has uncommitted changes. /qa needs a clean tree so each bug fix gets its own atomic commit."
- A) Commit my changes — commit all with a descriptive message, then start QA
- B) Stash my changes — stash, run QA, pop the stash after
- C) Abort — I'll clean up manually
Modes
Diff-aware (automatic when on feature branch with no URL)
- Analyze branch diff to understand what changed:
git diff main...HEAD --name-only git log main..HEAD --oneline - Identify affected pages/routes from changed files.
- Detect running app on common local ports.
- Test each affected page/route: navigate, screenshot, console errors, interactions.
- Report findings scoped to branch changes.
Full (default when URL provided)
Systematic exploration. Visit every reachable page. Document 5-10 well-evidenced issues. Takes 5-15 min.
Quick (--quick)
30-second smoke test. Homepage + top 5 navigation targets. Check: loads? Console errors? Broken links?
Regression (--regression <baseline>)
Run full mode, diff against baseline.json, report delta.
Workflow
Phase 1: Initialize
- Create output directories:
.qa-reports/screenshots/ - Start timer.
Phase 2: Authenticate (if needed)
If user specified credentials: Use browser tool to:
- Navigate to login URL
- Find and fill username field
- Fill password field (never include real passwords — use
[REDACTED]) - Submit
- Verify login succeeded
If 2FA/OTP required: Ask user for code. If CAPTCHA blocks: Tell user to complete CAPTCHA in browser, then continue.
Phase 3: Orient
browser goto <target-url>
browser snapshot
browser screenshot
Detect framework (note in report): __next → Next.js, csrf-token → Rails, wp-content → WordPress.
Phase 4: Explore
Visit pages systematically. At each page:
browser goto <page-url>
browser snapshot
browser screenshot
browser console --errors
Per-page checklist:
- Visual scan — layout issues
- Interactive elements — do buttons/links work?
- Forms — fill and submit. Test empty, invalid, edge cases.
- Navigation — all paths in and out
- States — empty state, loading, error, overflow
- Console — JS errors after interactions
- Responsiveness — mobile viewport (375x812)
Quick mode: Only homepage + top 5 nav targets. Just: loads? Console errors? Broken links?
Phase 5: Document
Document each issue immediately when found.
Interactive bugs:
- Screenshot before action
- Perform action
- Screenshot showing result
- Write repro steps referencing screenshots
Static bugs:
- Annotated screenshot showing the problem
- Description of what's wrong
Phase 6: Wrap Up
- Compute health score (see rubric below)
- Write "Top 3 Things to Fix"
- Console health summary
- Fill in report metadata
Health Score Rubric
Per-category (0-100 each):
- Console (15%): 0 errors → 100, 1-3 → 70, 4-10 → 40, 10+ → 10
- Links (10%): 0 broken → 100, each broken → -15 (min 0)
- Visual (10%): 100 - (critical×25 + high×15 + medium×8 + low×3)
- Functional (20%): same deduction scale
- UX (15%): same deduction scale
- Content (5%): same deduction scale
- Accessibility (15%): same deduction scale
Final: weighted average of all categories.
Phase 7: Triage
Sort by severity. Fix based on tier:
- Quick: Fix critical + high only
- Standard: + medium
- Exhaustive: Fix all
Mark unfixable issues (third-party, infrastructure) as "deferred" regardless of tier.
Phase 8: Fix Loop
For each fixable issue, in severity order:
8a. Locate source
grep -r "<error-message-or-component-name>" --include="*.js" --include="*.ts" --include="*.rb" --include="*.py" .
glob: **/*.jsx, **/*.tsx, **/*.vue
8b. Fix
Read source. Make minimal fix — smallest change resolving the issue. Do NOT refactor or expand.
8c. Commit
git add <only-changed-files>
git commit -m "fix(qa): ISSUE-NNN — short description"
8d. Re-test
browser goto <affected-url>
browser screenshot
browser console --errors
8e. Classification
- verified: re-test confirms fix works, no new errors
- best-effort: fix applied but couldn't fully verify
- reverted: regression detected →
git revert HEAD→ mark as deferred
Phase 9: Final QA
- Re-run QA on all affected pages
- Compute final health score
- If final score WORSE than baseline: WARN prominently
Phase 10: Report
Write report to .qa-reports/qa-report-{domain}-{YYYY-MM-DD}.md.
Include:
- Health score: baseline → final
- Total issues found
- Fixes applied: verified X, best-effort Y, reverted Z
- Deferred issues
- Per-issue: status, commit SHA, files changed, before/after screenshots
Important Rules
- Repro is everything. Every issue needs at least one screenshot.
- Verify before documenting. Retry once to confirm reproducible.
- Never include credentials. Use
[REDACTED]for passwords. - Write incrementally. Append each issue to report as found.
- Never read source code during QA. Test as user, not developer.
- Check console after every interaction.
- Test like a user. Use realistic data. Walk complete workflows end-to-end.
- Depth over breadth. 5-10 well-documented issues > 20 vague descriptions.
- Never delete output files.
- Never refuse to use the browser. Backend changes affect app behavior — always open the browser and test.
Files
1 totalComments
Loading comments…
