preview-phase

Automate manual UI/UX testing and pre-deployment verification on a local development server.

Updated Oct 26, 2025
One-click install
npx skills add https://github.com/oxie/portfolio-cms-project --skill preview-phase-oxie
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: preview-phase
Source: https://github.com/oxie/portfolio-cms-project/tree/main/.claude/skills/preview-phase
Command: npx skills add https://github.com/oxie/portfolio-cms-project --skill preview-phase-oxie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a thorough manual UI/UX testing process on a local development server to catch issues before deployment. It acts as a crucial human validation gate, ensuring user flows, responsive design, accessibility, and visual consistency are flawless before shipping.

Core Features & Use Cases

  • Comprehensive Manual Testing: Guides through happy paths, error scenarios, responsive design, and keyboard navigation across various devices.
  • Visual Regression Check: Compares new UI against design expectations for layout, typography, colors, and animations to ensure consistency.
  • Performance Check: Conducts manual browser-based performance checks for page load times and interaction responsiveness.
  • Release Notes Generation: Creates user-facing release notes based on the feature's changes, ready for product communication.
  • Use Case: A feature is implemented and optimized. This skill helps a developer or QA perform a detailed manual preview, checking every aspect of the UI/UX, and generating clear release notes for stakeholders.

Quick Start

Preview the 'Student Progress Dashboard' feature on the local dev server, manually testing all user flows, responsive design, and generating release notes.

Frequently Asked Questions about preview-phase

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manually test UI/UX before deploying a feature?

Manual UI/UX testing validates user flows, responsive design, keyboard accessibility, and visual consistency on your local dev server before release. Test happy paths, error scenarios, and interactions across devices to catch issues automated checks miss.

What should I check for responsive design and accessibility during preview?

Responsive design testing verifies layout and functionality across screen sizes; keyboard accessibility ensures navigation and interaction work without a mouse. Both are critical preview checks to meet user expectations and compliance requirements before deployment.

Can I generate release notes automatically from my feature changes?

Release notes generation creates user-facing documentation based on your feature's changes and testing outcomes. This produces clear, stakeholder-ready communication artifacts directly from your preview validation work.

What prerequisites do I need to run a manual preview test?

You need a running local development server, completed code optimization, an accessible browser, and documented user flows for the feature. These prerequisites ensure you can execute comprehensive manual testing and verification steps systematically.

How do I check for visual regression during manual testing?

Visual regression checking compares your new UI against design specifications and automated test results for layout, typography, colors, and animations. This manual validation ensures visual consistency and catches design inconsistencies before release.

Why is manual testing necessary if I have automated tests?

Manual testing catches user experience issues, edge cases in real interaction flows, and visual anomalies that automated checks cannot detect. It serves as a human validation gate ensuring quality and user satisfaction before deployment.