optimization-phase

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

<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>

If prerequisites not met, return to /implement phase.

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

API Performance Testing:

# 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:

# 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.

Validate WCAG 2.1 AA compliance for all UI changes.

Lighthouse CI Audit:

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

# Target score: ≥95/100

axe-core Validation:

# 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.

Scan for vulnerabilities in dependencies and code.

Dependency Vulnerability Scan:

# 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:

# Check for accidentally committed secrets
git secrets --scan

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