HTML Visualization
Input
$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 direct SVG generation
dashboard
- Arrange multiple charts/metrics in grid layout
- KPI cards at the top (numbers + change rates)
- Cross-chart interaction: Click one → filter others
timeline
- Horizontal or vertical timeline
- Event nodes + date labels
- Zoom/scroll for period navigation
- Use Mermaid gantt or D3.js
mindmap
- Radial expansion from center node
- Node collapse/expand
- Use Mermaid mindmap or direct SVG generation
kanban
- Columns: TODO / In Progress / Done (customizable)
- Drag and drop cards between columns
- Display labels/tags on cards
table
- Sort by clicking column headers (ascending/descending)
- Search/filter at the top
- Pagination or virtual scroll
- Cell highlight, row selection
Procedure
- Identify type + target. Ask if ambiguous. Read the file if a path is provided.
- Context gathering decision. Determine if project context is needed. If so, read relevant code/docs.
- Read
references/common-rules.md. Review common principles, aesthetics, CDN, and error prevention rules.
- Read
references/html-boilerplate.md. Start from the base HTML template.
- Generate HTML following the type-specific guide.
- Validate: Review the generated HTML.
- No smart quotes (curly quotes) in HTML attributes
- No unclosed tags
- No overlapping nodes/elements
- If issues found, fix and re-validate
- Instruct to
open {filename}.
1---2name: html-visual3description: 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.4---5
6# HTML Visualization
7
8## Input
9
10```text
11$ARGUMENTS
12```
13
14## Instructions
15
16Visualize the user's request as an **interactive single HTML file**.
17First, read `references/common-rules.md` to review common rules.
18
19### Type Determination
20
21Determine the type from the first word of `$ARGUMENTS`.
22
23| Argument | Type | Filename Pattern |
24|----------|------|-----------------|
25| `mockup` | UI mockup (high-fidelity) | `mockup-{name}.html` |
26| `wireframe` | Wireframe (low-fidelity, hand-drawn style) | `wireframe-{name}.html` |
27| `erd` | ERD | `erd-{name}.html` |
28| `flow` | Flowchart / Sequence diagram | `flow-{name}.html` |
29| `chart` | Data chart | `chart-{name}.html` |
30| `slides` | Presentation | `slides-{name}.html` |
31| `arch` | Architecture diagram | `arch-{name}.html` |
32| `dashboard` | Composite dashboard | `dashboard-{name}.html` |
33| `timeline` | Timeline / Gantt chart | `timeline-{name}.html` |
34| `mindmap` | Mindmap | `mindmap-{name}.html` |
35| `kanban` | Kanban board | `kanban-{name}.html` |
36| `table` | Interactive data table | `table-{name}.html` |
37
38**No match**: Infer the type from the request content. If unable to infer, ask the user.
39When inferred, use `visual-{name}.html` as the filename.
40
41**`{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`.
42
43### Input Handling
44
45- **File path provided**: Read and analyze the file, then visualize.
46 e.g., `/html-visual erd schema.prisma` → Analyze the Prisma schema to auto-generate ERD
47- **Existing HTML modification**: Read and modify the existing file. Do not recreate from scratch.
48- **Natural language only**: Infer the type, then generate.
49
50### Context Gathering
51
52- **Description is sufficient**: Generate immediately (e.g., "simple login form mockup")
53- **Project code reference needed**: Read code/schema/API first (e.g., "our project's ERD", "current payment flow")
54- Criterion: If the request contains project context references like "our", "current", "project's", read the code first.
55
56### Type-Specific Guides
57
58#### mockup
59- Device frame: Actual device frame shape for mobile/tablet UI
60- Multiple screens: Side-by-side layout + screen labels
61- Placeholder data: Realistic data matching project context
62- Tab/swipe for screen transitions
63
64#### wireframe
65- Hand-drawn (sketch) style: Slightly irregular lines, hand-drawn feel
66- Black-and-white or grayscale. Minimal color
67- Text areas shown as gray blocks (no "Lorem ipsum")
68- Focus on layout and information structure, exclude visual details
69
70#### erd
71- Entity boxes with attribute lists. Distinguish PK/FK
72- Relationship lines: 1:1, 1:N, N:M notation. Auto-track on node drag
73- Include relationship type legend
74
75#### flow
76- Node types: Start/End (circle), Process (rectangle), Decision (diamond)
77- Directional arrows. Auto-track on node drag
78- Display branch conditions on connection lines
79
80#### chart
81- Auto-select appropriate chart type for the data (bar, line, pie, scatter, etc.)
82- Axis labels + units, hover tooltips, legend
83- Use Chart.js or D3.js
84
85#### slides
86- Reveal.js CDN-based
87- Slide transition animations
88- Code block highlighting (highlight.js)
89- Speaker notes support (toggle with S key)
90
91#### arch
92- Separate system components by layer/zone (Frontend / Backend / DB / External)
93- Label communication lines with protocols (HTTP, gRPC, pub/sub, etc.)
94- Zoom/pan support
95- D3.js force-directed or direct SVG generation
96
97#### dashboard
98- Arrange multiple charts/metrics in grid layout
99- KPI cards at the top (numbers + change rates)
100- Cross-chart interaction: Click one → filter others
101
102#### timeline
103- Horizontal or vertical timeline
104- Event nodes + date labels
105- Zoom/scroll for period navigation
106- Use Mermaid gantt or D3.js
107
108#### mindmap
109- Radial expansion from center node
110- Node collapse/expand
111- Use Mermaid mindmap or direct SVG generation
112
113#### kanban
114- Columns: TODO / In Progress / Done (customizable)
115- Drag and drop cards between columns
116- Display labels/tags on cards
117
118#### table
119- Sort by clicking column headers (ascending/descending)
120- Search/filter at the top
121- Pagination or virtual scroll
122- Cell highlight, row selection
123
124### Procedure
125
1261. **Identify type + target**. Ask if ambiguous. Read the file if a path is provided.
1272. **Context gathering decision**. Determine if project context is needed. If so, read relevant code/docs.
1283. **Read `references/common-rules.md`**. Review common principles, aesthetics, CDN, and error prevention rules.
1294. **Read `references/html-boilerplate.md`**. Start from the base HTML template.
1305. **Generate HTML following the type-specific guide**.
1316. **Validate**: Review the generated HTML.
132 - No smart quotes (curly quotes) in HTML attributes
133 - No unclosed tags
134 - No overlapping nodes/elements
135 - If issues found, fix and re-validate
1367. **Instruct to `open {filename}`**.
2ykwang