Claude Code Plugins

Community-maintained marketplace

Feedback

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name preview-phase
description Standard Operating Procedure for /preview phase. Covers manual UI/UX testing on local dev server before shipping.
allowed-tools Bash, 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: