用途
html-visual 用于将用户的请求转化为一个交互式的单文件 HTML 可视化页面。它覆盖从产品设计到数据表达的多类场景，产出为独立 HTML 文件，便于直接打开查看。
主要能力
技能通过 $ARGUMENTS 的第一个词判断类型，并给出对应的文件名前缀：
- mockup：高保真 UI 原型，文件名 mockup-{name}.html
- wireframe：低保真、手绘风格线框图，文件名 wireframe-{name}.html
- erd：实体关系图，文件名 erd-{name}.html
- flow：流程图 / 序列图，文件名 flow-{name}.html
- chart：数据图表，文件名 chart-{name}.html
- slides：演示幻灯片，文件名 slides-{name}.html
- arch：架构图，文件名 arch-{name}.html
- dashboard：复合仪表盘，文件名 dashboard-{name}.html
- timeline：时间线 / 甘特图，文件名 timeline-{name}.html
- mindmap：思维导图，文件名 mindmap-{name}.html
- kanban：看板，文件名 kanban-{name}.html
- table：交互式数据表格，文件名 table-{name}.html
若无匹配类型，则从请求内容推断；若无法推断，则询问用户。推断所得类型使用 visual-{name}.html 作为文件名。{name} 的规则是：从请求中提取核心名词并转换为 kebab-case，例如 "user login form" → login-form，"payment flow" → payment-flow。
使用方式
输入处理分为几种情况：
- 提供文件路径：读取并分析文件后再可视化。例如 /html-visual erd schema.prisma 会分析 Prisma schema 自动生成 ERD。
- 修改已有 HTML：读取并修改现有文件，不从头重建。
- 仅自然语言描述：推断类型后生成。
上下文收集的判定：描述足够充分时立即生成（例如 "simple login form mockup"）；需要参考项目代码时先读取代码 / schema / API（例如 "our project's ERD"、"current payment flow"）。判定标准：若请求包含 "our"、"current"、"project's" 等项目上下文引用，则先读取代码。
生成流程为：识别类型与目标（有歧义则询问，提供路径则读取文件）；决定是否需要收集上下文（必要时读取相关代码或文档）；读取 references/common-rules.md 复习通用原则、美学、CDN 与错误预防规则；读取 references/html-boilerplate.md 从基础 HTML 模板开始；按照类型专属指南生成 HTML；最后进行验证，检查 HTML 属性中无弯引号（smart quotes）、无未闭合标签、无重叠的节点或元素，发现问题则修复并重新验证；最后提示打开 {filename}。
类型专属指南要点
- mockup：为移动 / 平板 UI 提供实际设备边框形状；多屏并排布局并带屏幕标签；使用贴合项目上下文的真实占位数据；支持标签页 / 滑动进行屏幕切换。
- wireframe：手绘（sketch）风格，线条略不规则，具手绘感；黑白或灰度，颜色最少；文本区域显示为灰色块（不使用 "Lorem ipsum"）；聚焦布局与信息结构，排除视觉细节。
- erd：实体框带属性列表，区分 PK/FK；关系线使用 1:1、1:N、N:M 标注，节点拖动时自动跟随；包含关系类型图例。
- flow：节点类型包括开始 / 结束（圆形）、处理（矩形）、判断（菱形）；带方向箭头，节点拖动时自动跟随；在连接线上显示分支条件。
- chart：根据数据自动选择合适的图表类型（柱状、折线、饼图、散点等）；带坐标轴标签与单位、悬停提示、图例；使用 Chart.js 或 D3.js。
- slides：基于 Reveal.js CDN；幻灯片过渡动画；代码块高亮（highlight.js）；支持演讲者备注（按 S 键切换）。
- arch：按层 / 区域划分系统组件（前端 / 后端 / 数据库 / 外部）；通信线标注协议（HTTP、gRPC、pub/sub 等）；支持缩放 / 平移；使用 D3.js 力导向或直接生成 SVG。
- dashboard：以网格布局排列多个图表 / 指标；顶部为 KPI 卡片（数字 + 变化率）；跨图表交互，点击一个图表可筛选其他图表。
- timeline：水平或垂直时间线；事件节点 + 日期标签；支持缩放 / 滚动以浏览时段；使用 Mermaid gantt 或 D3.js。
- mindmap：从中心节点径向展开；节点可折叠 / 展开；使用 Mermaid mindmap 或直接生成 SVG。
- kanban：列为 TODO / In Progress / Done（可自定义）；卡片可在列间拖放；卡片上显示标签 / 标记。
- table：点击列头排序（升序 / 降序）；顶部提供搜索 / 筛选；分页或虚拟滚动；单元格高亮、行选择。
适用场景
适合需要快速产出独立可视化页面的场合，例如设计原型与线框图、数据库结构表达、流程与架构说明、数据图表与仪表盘、演示文稿、项目时间线、思维梳理、任务看板以及可交互的数据表格。
限制
资料未提供技能的具体安装命令、依赖环境、收费方式、支持平台及效果说明。部分视觉细节与实现细节（如具体 CDN 版本、浏览器兼容性）暂未提供。生成后可用的交互能力取决于所选类型及其指南，未在资料中说明的其他能力暂未提供。