What problem does it solve? Redesigning a UI page usually requires many rounds of back-and-forth to agree on layout, fields, and components. This Skill analyzes the current page code and any reference screenshots to produce a complete, one-shot redesign plan for approval before any code is written. ## Core Features & Use Cases - Project Stack Analysis: Reads CLAUDE.md, package.json, UI exports, icons, hooks, types, and API clients to ground the plan in the project's actual component library. - 5-Pass Screenshot Analysis: Systematically extracts layout, UI components, data fields, typography, and interactions from reference screenshots. - Structured Redesign Plan: Outputs layout structure, section-to-component mapping, field tables, change lists, and missing data needs — then stops and waits for explicit approval. - Use Case: You attach a screenshot of a competitor's dashboard and say "redesign this page". The Skill inspects your current page.tsx, maps every element to your component library, and presents a full plan you can approve or adjust before implementation. ## Quick Start Attach a reference screenshot and ask the assistant to redesign the current page and present a plan before writing any code.
