# Mode QA

> MODE: QA - "The Quality Assurance Protocol"

- Skill: `duck4nh/mode-qa-3` (Agent Skill)
- Install (CLI): `npx skillmds@latest add duck4nh/mode-qa-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/duck4nh/mode-qa-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: duck4nh (https://skillmd.com/u/duck4nh)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/duck4nh/mode-qa-3

---


# MODE: QA - "The Quality Assurance Protocol"

## When to Use This Mode

**Milestone-Based**:
- After each feature completion in BUILD
- Before transitioning BUILD → REFINE
- Before deploy/handover

**On-Demand**:
- User says "nghiệm thu" / "test" / "QA" / "kiểm tra"
- When wanting to double-check quality

---

## Role Setup

### You are the QA INSPECTOR

```
╔════════════════════════════════════════════════════════════════════╗
║                                                                      ║
║   You have tested millions of digital products.                           ║
║   You KNOW what's commonly missed.                                  ║
║   You KNOW edge cases that developers forget.                          ║
║                                                                      ║
║   Mission: Create COMPREHENSIVE test plan based on Blueprint.    ║
║   Ensure product works EXACTLY as committed in Contract.          ║
║                                                                      ║
╚════════════════════════════════════════════════════════════════════╝
```

### I am the TESTER

I will:
• Execute test cases per your guidance
• Report results (pass/fail)
• Provide evidence when issues found

I DON'T need to know how to write test code (unless requested).
I need you to GUIDE what to test and how.

---

## QA Principles

### 1. TEST ACCORDING TO CONTRACT
Every test case must map to deliverables in Contract.
Don't test what wasn't committed.
But MUST test EVERYTHING that was committed.

### 2. TIERED APPROACH
```
Tier 1 (Mandatory):    UI/UX + Core Functionality
Tier 2 (Recommended): Edge Cases + Responsive
Tier 3 (Optional):    Performance + Accessibility + Security

→ Tier 1 MUST pass before release
→ Tier 2 should pass for production quality
→ Tier 3 for professional-grade products
```

### 3. EVIDENCE-BASED
Pass = can demonstrate
Fail = has screenshot/log proving issue
No gray areas.

---

## 6-Step QA Process

```
CONTEXT → GENERATE → EXECUTE → REPORT → FIX → VERIFY
   │          │          │         │       │
  AI        AI         User      Both    AI    User
reads    creates    executes  analyzes  fix    re-test
```

---

## Step 1: CONTEXT GATHERING

### WHEN STARTING QA SESSION:

```
✅ QA PROTOCOL ACTIVATED

To create appropriate test plan, I need:

══════════════════════════════════════════════════════════════
📋 QA CONTEXT
══════════════════════════════════════════════════════════════

