wireframing-prototyping

name	wireframing-prototyping
description	Use when creating wireframes, mockups, user flows, or prototypes. Covers page layouts, information architecture, low/high-fidelity wireframes, interactive prototypes, and user flow diagrams.
user-invocable	false
allowed-tools	["Read","Write","Edit","Grep","Glob"]

Wireframing and Prototyping -- Planning UI Before Code

Low-Fidelity Wireframes (ASCII)

Dashboard

+----------------------------------------------------------+
| [Logo]  Dashboard    Invoices    Inventory    HR    [User] |
+----------+-----------------------------------------------+
|          |  +----------+ +----------+ +----------+ +----+ |
| SIDEBAR  |  | Revenue  | | Expenses | | Profit   | |Due | |
| Dashboard|  | $124,500 | | $87,200  | | $37,300  | |12  | |
| Invoices |  +----------+ +----------+ +----------+ +----+ |
| Products |                                                |
| Customers|  +-------------------------+ +---------------+ |
| Reports  |  | Revenue Chart           | | Recent        | |
| Settings |  | [Line chart area]       | | Activity      | |
|          |  +-------------------------+ +---------------+ |
|          |  +-------------------------------------------+ |
|          |  | Recent Invoices                    [+New]  | |
|          |  | #  | Customer    | Date   | Amount | Stat | |
|          |  | 42 | Acme Corp   | Mar 5  | $1,200 | Paid | |
|          |  +-------------------------------------------+ |
+----------+-----------------------------------------------+

List Page

+----------------------------------------------------------+
| Invoices                                          [+New]  |
| [Search...............] [Status: All v] [Date: This Mo v] |
| [ ] | #     | Customer     | Date    | Amount  | Status  |
| [ ] | INV-42| Acme Corp    | Mar 5   | $1,200  | Paid    |
| Showing 1-25 of 142         [< 1 2 3 ... 6 >]           |
| Selected: 2 items   [Delete] [Mark as Sent] [Download]   |
+----------------------------------------------------------+

Form Page (Create/Edit)

+----------------------------------------------------------+
| Create Invoice                          [1] [2] [3] [4]  |
| Customer *        [Select customer...          v]         |
| Invoice Date *    [2026-03-06        ] [cal]              |
| Due Date *        [2026-04-06        ] [cal]              |
| LINE ITEMS                                                |
| | Product *     | Qty *  | Price *  | Tax    | Total    ||
| | [Select... v] | [    ] | [      ] | [5% v] | $0.00   ||
| | [+ Add Line Item]                                     ||
|                              Subtotal:    $0.00           |
| [Cancel]                    [Save Draft] [Save & Send]    |
+----------------------------------------------------------+

Page Layout Patterns

Shell: Sidebar (nav) + Header (breadcrumb, actions, user, branch) + Main content area. Split View (Master-Detail): List on left, detail panel on right. Full-Width Report: Filters bar, KPI cards, chart, breakdown table.

Information Architecture

ERP Application
+-- Dashboard
+-- Accounting (Invoices, Bills, Journal Entries, Chart of Accounts, Bank Reconciliation, Reports)
+-- Inventory (Products, Warehouses, Stock Movements, Adjustments, Reports)
+-- Sales (Customers, Quotations, Sales Orders, Delivery Notes, Reports)
+-- Procurement (Vendors, Purchase Requests, Purchase Orders, Reports)
+-- HR (Employees, Attendance, Leave, Payroll, Reports)
+-- Settings (Company, Branches, Users & Roles, Tax, Document Numbering)

Breadcrumbs: Home > Module > List > Detail > Action

User Flow Diagrams (Mermaid)

flowchart TD
    A[Invoice List] -->|Click +New| B[Create Form]
    B -->|Save Draft| F[Detail - Draft]
    B -->|Save & Send| G[Detail - Sent]
    F -->|Edit| B
    G -->|Record Payment| H{Full Payment?}
    H -->|Yes| I[Detail - Paid]
    H -->|No| J[Detail - Partial]
    J -->|Record Payment| H

flowchart LR
    A[Submit Request] --> B{Amount > $5K?}
    B -->|No| C[Auto-Approve]
    B -->|Yes| D{Amount > $25K?}
    D -->|No| E[Manager Approval]
    D -->|Yes| F[Director Approval]
    E & F -->|Approved| G[Approved]
    E & F -->|Rejected| H[Return to Requester]

Responsive Strategy

Breakpoint	Width	Changes
Mobile	< 640px	Single column, hamburger nav, cards replace tables
Tablet	640-1023px	Collapsible sidebar, 2-column grid
Desktop	1024-1279px	Full sidebar, 3-column grids
Wide	1280px+	Full layout, max-width 1280px

Mobile data tables convert to stacked cards:

+---------------------------+
| Invoice #INV-042          |
| Acme Corp                 |
| Mar 5, 2026               |
| $1,200.00        [Paid]   |
+---------------------------+

Interaction States

Button:  Default -> Hover (bg-darker) -> Active (scale-0.98) -> Focus (ring-2) -> Disabled (opacity-50) -> Loading (spinner)
Input:   Default (border-gray-300) -> Hover (border-gray-400) -> Focus (border-blue-500 ring-1) -> Error (border-red-500) -> Disabled (bg-gray-100)

Element	Property	Duration	Easing
Button hover	background	150ms	ease
Modal open/close	opacity + transform	200ms/150ms	ease-out/ease-in
Sidebar toggle	width	200ms	ease-in-out
Toast enter/exit	transform/opacity	300ms/200ms	ease-out/ease-in

Enterprise UI Patterns

Data Table: Column sorting, debounced search (300ms), filter bar, row checkboxes, bulk action bar, export CSV/PDF, pagination with page-size selector, empty/loading states.

Filter Panel: Status chips, customer dropdown, date range pickers, amount range, "Clear All" button, applied filter tags with dismiss.

Empty State: Icon/illustration + descriptive message + primary CTA button.

Confirmation Dialog: Title, consequence description, Cancel + Destructive action buttons.

Screen Inventory Template

| # | Screen | Route | Type | Priority |
|---|--------|-------|------|----------|
| 1 | Invoice List | /invoices | Index | P0 |
| 2 | Invoice Detail | /invoices/:id | Detail | P0 |
| 3 | Create Invoice | /invoices/create | Form (wizard) | P0 |

Per screen: Purpose, Data (API + fields), Filters, Actions, Mobile adaptation, Empty state.

Prototype Documentation Format

## Prototype: [Feature Name]
### Overview: Brief description.
### User Stories: As a [role], I want to [action] so that [benefit].
### Screens: Entry points, key interactions, exit points, wireframe.
### Data Requirements: API endpoints, fields, validation.
### Edge Cases: Empty, error, loading, permission denied, concurrent edit.