Preview Phase: Quick Reference

Purpose: Manual UI/UX testing on local dev server to validate user experience before deployment.

Phase Overview

Inputs:

• Optimized code (from /optimize phase)
• specs/NNN-slug/spec.md - Success criteria and user flows

Outputs:

• release-notes.md - User-facing feature description
• Manual testing sign-off

Expected duration: 30-60 minutes

---

Quick Start Checklist

Before you begin:

• [ ] Optimization phase completed
• [ ] All quality gates passed
• [ ] Local dev server can start

Core workflow:

1. ✅ Start Dev Server - npm run dev or equivalent
2. ✅ Test Happy Path - Primary user flows work
3. ✅ Test Error Scenarios - Validation, network failures
4. ✅ Test Responsive Design - Mobile, tablet, desktop (if UI)
5. ✅ Test Keyboard Navigation - Tab order, focus indicators
6. ✅ Generate Release Notes - User-facing documentation

---

Detailed Resources

🎯 Core Testing

• Dev Server Setup - Start local environment
• Happy Path Testing - Primary user flows
• Error Scenario Testing - Edge cases, failures

🖥️ UI/UX Testing (if HAS_UI=true)

• Responsive Testing - Mobile, tablet, desktop
• Keyboard Testing - Accessibility navigation
• Browser Testing - Chrome, Firefox, Safari

📝 Documentation

• Release Notes - User-facing change documentation
• Issue Tracking - Log issues found during testing

---

Completion Criteria

Required (Manual Gate - Blocking):

• [ ] Happy path works end-to-end
• [ ] Error scenarios handled gracefully
• [ ] Responsive design tested (if UI)
• [ ] Keyboard navigation works (if UI)
• [ ] release-notes.md created

Optional:

• [ ] Visual regression check (screenshots)
• [ ] Browser compatibility testing
• [ ] Performance profiling in DevTools

---

Manual Gate

This is a MANUAL GATE - Requires human approval before proceeding.

After testing complete:

# Approve and continue workflow
/feature continue
# or /ship continue (if called from /ship)

---

Next Phase

After preview approval: → /ship - Deploy to staging/production (model-specific)

---

See also:

• reference.md - Comprehensive preview guide (full text)
• examples.md - Good vs bad testing examples