What problem does it solve? Turning a prototype or wireframe image into working business logic requires manual requirement interpretation, copywriting checks, state management, form validation, and mock API setup. This Skill automates that flow: it reads the prototype, produces a confirmed requirements analysis report, then implements the interaction logic without touching any styles. ## Core Features & Use Cases - Prototype Analysis Mode: Identifies functional modules, interaction logic, and component hierarchy from uploaded prototype images, outputs Mermaid flowcharts for multi-step processes, and asks for user confirmation before coding. - Logic Development Mode: Implements state management, form validation, routing, and interaction feedback following strict conventions (guard clauses, loaded-state control, popup cleanup). - Mock API Workflow: Generates TypeScript type declarations, a dedicated API call file, a mock.json data file served via json-server, and a Markdown API document with field-level business meanings. - Use Case: Upload a login page wireframe and ask for requirement analysis; the Skill outputs a requirements report with a Mermaid flowchart, then after confirmation implements the login logic with a POST /login mock endpoint and validation copy. ## Quick Start Upload a prototype image and ask the assistant to analyze the requirements and implement the business logic for the page.
