用途：当解释内容涉及箭头、方框、层次、时间或位置关系时，用内联 SVG 在 HTML 中绘制真实图形、箭头、排版与定位，替代 markdown 中的 ASCII 图。适用于流程图、数据流、时序图、状态机、架构/组件图、依赖图、时间线/甘特图、分层图等概念性图表。
主要能力：使用真实 <svg> 与 <g> 元素，配合 viewBox 实现缩放；每个图表配简短文字说明；多图页面每个概念一个 SVG 并各自加标题。支持流程图/数据流、时序图、状态机、架构/组件图、依赖图、时间线/甘特图、分层图等类型。
使用方式：先调用 html-skills:html-skills-listen（幂等）；若返回 URL，则将其原样注入为 window.CLAUDE_SUBMIT_URL（含 ?t= 查询串）；若为 web/sandbox 模式则省略该行。输出为磁盘上的真实 .html 文件，自包含内联 CSS/JS，无构建步骤；完整文档外壳，含 <!doctype html>、<html lang>、<meta charset="utf-8">、viewport 与 title；移动端约 700px 以下折叠为单列。
限制与注意：SVG <text> 不会自动换行，长标签应使用 <foreignObject> 内嵌 HTML，或按标签长度计算框宽（14px 时约每字符 ≥8px 加 32px 内边距）；节点间距至少 40px；边标签需加背景矩形；单图元素不宜超过约 12 个。避免文字溢出、无标签箭头、截图代替 SVG 等反模式。浏览器存储仅用于进行中状态，使用 html-skills:<skill>:<artifact-slug>: 前缀，不存储敏感值。剪贴板写入需通过共享 helper 的 copyToClipboard，不直接调用 navigator.clipboard.writeText。具体收费、价格与平台信息暂未提供。