2ykwang/html-visual
plugins/html-visual/skills/SKILL.md
Generate an interactive single-file HTML visualization (mockup, wireframe, ERD, flowchart, chart, slides, architecture diagram, dashboard, timeline, mindmap, kanban, table).
$ install --global
skillsauthnpx skillsauth add 2ykwang/agent-skills html-visualInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Error
VirusTotalMulti-engine malware detection
70%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 25, 2026, 9:48 AM43.9s3 files scanned
SKILL.md
- name:
- html-visual
- version:
- 0.0.1
- category:
- design-frontend
- description:
- Generate an interactive single-file HTML visualization (mockup, wireframe, ERD, flowchart, chart, slides, architecture diagram, dashboard, timeline, mindmap, kanban, table).
- argument-hint:
- [type] <content>
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 argument ($0).
| 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}.
Related Skills
2ykwang/code-review-report
development
VerifiedTrustedCommunity
Turn code changes into a single-file HTML code review report that pairs the diff with context a diff can't show — design decisions, rejected alternatives, tradeoffs, unfinished work — plus prioritized review points. Use when preparing for review after finishing a sizable change, refactor, or feature, or whenever the user asks for a review report, change report, or an HTML summary of their changes.
10SKILL.mdUpdated Jun 13, 2026
2ykwang/code-review-report
development
VerifiedTrustedCommunity
Turn code changes into a single-file HTML code review report that pairs the diff with context a diff can't show — design decisions, rejected alternatives, tradeoffs, unfinished work — plus prioritized review points. Use when preparing for review after finishing a sizable change, refactor, or feature, or whenever the user asks for a review report, change report, or an HTML summary of their changes.
10SKILL.mdUpdated Jun 13, 2026
2ykwang/decision-board
development
VerifiedTrustedCommunity
Render an interactive HTML board for the user to pick among multiple comparable options side-by-side at once — engineering trade-offs, copy audits, action-item triage, architecture decisions, policy calls. Returns the picks (and optional hold/note flags) as a JSON file the agent can apply.
8SKILL.mdUpdated May 13, 2026
2ykwang/decision-board
development
VerifiedTrustedCommunity
Render an interactive HTML board for the user to pick among multiple comparable options side-by-side at once — engineering trade-offs, copy audits, action-item triage, architecture decisions, policy calls. Returns the picks (and optional hold/note flags) as a JSON file the agent can apply.
8SKILL.mdUpdated May 13, 2026