plan-design-review

Review design plans and produce concrete UI/UX decisions with mockups.

Updated Mar 28, 2026
One-click install
npx skills add https://github.com/24601/gastack-pre-fork --skill plan-design-review-24601
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: plan-design-review
Source: https://github.com/24601/gastack-pre-fork/tree/main/plan-design-review
Command: npx skills add https://github.com/24601/gastack-pre-fork --skill plan-design-review-24601

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plans that touch UI/UX often ship with missing decisions, vague interactions, and no visual mockups, which causes rework, slow reviews, and broken implementations. This Skill finds those gaps, makes concrete design decisions, and adds the visual and interaction details a team needs to implement confidently.

Core Features & Use Cases

  • Plan hardening: Identify missing decisions (states, edge cases, empty states, accessibility) and add precise acceptance criteria.
  • Mockup-first review: Generate visual mockups or HTML sketches from the plan so reviewers and engineers see the intended UI before implementation.
  • Checklist and handoff: Produce a prioritized, implementation-ready checklist with interaction notes, accessibility requirements, and QA criteria.
  • Use Case: Run on a feature branch that adds a new user flow to convert an ambiguous plan into a complete, reviewable design spec with mockups.

Quick Start

Run plan-design-review on the plan or branch to produce a corrected plan, acceptance checklist, and mockups ready for implementation.

Frequently Asked Questions about plan-design-review

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

FAQPage Schema
How do I review design plans to find missing UI and UX decisions before implementation?

Mockup generation from a design plan creates visual mockups or HTML sketches that represent the intended UI. This allows reviewers and engineers to visualize interaction flows and screen layouts before writing any implementation code.

What is design plan hardening and when do I need it for UI UX components?

Design plan hardening is the process of finding missing UI UX decisions like empty states and accessibility considerations in a plan. You need it when a plan touches interaction flows, ensuring the final output includes precise acceptance criteria for confident implementation.

How do I generate visual mockups from an ambiguous feature plan?

Generating mockups from an ambiguous feature plan involves running a design review on the branch to extract concrete UI decisions. This converts vague interactions into HTML sketches and visual mockups, producing a complete, reviewable design spec ready for handoff.

Does this design review workflow include accessibility considerations and acceptance criteria?

Yes, the design review workflow ensures the output explicitly includes accessibility considerations and precise acceptance criteria. It evaluates the plan to guarantee that interaction states and QA requirements are defined before the implementation checklist is generated.

Can I use this plan review on a feature branch that introduces new interaction flows?

Yes, you can apply this plan review to a feature branch that introduces new screens, components, or interaction flows. It reads the plan files or PRs to produce a corrected plan, acceptance checklist, and mockups ready for implementation.

What is the best way to turn vague UI UX interactions into an implementation-ready checklist?

The best way to turn vague UI UX interactions into an implementation-ready checklist is to run a mockup-first design review. This identifies missing decisions, adds interaction notes and accessibility requirements, and outputs a prioritized checklist for engineering handoff.