What problem does it solve? Turning confirmed page layouts into actionable prototype inputs for tools like Figma, Excalidraw, or Whimsical requires manually listing components, mapping interactions, and enumerating page states, which is repetitive and error-prone. This Skill automates that middle layer between layout confirmation and visual prototyping. ## Core Features & Use Cases - Component Inventory Generation: Infers components, types, and properties (placeholders, options, column widths) from page specs or ASCII layouts. - Interaction Flow Diagrams: Produces ASCII flow charts covering trigger, request, success/failure branches, and UI responses for each feature. - Page State Matrix: Covers at least 8 states (initial, loading, populated, empty, no-results, network error, modal, confirmation) with per-region behavior. - Use Case: After confirming an ASCII layout for a user management page, generate a complete prototype spec with component tree, edit/delete interaction flows, and a state matrix that frontend and backend teams can align on before Figma work begins. ## Quick Start Provide the page specs or ASCII layout for your page and ask the Skill to generate a low-fidelity prototype document with component list, interaction flows, and state matrix.
