html-visuallisted

# HTML Visualization ## Input ```text $ARGUMENTS ``` ## Instructions Visualize the user's request as an **interactive single HTML file**. First, read `references/common-rules.md` to review common rules. ### Type Determination Determine the type from the first word of `$ARGUMENTS`. | Argument | Type | Filename Pattern | |----------|------|-----------------| | `mockup` | UI mockup (high-fidelity) | `mockup-{name}.html` | | `wireframe` | Wireframe (low-fidelity, hand-drawn style) | `wireframe-{name}.html` | | `erd` | ERD | `erd-{name}.html` | | `flow` | Flowchart / Sequence diagram | `flow-{name}.html` | | `chart` | Data chart | `chart-{name}.html` | | `slides` | Presentation | `slides-{name}.html` | | `arch` | Architecture diagram | `arch-{name}.html` | | `dashboard` | Composite dashboard | `dashboard-{name}.html` | | `timeline` | Timeline / Gantt chart | `timeline-{name}.html` | | `mindmap` | Mindmap | `mindmap-{name}.html` | | `kanban` | Kanban board | `kanban-{name}.html` | | `table` | Interactive data table | `table-{name}.html` | **No match**: Infer the type from the request content. If unable to infer, ask the user. When inferred, use `visual-{name}.html` as the filename. **`{name}` rule**: Extract the core noun from the request and convert to kebab-case. e.g., "user login form" → `login-form`, "payment flow" → `payment-flow`. ### Input Handling - **File path provided**: Read and analyze the file, then visualize. e.g., `/html-visual erd schema.prisma` → Analy