optimization-phase

<objective>
Production readiness validation through systematic quality gates. Ensures features meet performance targets, accessibility standards (WCAG 2.1 AA), security requirements, and code quality thresholds before deployment.

This skill orchestrates the /optimize phase, which runs after /implement and before /preview in the deployment workflow.

Inputs: Implemented code (from /implement), spec.md (success criteria)
Outputs: optimization-report.md, code-review-report.md
Expected duration: 1-2 hours
</objective>

<quick_start>
Execute optimization quality gates systematically:

1. Performance Benchmarking - API p50 <200ms, p95 <500ms, page load <2s
2. Accessibility Audit - WCAG 2.1 AA compliance (if UI feature)
3. Security Review - npm audit, dependency scanning, OWASP top 10
4. Code Quality Review - DRY violations <3, test coverage ≥80%
5. Generate Reports - optimization-report.md + code-review-report.md

Key principle: All blocking quality gates must pass before deployment.
</quick_start>

<prerequisites>
Before beginning optimization:
- Implementation phase completed (all tasks done or blocked)
- All tests passing (CI pipeline green)
- Code committed to feature branch (git status clean)
- spec.md contains performance targets and success criteria

If prerequisites not met, return to /implement phase.
</prerequisites>

<workflow>
<step number="1">
**Performance Benchmarking**

Validate API response times and page load performance against spec.md targets.

**API Performance Testing**:

```bash
# Measure API endpoint response times (10 requests)
for i in {1..10}; do
  curl -w "%{time_total}\n" -o /dev/null -s "http://localhost:3000/api/endpoint"
done | sort -n

# Calculate p50 (median): 5th value
# Calculate p95 (95th percentile): 10th value
```

**Page Load Testing**:

```bash
# Run Lighthouse CI for page load metrics
npm install -g @lhci/cli
lhci autorun --url=http://localhost:3000

# Check metrics:
# - First Contentful Paint (FCP): <1.8s
# - Largest Contentful Paint (LCP): <2.5s
# - Time to Interactive (TTI): <3.8s
```

**Targets from spec.md**:

- API p50 (median): <200ms
- API p95 (95th percentile): <500ms
- Page load (initial): <2 seconds
- Time to Interactive (TTI): <3 seconds

**Blocking**: If performance targets not met, optimization required before deployment.

See resources/performance-benchmarking.md for detailed testing procedures.
</step>

<step number="2">
**Accessibility Audit (UI Features)**

Validate WCAG 2.1 AA compliance for all UI changes.

**Lighthouse CI Audit**:

```bash
# Run Lighthouse accessibility audit
lhci autorun --collect.settings.onlyCategories=accessibility

# Target score: ≥95/100
```

**axe-core Validation**:

```bash
# Install axe-core DevTools extension
# Or use axe CLI:
npm install -g @axe-core/cli
axe http://localhost:3000 --tags wcag2aa
```

**WCAG 2.1 AA Requirements**:

- Color contrast ≥4.5:1 (text), ≥3:1 (UI components)
- Keyboard navigation (all interactive elements accessible)
- Screen reader compatibility (ARIA labels, semantic HTML)
- Focus indicators visible (outline, border, background change)

**Blocking** (if UI feature): All WCAG 2.1 AA violations must be fixed.

**Skip if**: No UI changes in this feature (backend/API only).

See resources/accessibility-audit.md for comprehensive checklist.
</step>

<step number="3">
**Security Review**

Scan for vulnerabilities in dependencies and code.

**Dependency Vulnerability Scan**:

```bash
# npm audit for Node.js projects
npm audit --audit-level=moderate

# Check for critical and high severity vulnerabilities
# Fix: npm audit fix (or manual upgrade)
```

**OWASP Top 10 Checks**:

- SQL Injection: Parameterized queries, no string concatenation
- XSS: Input sanitization, output encoding
- CSRF: CSRF tokens on state-changing endpoints
- Authentication: Secure password hashing (bcrypt), JWT validation
- Sensitive Data Exposure: No secrets in code/logs, HTTPS enforced

**Secret Scanning**:

```bash
# Check for accidentally committed secrets
git secrets --scan

# Or use gitleaks:
gitleaks detect --source . --verbose
```

**Blocking**: Critical and high severity vulnerabilities must be fixed.

See resources/security-review.md for OWASP top 10 checklist.
</step>

<step number="4">
**Code Quality Review**

Validate code follows DRY/KISS principles and test coverage standards.

**Test Coverage Check**:

```bash
# Run coverage report
npm run test:coverage

# Target: ≥80% coverage (unit + integration)
```

**DRY Violations Check**:

```bash
# Manual review for code duplication
# Or use jsinspect (JavaScript):
npm install -g jsinspect
jsinspect src/

# Target: <3 instances of code duplication
```

**KISS Principle Validation**:

- Functions ≤50 lines (complex functions split)
- Cyclomatic complexity <10 (no deeply nested logic)
- No premature optimization (YAGNI principle)

**Code Review Checklist**:

- [ ] No magic numbers (constants extracted)
- [ ] Descriptive variable/function names
- [ ] Error handling present (try/catch, error boundaries)
- [ ] No commented-out code (dead code removed)
- [ ] Consistent code style (linter passing)

**Blocking if**: Test coverage <80% OR >5 DRY violations OR critical complexity issues.

See resources/code-quality-review.md for complete checklist.
</step>

<step number="5">
**Generate Reports**

Create optimization-report.md and code-review-report.md.

**optimization-report.md format**:

```markdown
# Optimization Report: [Feature Name]

**Date**: 2025-11-19
**Feature**: specs/NNN-slug

## Performance Results

### API Performance

- GET /api/users: p50=145ms ✅, p95=320ms ✅
- POST /api/orders: p50=230ms ❌, p95=580ms ❌ (exceeds p95 target)

### Page Load Performance

- Homepage: LCP=1.9s ✅, TTI=2.8s ✅
- Dashboard: LCP=3.2s ❌ (exceeds target)

## Accessibility Audit (WCAG 2.1 AA)

- Lighthouse score: 98/100 ✅
- axe-core violations: 0 ✅

## Security Review

- npm audit: 0 critical, 0 high ✅
- OWASP top 10: All checks passed ✅
- Secret scanning: No secrets detected ✅

##