What is html-visual?
Generate an interactive single-file HTML visualization (mockup, wireframe, ERD, flowchart, chart, slides, architecture diagram, dashboard, timeline, mindmap, kanban, table). Source: 2ykwang/agent-skills.
·html-visual
{}
html-visual
✓Generate an interactive single-file HTML visualization (mockup, wireframe, ERD, flowchart, chart, slides, architecture diagram, dashboard, timeline, mindmap, kanban, table).
Installation
How to Install html-visual
Quickly install html-visual AI skill to your development environment via command line
- Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
- Run Installation Command: Copy and run this command: npx skills add https://github.com/2ykwang/agent-skills --skill html-visual
- Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
Source: 2ykwang/agent-skills.
SKILL.md
View rawVisualize the user's request as an interactive single HTML file. First, read references/common-rules.md to review common rules.
| 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 |
Generate an interactive single-file HTML visualization (mockup, wireframe, ERD, flowchart, chart, slides, architecture diagram, dashboard, timeline, mindmap, kanban, table). Source: 2ykwang/agent-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/2ykwang/agent-skills --skill html-visual- Source
- 2ykwang/agent-skills
- Category
- {}Data Analysis
- Verified
- ✓
- First Seen
- 2026-02-19
- Updated
- 2026-03-10
Quick answers
How do I install html-visual?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/2ykwang/agent-skills --skill html-visual Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
Where is the source repository?
https://github.com/2ykwang/agent-skills
Details
- Category
- {}Data Analysis
- Source
- skills.sh
- First Seen
- 2026-02-19