html-visual

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.

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

1. Identify type + target. Ask if ambiguous. Read the file if a path is provided.
2. Context gathering decision. Determine if project context is needed. If so, read relevant code/docs.
3. Read references/common-rules.md. Review common principles, aesthetics, CDN, and error prevention rules.
4. Read references/html-boilerplate.md. Start from the base HTML template.
5. Generate HTML following the type-specific guide.
6. 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
7. Instruct to open {filename}.