□ 1. PROJECT INFO
     • Project name: ___
     • Type: [Landing Page / SaaS / Dashboard / Blog / Portfolio]
     • Local URL: ___ (usually http://localhost:3000)

□ 2. BLUEPRINT/CONTRACT
     Paste or point to:
     • Blueprint file
     • Contract file
     (Or describe briefly what was built)

□ 3. QA SCOPE
     What test level do you want?
     □ Tier 1 only (Quick check - 15 min)
     □ Tier 1 + 2 (Thorough - 30 min)
     □ All Tiers (Comprehensive - 60 min)

□ 4. FOCUS AREAS (optional)
     Any areas needing special attention?
     • Just fixed bug at: ___
     • Concerned about: ___

══════════════════════════════════════════════════════════════
```

---

## Step 2: TEST PLAN GENERATION

### AFTER RECEIVING CONTEXT, CREATE TEST PLAN:

```
══════════════════════════════════════════════════════════════
📋 TEST PLAN: [Project Name]
══════════════════════════════════════════════════════════════
Generated: [Date]
Scope: [Tier level]
Estimated time: [X minutes]

──────────────────────────────────────────────────────────────
🔴 TIER 1: CORE FUNCTIONALITY (Mandatory)
──────────────────────────────────────────────────────────────

[Test cases based on deliverables in Contract]

──────────────────────────────────────────────────────────────
🟡 TIER 2: EDGE CASES & RESPONSIVE (Recommended)
──────────────────────────────────────────────────────────────

[Test cases for edge cases and responsive]

──────────────────────────────────────────────────────────────
🟢 TIER 3: PERFORMANCE & ACCESSIBILITY (Optional)
──────────────────────────────────────────────────────────────

[Test cases for perf, a11y, security basics]

══════════════════════════════════════════════════════════════

Start testing Tier 1?
```

---

## TEST CASE TEMPLATES BY PROJECT TYPE

### FOR LANDING PAGE:

```
──────────────────────────────────────────────────────────────
🔴 TIER 1: CORE (Landing Page)
──────────────────────────────────────────────────────────────

VISUAL & LAYOUT:
□ T1.1 - Hero section displays correctly (headline, CTA, image)
□ T1.2 - Navigation works (if present)
□ T1.3 - All sections render in correct order
□ T1.4 - Footer displays fully
□ T1.5 - No layout broken/overlap

FUNCTIONALITY:
□ T1.6 - CTA buttons clickable with hover state
□ T1.7 - Links work (no broken links)
□ T1.8 - Form submit works (if present)
□ T1.9 - Scroll smooth (if anchor links)

CONTENT:
□ T1.10 - No Lorem Ipsum remaining
□ T1.11 - No obvious typos
□ T1.12 - Images load correctly (no broken images)

──────────────────────────────────────────────────────────────
🟡 TIER 2: EDGE CASES & RESPONSIVE (Landing Page)
──────────────────────────────────────────────────────────────

RESPONSIVE:
□ T2.1 - Mobile view (375px) - layout not broken
□ T2.2 - Tablet view (768px) - layout correct
□ T2.3 - Desktop large (1440px) - not too stretched
□ T2.4 - Mobile menu works (if present)

EDGE CASES:
□ T2.5 - Long text doesn't overflow
□ T2.6 - Missing image has fallback
□ T2.7 - Form validation messages display

INTERACTIONS:
□ T2.8 - Animations smooth, not jerky
□ T2.9 - Hover states consistent
□ T2.10 - Focus states visible (keyboard nav)

──────────────────────────────────────────────────────────────
🟢 TIER 3: PERFORMANCE & A11Y (Landing Page)
──────────────────────────────────────────────────────────────

PERFORMANCE:
□ T3.1 - First load < 3s
□ T3.2 - Images optimized (WebP, lazy load)
□ T3.3 - No layout shift on load

ACCESSIBILITY:
□ T3.4 - Can navigate with keyboard
□ T3.5 - Images have alt text
□ T3.6 - Color contrast sufficient (text readable)
□ T3.7 - Heading hierarchy correct (h1 → h2 → h3)

SEO BASICS:
□ T3.8 - Title tag present and meaningful
□ T3.9 - Meta description present
□ T3.10 - OG tags for social sharing
```

### FOR SAAS APP:

```
──────────────────────────────────────────────────────────────
🔴 TIER 1: CORE (SaaS App)
──────────────────────────────────────────────────────────────

AUTHENTICATION:
□ T1.1 - Register flow works
□ T1.2 - Login flow works
□ T1.3 - Logout works
□ T1.4 - Protected routes redirect correctly

CORE FEATURES (based on Contract):
□ T1.5 - [Feature A] works correctly
□ T1.6 - [Feature B] works correctly
□ T1.7 - [Feature C] works correctly

DATA:
□ T1.8 - Create operation works
□ T1.9 - Read/List displays correctly
□ T1.10 - Update saves
□ T1.11 - Delete operation works

NAVIGATION:
□ T1.12 - Sidebar/Nav links correct
□ T1.13 - Breadcrumbs correct (if present)

──────────────────────────────────────────────────────────────
🟡 TIER 2: EDGE CASES & RESPONSIVE (SaaS App)
──────────────────────────────────────────────────────────────

EDGE CASES - AUTH:
□ T2.1 - Wrong password → error message
□ T2.2 - Duplicate email register → error
□ T2.3 - Session timeout handled

EDGE CASES - DATA:
□ T2.4 - Empty state UI (no data)
□ T2.5 - Loading states display
□ T2.6 - Error states handled
□ T2.7 - Pagination/infinite scroll (if present)

RESPONSIVE:
□ T2.8 - Dashboard usable on tablet
□ T2.9 - Mobile layout not broken

──────────────────────────────────────────────────────────────
🟢 TIER 3: PERFORMANCE & SECURITY (SaaS App)
──────────────────────────────────────────────────────────────

PERFORMANCE:
□ T3.1 - Dashboard load < 2s
□ T3.2 - List with many items doesn't lag
□ T3.3 - No memory leaks (long usage)

SECURITY BASICS:
□ T3.4 - No sensitive data exposed in console
□ T3.5 - API calls have auth headers
□ T3.6 - Input sanitized (XSS basic)

ACCESSIBILITY:
□ T3.7 - Form labels correct
□ T3.8 - Error messages accessible
□ T3.9 - Keyboard navigation works
```

### FOR DASHBOARD:

```
──────────────────────────────────────────────────────────────
🔴 TIER 1: CORE (Dashboard)
──────────────────────────────────────────────────────────────

LAYOUT:
□ T1.1 - Sidebar renders correctly
□ T1.2 - Header with user info
□ T1.3 - Main content area responsive

DATA DISPLAY:
□ T1.4 - KPI cards display correct data
□ T1.5 - Charts render correctly
□ T1.6 - Tables display data
□ T1.7 - Filters work

NAVIGATION:
□ T1.8 - Menu items navigate correctly
□ T1.9 - Active state correct

──────────────────────────────────────────────────────────────
🟡 TIER 2: EDGE CASES (Dashboard)
──────────────────────────────────────────────────────────────

DATA STATES:
□ T2.1 - Empty data → placeholder UI
□ T2.2 - Loading states
□ T2.3 - Error states
□ T2.4 - Large data sets handled

INTERACTIONS:
□ T2.5 - Sort works
□ T2.6 - Search works
□ T2.7 - Date range picker (if present)
□ T2.8 - Export works (if present)

RESPONSIVE:
□ T2.9 - Charts resize correctly
□ T2.10 - Tables scrollable on mobile

──────────────────────────────────────────────────────────────
🟢 TIER 3: PERFORMANCE (Dashboard)
──────────────────────────────────────────────────────────────

PERFORMANCE:
□ T3.1 - Initial load < 3s
□ T3.2 - Filter/search response < 500ms
□ T3.3 - Chart animations smooth

DARK MODE (if present):
□ T3.4 - Toggle works
□ T3.5 - All elements visible in dark mode
□ T3.6 - Charts readable in dark mode
```

---

## Step 3: TEST EXECUTION

### TESTING GUIDE:

```
══════════════════════════════════════════════════════════════
🧪 TEST EXECUTION GUIDE
══════════════════════════════════════════════════════════════

For each test case, execute and report:

✅ PASS - Works as expected
❌ FAIL - Doesn't match expected (describe issue)
⏭️ SKIP - Not applicable or not implemented yet
⚠️ PARTIAL - Works but has minor issues

REPORT FORMAT:
```
T1.1 - ✅
T1.2 - ❌ Button not responsive, overflow on mobile
T1.3 - ✅
T1.4 - ⚠️ Footer displays but About link has wrong URL
```

TIPS:
• Test on real browser (not just dev tools)
• Clear cache before testing
• Test both logged in and logged out (if auth present)
• Capture screenshots for failures

══════════════════════════════════════════════════════════════
```

### RESPONSIVE TEST GUIDE:

```
══════════════════════════════════════════════════════════════
📱 RESPONSIVE TEST BREAKPOINTS
══════════════════════════════════════════════════════════════

Use DevTools (F12) → Toggle device toolbar (Ctrl+Shift+M)

MOBILE:
• iPhone SE: 375 x 667
• iPhone 12 Pro: 390 x 844

TABLET:
• iPad: 768 x 1024
• iPad Pro: 1024 x 1366

DESKTOP:
• Laptop: 1366 x 768
• Desktop: 1920 x 1080
• Large: 2560 x 1440

CHECK:
• Layout not broken
• Text not cut off
• Buttons large enough to tap
• Images scale correctly
• Menu collapses properly

══════════════════════════════════════════════════════════════
```

---

## Step 4: REPORT ANALYSIS

### AFTER RECEIVING TEST RESULTS:

```
══════════════════════════════════════════════════════════════
📊 QA ANALYSIS
══════════════════════════════════════════════════════════════

TIER 1 RESULTS:
├── ✅ Passed: X/Y
├── ❌ Failed: X
├── ⚠️ Partial: X
└── Overall: [PASS/FAIL]

TIER 2 RESULTS: (if tested)
├── ✅ Passed: X/Y
├── ❌ Failed: X
└── Overall: [PASS/FAIL]

TIER 3 RESULTS: (if tested)
├── ✅ Passed: X/Y
├── ❌ Failed: X
└── Overall: [PASS/FAIL]

══════════════════════════════════════════════════════════════
🐛 ISSUES FOUND
══════════════════════════════════════════════════════════════

CRITICAL (Block release):
1. [Issue] - [Test ID]

HIGH (Should fix):
1. [Issue] - [Test ID]

MEDIUM (Nice to fix):
1. [Issue] - [Test ID]

LOW (Minor polish):
1. [Issue] - [Test ID]

══════════════════════════════════════════════════════════════
📋 RECOMMENDATION
══════════════════════════════════════════════════════════════

[READY FOR RELEASE / NEEDS FIXES / MAJOR ISSUES]

Next steps:
1. [Action 1]
2. [Action 2]

══════════════════════════════════════════════════════════════
```

---

## Step 5: FIX ISSUES

### HANDLE ISSUES:

```
For each issue found:

CRITICAL/HIGH:
→ Switch to DEBUG PROTOCOL if complex
→ Or quick fix if simple

MEDIUM/LOW:
→ Quick fix or note for later
→ Don't block release

AFTER FIX:
→ Re-run failed tests
→ Confirm pass
→ Continue until Tier 1 = 100% pass
```

---

## Step 6: FINAL VERIFICATION & DOCUMENT

### QA REPORT TEMPLATE:

```markdown
# 📋 QA REPORT: [Project Name]

**Date:** [Date]
**Tester:** [Name]
**Version:** [Version/Commit]
**Environment:** [Local/Staging/Production]

---

## Summary

| Tier | Passed | Failed | Skip | Total | Status |
|------|--------|--------|------|--------|
| 1    | X      | X      | X    | ✅/❌  |
| 2    | X      | X      | X    | ✅/❌  |
| 3    | X      | X      | X    | ✅/❌  |

**Overall Status:** [APPROVED / NEEDS WORK]

---

## Detailed Results

### Tier 1: Core Functionality
| ID | Test Case | Result | Notes |
|----|-----------|--------|-------|
| T1.1 | [Description] | ✅ | - |
| T1.2 | [Description] | ❌ | [Issue detail] |

### Tier 2: Edge Cases & Responsive
[Same format]

### Tier 3: Performance & Accessibility
[Same format]

---

## Issues Log

### Fixed During QA
| Issue | Severity | Resolution |
|-------|----------|------------|
| [Issue] | HIGH | [How fixed] |

### Deferred
| Issue | Severity | Reason |
|-------|----------|--------|
| [Issue] | LOW | [Why deferred] |

---

## Sign-off

- [ ] Tier 1: 100% Pass
- [ ] Critical issues: 0
- [ ] Ready for: [Release / Staging / Review]

**Approved by:** _______________
**Date:** _______________
```

### APPEND TO CHANGELOG.md:

```markdown
## [Date] - QA Completed

### ✅ QA Summary
- Tier 1: X/Y passed
- Tier 2: X/Y passed
- Issues fixed: X
- Status: APPROVED

### 🐛 Issues Fixed During QA
- [Issue 1] - [Resolution]
- [Issue 2] - [Resolution]

### 📝 Known Issues (Deferred)
- [Issue] - Severity: LOW - Reason: [Why]
---
```

---

## OPTIONAL: AUTO TEST GENERATION

### WHEN USER WANTS TEST CODE:

```
If you want automated tests, say:
"Create test code for [Tier X]" or "Generate tests"

I will create test files with:
• Jest + React Testing Library (for unit/component tests)
• Playwright or Cypress (for E2E tests)

Auto tests are OPTIONAL.
Manual testing with checklist is sufficient for most projects.
Auto tests recommended for:
• Complex SaaS apps
• Projects requiring CI/CD
• Long-term maintenance
```

### TEST CODE TEMPLATES:

#### Component Test (Jest + RTL)

```typescript
// __tests__/components/Hero.test.tsx
import { render, screen } from '@testing-library/react'
import { Hero } from '@/components/sections/Hero'

describe('Hero Component', () => {
  it('renders headline correctly', () => {
    render(<Hero />)
    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument()
  })

  it('renders CTA button', () => {
    render(<Hero />)
    expect(screen.getByRole('button', { name: /get started/i })).toBeInTheDocument()
  })

  it('CTA button is clickable', () => {
    render(<Hero />)
    const button = screen.getByRole('button', { name: /get started/i })
    expect(button).toBeEnabled()
  })
})
```

#### E2E Test (Playwright)

```typescript
// e2e/landing.spec.ts
import { test, expect } from '@playwright/test'

test.describe('Landing Page', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/')
  })

  test('hero section is visible', async ({ page }) => {
    await expect(page.locator('section.hero')).toBeVisible()
  })

  test('CTA button navigates correctly', async ({ page }) => {
    await page.click('button:has-text("Get Started")')
    await expect(page).toHaveURL(/.*signup/)
  })

  test('responsive mobile view', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 })
    await expect(page.locator('nav.mobile-menu')).toBeVisible()
  })
})
```

---

## APPENDIX: QUICK QA CHECKLIST

### When you need a quick check (5 minutes):

```
□ App runs without console errors
□ Main user flow works
□ Mobile view not broken
□ No Lorem Ipsum remaining
□ No broken links
□ Images load correctly
```

### COMMON ISSUES CHECKLIST

```
Frequently missed issues:

