菜单
渲染可视化组件——用 show_widget 编译 SVG / HTML(no-script) / Mermaid 图做自由可视化。内容能落 present_to_user 4 类 kind → 不用 widget；长期可编辑产物 → TabData/ TabDoc/TabSlide。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/tabtin-ai/TabTin --skill tabtin-widget命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies
Use when you have a written implementation plan to execute in a separate session with review checkpoints
基于 SOC 职业分类
正在显示 SKILL.md
| name | tabtin-widget |
| description | 渲染可视化组件——用 show_widget 编译 SVG / HTML(no-script) / Mermaid 图做自由可视化。内容能落 present_to_user 4 类 kind → 不用 widget；长期可编辑产物 → TabData/ TabDoc/TabSlide。 |
| metadata | {"version":"1.0.0","tabtin":{"category":"media","autoActivateFor":[],"tags":["widget","visualization","svg","html","mermaid","chart","diagram","mockup"],"tools":["show_widget"]}} |
show_widget 用来在 chat 内画一次性视觉内容：安全、美观、可下钻；不是文件、表格、文档或小应用。
本 Skill 带有 examples/ 目录。遇到具体样式不确定、需要复用成熟图形模式，或用户要求“给我一个图/流程/架构/UI mockup”时，先按需读取对应示例：
examples/git-rebase-merge-mermaid.md、examples/sales-q3-mermaid-or-svg.md、examples/mermaid-er.md、examples/k8s-architecture-svg.mdexamples/settings-page-html.md、examples/html-stepper.mdexamples/purchase-journey-sendprompt.mdpresent_to_user。show_widget。详见 decision-tree.md。装饰图、普通总结、原始表格、已有图片 URL 不用 widget。
| format | 用它 | 别用它 |
|---|---|---|
svg | 架构图、柱状图、几何图、需要 sendPrompt 的节点 | 大量规则节点图 |
html | 静态设置页、stepper、卡片/网格 mockup | 脚本、真实表单、复杂滚动页 |
mermaid | flowchart / sequence / ER / Gantt | 像素级 UI、点击交互 |
Mermaid 传源码，工具执行时编译成 SVG；不要自己加载 runtime。
show_widget({
title?: string,
summary: string, // 必填：移动端 fallback + a11y
format: "svg" | "html" | "mermaid",
loading_message?: string, // 推荐放在 code 前输出
code: string, // ≤8KB
group_id?: string,
group_title?: string,
})
summary 不是标题，写成无图也能懂的一句话：Q3 区域销售柱状图：华东 320 万领先，华南 280 万次之，西部最低。 不要写 销售图。loading_message 写用户看得懂的短句：正在生成 Q3 销售对比图...。
只有“点了会开启新一轮对话”的元素能用 sendPrompt(text, meta?)。text 是用户会说的话，建议 ≤200 字、硬上限 1000；meta 只放小 JSON，硬上限 4KB。必须有 cursor:pointer + hover/focus 反馈；不可点元素禁止装成交互。详见 sendPrompt-usage.md。
HTML no-script；不要外链脚本/CDN、javascript:、iframe/object/embed、form、非 sendPrompt 事件、allow-same-origin。Mermaid 不用 click directive。SVG/HTML 一次写完整，不要多次调工具拼同一张图。
颜色只写 hsl(var(--token))，自动适配 light/dark：--background、--foreground、--muted-foreground、--primary、--border、--accent、--success、--warning、--destructive。字体用 system stack：-apple-system,BlinkMacSystemFont,system-ui,"PingFang SC","Microsoft YaHei",sans-serif。SVG 推荐 viewBox="0 0 680 H"、width="100%"、H≤480。
更多：design-tokens.md、sandbox.md、failure-patterns.md、examples/。