QA Criteria Validator

Purpose

Validate that a feature implementation meets all acceptance criteria from its specification, covering functional requirements, UI/UX compliance, accessibility (WCAG AA), performance benchmarks, security requirements, test coverage, and error handling. This skill produces a structured validation report with pass/fail status and actionable recommendations.

When to Use

• •Before marking a feature as complete
• •During code review of feature branches
• •Before production release
• •When verifying bug fixes meet their acceptance criteria
• •As part of sprint review or QA sign-off

Process

Step 1: Review Requirements

1. •Locate the feature specification or requirements document
2. •Extract all acceptance criteria (functional and non-functional)
3. •Note performance targets, security requirements, and edge cases
4. •Identify UI/UX specifications and design references

Example Acceptance Criteria:

## Acceptance Criteria

### Functional
- [ ] User can search resources by keyword
- [ ] Results display within 2 seconds
- [ ] Each result shows: title, description, status
- [ ] Empty state shown when no results match
- [ ] Error state shown on API failure

### Non-Functional
- [ ] WCAG AA compliant
- [ ] Responsive (mobile, tablet, desktop)
- [ ] Test coverage > 90%
- [ ] Bundle size impact < 50KB

Step 2: Functional Validation

Test each acceptance criterion individually and record the result.

const functionalValidation = {
  feature: 'Resource Search',
  criteriaChecks: [
    {
      criterion: 'User can search resources by keyword',
      status: 'pass',  // pass | fail | partial
      evidence: 'Tested with 5 different keywords, all returned correct results',
      issues: [],
    },
    {
      criterion: 'Results display within 2 seconds',
      status: 'fail',
      evidence: 'Average response time: 3.5 seconds',
      issues: ['Database query needs optimization', 'Consider adding an index'],
    },
    {
      criterion: 'Empty state shown when no results',
      status: 'pass',
      evidence: 'Tested with non-matching keyword, empty state displayed correctly',
      issues: [],
    },
  ],
};

Manual test case template:

### Test Case: Basic Search

**Steps:**
1. Navigate to the search page
2. Enter "test keyword" in the search box
3. Click the search button

**Expected:**
- Results display within 2 seconds
- At least 1 result shown
- Each result has title, description, status

**Actual:**
[Document what actually happened]

**Status:** PASS / FAIL / PARTIAL

Step 3: UI/UX Validation

Visual compliance checklist:

• • Layout matches design specification
• • Colors follow the design system
• • Typography is consistent
• • Spacing and padding are correct
• • Hover, focus, active, and disabled states are styled
• • Loading states are implemented
• • Animations are smooth and purposeful

Responsive design:

• • Works on mobile (320px+)
• • Works on tablet (768px+)
• • Works on desktop (1024px+)
• • Touch targets are at least 44x44px
• • Text remains readable at all sizes

Step 4: Accessibility Validation

WCAG AA checklist:

Perceivable:

• • All images have descriptive alt text
• • Color contrast >= 4.5:1 (normal text)
• • Color contrast >= 3:1 (large text >= 18px)
• • Color is not the sole indicator of information
• • Text resizable to 200% without content loss

Operable:

• • All functionality is keyboard accessible
• • Tab order is logical
• • Focus indicators are visible
• • No keyboard traps exist
• • Skip-to-main-content link is present

Understandable:

• • Language attribute set on HTML element
• • Form labels are associated with inputs
• • Error messages are clear and helpful
• • Navigation is consistent across pages

Robust:

• • Valid HTML (no errors)
• • ARIA attributes used correctly
• • Works with screen readers
• • No JavaScript console errors

Automated testing:

# Run accessibility checks
npx pa11y http://localhost:3000/search
npx lighthouse http://localhost:3000/search --only-categories=accessibility

Step 5: Performance Validation

• • FCP (First Contentful Paint) < 1.8s
• • LCP (Largest Contentful Paint) < 2.5s
• • CLS (Cumulative Layout Shift) < 0.1
• • FID (First Input Delay) < 100ms
• • API responses < 2s (p95)
• • Database queries < 100ms
• • No memory leaks detected
• • Bundle size impact within budget

Step 6: Security Validation

• • Protected endpoints require authentication
• • Users can only access their own resources
• • All user inputs are validated server-side
• • No XSS vulnerabilities
• • CSRF protection is enabled
• • No sensitive data in error messages
• • Security headers are set
• • Dependencies have no known critical vulnerabilities

Step 7: Test Coverage Validation

• • Lines coverage > 90%
• • Functions coverage > 90%
• • Branches coverage > 90%
• • Unit tests for business logic
• • Integration tests for service interactions
• • Component tests for UI elements
• • E2E tests for critical user paths

Step 8: Error Handling Validation

• • Network timeout handled gracefully
• • Offline state detected and communicated
• • Retry mechanism available for transient failures
• • Form validation errors displayed inline
• • Error messages are helpful and specific
• • 500 errors show a generic user-friendly message
• • 404 page exists with navigation options

Validation Report Template

# QA Validation Report: [Feature Name]

**Date:** YYYY-MM-DD
**Feature:** [Feature Name]
**Specification:** [Link or reference]

## Summary

**Overall Status:** PASS / FAIL / PASS WITH ISSUES

## Functional Validation

| Criterion | Status | Evidence | Issues |
|-----------|--------|----------|--------|
| [Criterion 1] | PASS | [Evidence] | None |
| [Criterion 2] | FAIL | [Evidence] | [Issue description] |

## UI/UX Validation
- Visual compliance: PASS / FAIL
- Responsive design: PASS / FAIL
- Interactive states: PASS / FAIL

## Accessibility Validation
- WCAG AA compliance: PASS / FAIL
- Automated test results: X violations

## Performance Validation
- Core Web Vitals: PASS / FAIL
- API performance: PASS / FAIL
- Bundle size: PASS / FAIL

## Security Validation
- Authentication: PASS / FAIL
- Input validation: PASS / FAIL
- Data protection: PASS / FAIL

## Test Coverage
- Lines: XX%
- Functions: XX%
- Branches: XX%

## Issues Found

### Must Fix (Before Release)
1. [Issue with impact and recommendation]

### Should Fix (Nice to Have)
1. [Issue with impact and recommendation]

## Recommendation
- [ ] Ready for production
- [ ] Minor fixes needed (list above)
- [ ] Major fixes required (list above)
- [ ] Needs redesign

Best Practices

1. •Validate early -- do not wait until the end of development
2. •Document evidence -- screenshots, test results, metrics
3. •Be specific -- cite exact criteria and exact outcomes
4. •Prioritize issues -- distinguish critical from cosmetic
5. •Test edge cases -- empty states, error states, boundary values
6. •Automate where possible -- integrate checks into CI/CD
7. •Use real data -- test with production-like data volumes
8. •Involve stakeholders -- share reports for sign-off
9. •Track trends -- compare quality across releases
10. •Revalidate after fixes -- confirm issues are actually resolved

Deliverables

When applying this skill, produce:

1. •Validation report with pass/fail for each criterion
2. •Issue list with severity, impact, and recommendations
3. •Evidence -- screenshots, test output, metric snapshots
4. •Coverage report showing threshold compliance
5. •Release recommendation with clear rationale