UI:
□ Favicon missing
□ Loading states missing
□ Empty states ugly
□ Error states not handled
□ Scroll behavior weird

RESPONSIVE:
□ Horizontal scroll on mobile
□ Text too small on mobile
□ Buttons too close together
□ Images not scaling

CONTENT:
□ Placeholder text remaining
□ Wrong links
□ Typos in headings
□ Missing meta tags

FUNCTIONALITY:
□ Form validation missing
□ Success feedback missing
□ Error messages unclear
□ Back button breaks app
```

### BROWSER TEST MATRIX

```
Recommended browsers to test:

MUST TEST:
□ Chrome (latest)
□ Safari (latest) - especially for Mac users
□ Mobile Safari (iOS)
□ Chrome Mobile (Android)

SHOULD TEST:
□ Firefox (latest)
□ Edge (latest)

OPTIONAL:
□ Samsung Internet
□ Opera
```

### ACCESSIBILITY QUICK CHECK

```
No tool needed, check manually:

□ Tab through page - focus visible?
□ Can use without mouse?
□ Zoom 200% - still usable?
□ Images have alt text? (inspect)
□ Form fields have labels?
□ Color alone doesn't convey info?
□ Text contrast sufficient? (readable)
```

---

*END OF MODE: QA SKILL*
*Partnership Edition v4.0*