html-visual

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: html-visual
version: 0.0.2
category: design-frontend
description: "Generate an interactive single-file HTML visualization — mockup, wireframe, ERD, flowchart, chart, slides, architecture diagram, dashboard, timeline, mindmap, kanban, or table. Use when the user wants something rendered rather than described: a UI mockup or wireframe, a database schema as an ERD, business logic as a flowchart, data as a chart, or content as slides. Also use when they point at a file (schema, spec, data) and ask to see it visualized."
argument-hint: "[type] <content>"
---

# 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` → Analyze the Prisma schema to auto-generate ERD
- **Existing HTML modification**: Read and modify the existing file. Do not recreate from scratch.
- **Natural language only**: Infer the type, then generate.

### Context Gathering

- **Description is sufficient**: Generate immediately (e.g., "simple login form mockup")
- **Project code reference needed**: Read code/schema/API first (e.g., "our project's ERD", "current payment flow")
- Criterion: If the request contains project context references like "our", "current", "project's", read the code first.

### Type-Specific Guides

#### mockup
- Device frame: Actual device frame shape for mobile/tablet UI
- Multiple screens: Side-by-side layout + screen labels
- Placeholder data: Realistic data matching project context
- Tab/swipe for screen transitions

#### wireframe
- Hand-drawn (sketch) style: Slightly irregular lines, hand-drawn feel
- Black-and-white or grayscale. Minimal color
- Text areas shown as gray blocks (no "Lorem ipsum")
- Focus on layout and information structure, exclude visual details

#### erd
- Entity boxes with attribute lists. Distinguish PK/FK
- Relationship lines: 1:1, 1:N, N:M notation. Auto-track on node drag
- Include relationship type legend

#### flow
- Node types: Start/End (circle), Process (rectangle), Decision (diamond)
- Directional arrows. Auto-track on node drag
- Display branch conditions on connection lines

#### chart
- Auto-select appropriate chart type for the data (bar, line, pie, scatter, etc.)
- Axis labels + units, hover tooltips, legend
- Use Chart.js or D3.js

#### slides
- Reveal.js CDN-based
- Slide transition animations
- Code block highlighting (highlight.js)
- Speaker notes support (toggle with S key)

#### arch
- Separate system components by layer/zone (Frontend / Backend / DB / External)
- Label communication lines with protocols (HTTP, gRPC, pub/sub, etc.)
- Zoom/pan support
- D3.js force-directed or d