prototype-review

Review prototypes, wireframes, and mockups for usability, accessibility, and design consistency.

Updated Apr 8, 2026
One-click install
npx skills add https://github.com/zm2231/personal-os-cowork --skill prototype-review
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype-review
Source: https://github.com/zm2231/personal-os-cowork/tree/main/.claude/skills/prototype-review
Command: npx skills add https://github.com/zm2231/personal-os-cowork --skill prototype-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Help designers and product teams find and prioritize usability, accessibility, and visual issues in prototypes, wireframes, and mockups so designs are more usable, consistent, and ready for development handoff.

Core Features & Use Cases

  • Rapid Usability Reviews: Identify friction points, confusing flows, and interaction breakdowns in mobile and web prototypes.
  • Accessibility & WCAG Audits: Check contrast, keyboard navigation, and screen reader considerations with remediation guidance.
  • Design System Alignment: Verify component consistency, tokens usage, and recommend updates to the design system.
  • Responsive & Interaction Analysis: Evaluate breakpoints, micro-interactions, and state coverage (hover, focus, disabled).
  • Strategic Design Leadership: Define design quality KPIs, quantify design debt, propose A/B test variants, and create remediation roadmaps.
  • Use Case: Run a comprehensive audit of an e-commerce checkout prototype to improve conversion, address accessibility gaps, and align UI components with the design system.

Quick Start

Review the mobile onboarding prototype and produce a prioritized list of usability, accessibility, visual hierarchy, and design-system issues with actionable recommendations.

Frequently Asked Questions about prototype-review

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

FAQPage Schema
How do I run a usability review on a prototype before development handoff?

Yes, you can perform WCAG accessibility checks on wireframes to evaluate contrast, keyboard navigation, and screen reader considerations. The review provides actionable remediation guidance to address accessibility gaps before the design is handed off.

How do I verify design system alignment during a mockup audit?

To verify design system alignment during a mockup audit, check component consistency and tokens usage across mobile, tablet, and desktop views. This ensures UI components match the design system and highlights necessary updates for consistency.

Can I evaluate responsive breakpoints and interaction states for a web prototype?

Yes, you can evaluate responsive breakpoints and interaction states for a web prototype. The analysis assesses micro-interactions and verifies state coverage including hover, focus, and disabled states to ensure a consistent user experience.

What is the best way to quantify design debt and define design quality KPIs?

The best way to quantify design debt and define design quality KPIs is through a strategic design audit. This approach measures component inconsistencies and usability issues, producing a remediation roadmap and A/B test variants for continuous improvement.

Does a design audit support responsive reviews for both mobile and desktop flows?

Yes, a design audit supports responsive reviews for mobile, tablet, and desktop product flows. It evaluates onboarding, checkout, and dashboard screens to identify interaction breakdowns and ensure visual hierarchy across all breakpoints.