preview-phase

majiayu000's avatarfrom majiayu000

Standard Operating Procedure for /preview phase. Covers manual UI/UX testing on local dev server before shipping.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Testing and QA]

When & Why to Use This Skill

The preview-phase Claude skill provides a comprehensive Standard Operating Procedure (SOP) for manual UI/UX testing on local development servers. It streamlines the pre-deployment workflow by ensuring that all features undergo rigorous validation, including responsive design checks, accessibility testing, and error handling, to guarantee a high-quality user experience before shipping.

Use Cases

  • Case 1: Validating new feature implementations on a local dev server to ensure they align with original design specifications and user flows.
  • Case 2: Conducting cross-device responsive testing to verify that UI elements scale correctly across mobile, tablet, and desktop resolutions.
  • Case 3: Performing accessibility audits, specifically focusing on keyboard navigation and focus states, to meet inclusive design standards.
  • Case 4: Simulating edge cases and error scenarios, such as network failures or invalid form inputs, to test application resilience.
  • Case 5: Automating the generation of user-facing release notes and documentation as part of the final manual sign-off process.
namepreview-phase
description"Standard Operating Procedure for /preview phase. Covers manual UI/UX testing on local dev server before shipping."
allowed-toolsBash, Read

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

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

📝 Documentation

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: