majiayu000 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
/optimizephase) 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:
- ✅ Start Dev Server - npm run dev or equivalent
- ✅ Test Happy Path - Primary user flows work
- ✅ Test Error Scenarios - Validation, network failures
- ✅ Test Responsive Design - Mobile, tablet, desktop (if UI)
- ✅ Test Keyboard Navigation - Tab order, focus indicators
- ✅ 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