pm-shawn/abu-cowork/html-widget

Name: html-widget
Author: pm-shawn

Claude Code and agent skill by pm-shawn/abu-cowork

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

生成可交互的 HTML 可视化组件 — 算法动画、数据图表、概念演示、交互式教程等。当用户需要交互式演示、动画解释、数据探索、UI 原型等场景时触发，直接输出 html 代码块，前端会在安全沙箱中渲染为可交互组件。

Install

npx vskill@latest install pm-shawn/abu-cowork/html-widget

SKILL.md

你现在帮用户生成 可交互的 HTML 组件。直接在回复中输出 `html 代码块，前端会在安全沙箱 iframe 中自动渲染为可交互组件。

重要规则：

不要调用 generate_image 工具，HTML 代码块就是最终输出
不要调用文件写入工具（write_file 等）把 HTML 保存到本地——这是对话内的临时可视化，不是文件交付物
不要用 Artifacts 模式——直接输出代码块即可
不要调用 report_plan / todo_write——直接输出代码块，不需要规划步骤

何时用可视化 vs 写文件

用户意图	做法
"看看"、"分析一下"、"展示"、"解释"、"演示"	→ 输出 ``html` 代码块（可视化）
"导出"、"保存"、"生成报表"、"做个文件"、"发给领导"	→ 调用 write_file（文件交付）
"分析数据，然后做个报表"	→ 先可视化展示关键发现，再写文件

输出格式

输出 `html 代码块，内容为 HTML 片段（不含 <!DOCTYPE>、<html>、<head>、<body> 标签，这些由渲染器自动包裹）。

必须按此顺序：<style> → HTML 内容 → <script>

html

<style>
  /* 样式在最前——流式渲染时尽早生效 */
</style>
 
<div id="app">
  <!-- HTML 结构——用户最先看到的内容 -->
</div>
 
<script>
  // 逻辑在最后——流式完成后才执行
</script>

尺寸规范

根据内容复杂度选择合适的尺寸：

类型	高度	适用场景
紧凑型	≤150px	单个指标卡片、迷你图、简单计数器
标准型	150-400px	单个图表、数据表格、简单交互
完整型	400-700px	仪表盘、多图表组合、复杂交互

宽度：始终自适应 100%
body 已预设 16px 内边距

设计规范

核心审美原则：克制、留白、精致。宁可简洁到"少了点什么"，也不要堆砌到"多了点什么"。每个像素都要有存在的理由。

配色体系

必须使用浅色/白色背景。禁止深色/黑色背景。

基础色（CSS 变量，已预注入）：

变量	用途	值
`--abu-primary`	主色/强调色	#d97757（暖橙）
`--abu-text`	正文文字	#29261b（深棕）
`--abu-text-muted`	次要文字/辅助信息	#888579（暖灰）
`--abu-bg`	页面背景	#ffffff
`--abu-bg-secondary`	卡片/区块背景	#f5f3ee（米白）
`--abu-border`	边框/分割线	#e5e2db（浅驼）

数据色板（图表数据系列，按优先级排列）：

序号	色值	名称	适用
1	`#4F46E5`	靛蓝	默认首选、主数据系列
2	`#0891B2`	青色	对比系列
3	`#10B981`	翠绿	正向指标（增长/完成）
4	`#F59E0B`	琥珀	警告/中性指标
5	`#EF4444`	赤红	负向指标（下降/错误）
6	`#7C3AED`	紫色	补充系列
7	`#EC4899`	玫红	补充系列

语义色：

成功/增长：#10B981，搭配浅底 #ecfdf5
危险/下降：#EF4444，搭配浅底 #fef2f2
警告：#F59E0B，搭配浅底 #fffbeb
信息：#4F46E5，搭配浅底 #eef2ff

配色原则：

白色基底 + 单一强调色。一个组件最多 1 种强调色 + 数据色板
大面积只用白/米白/浅灰，色彩只用于数据点、状态标识、CTA 按钮
图表背景透明，不要给 chart container 加背景色
相邻数据系列色相间距 > 60°，确保色盲友好

间距系统（4px 网格）

所有间距使用 4 的倍数：

token	值	用途
`--s-1`	4px	图标与文字间距、紧凑元素内边距
`--s-2`	8px	相关元素间距、小卡片内边距
`--s-3`	12px	组内元素间距、按钮组 gap
`--s-4`	16px	段落间距、卡片内边距（默认）
`--s-5`	20px	区块间距
`--s-6`	24px	大卡片内边距、区块间隔
`--s-8`	32px	主要分区间隔

用法示例：padding: 16px、gap: 12px、margin-bottom: 24px。不要出现 5px、7px、15px 这种非 4 倍数值。

圆角

场景	值
小元素（标签、徽章）	`4px`
按钮、输入框	`6px`
卡片、面板	`10px`
大容器、模态框	`12px`

统一使用 border-radius，不要混用不同的圆角值。一个组件内圆角值最多 2 种。

字体与排版

字体栈：system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif
字重：仅 400（正文）和 600（标题/强调），禁用 300/500/700/800
等宽数字：数值型内容加 font-variant-numeric: tabular-nums 确保对齐

层级	字号	字重	行高	用途
大标题	24px	600	1.3	仪表盘主标题
标题	18px	600	1.4	区块标题、图表标题
小标题	15px	600	1.5	卡片标题
正文	14px	400	1.6	默认正文
辅助	12px	400	1.5	标签、图例、脚注、数据来源
超大数字	28-36px	600	1.2	KPI 核心数值

中文排版规则：

中英文/中文与数字之间加半角空格：GDP 总量 101.4 万亿
数字千分位：¥1,234,567
日期格式：2024 年 3 月 或 2024-03-15
百分比：正数加 + 号 → +12.3%
标点用中文全角：， 。 、 （ ）

组件模式

卡片（Card）

css

.card {
  background: var(--abu-bg-secondary);
  border-radius: 10px;
  padding: 16px;
}
.card-title {
  font-size: 12px;
  font-weight: 400;
  color: var(--abu-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

卡片之间 gap 12px
卡片内不要再嵌套卡片（最多一层）
卡片标题用辅助字号（12px）+ muted 色，不要用大标题

KPI 指标卡

css

.kpi-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--abu-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 4px;
}
.kpi-trend.up { color: #10B981; background: #ecfdf5; }
.kpi-trend.down { color: #EF4444; background: #fef2f2; }

趋势指示用 ↑ ↓ 字符 + 语义色背景标签，而不是纯文字
数值居左对齐，不要居中

数据表格（Table）

css

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--abu-text-muted);
  padding: 8px 12px;
  border-bottom: 2px solid var(--abu-border);
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--abu-border);
  color: var(--abu-text);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--abu-bg-secondary); }

表头用小字 + 大写 + muted 色，营造层次感
数字列右对齐 + tabular-nums
不要给表格加外边框，只用行分割线

标签页（Tabs）

css

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--abu-border);
  margin-bottom: 16px;
}
.tab {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--abu-text-muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--abu-text); }
.tab.active {
  color: var(--abu-primary);
  border-bottom-color: var(--abu-primary);
  font-weight: 600;
}

徽章/标签（Badge）

css

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.badge-success { color: #10B981; background: #ecfdf5; }
.badge-danger { color: #EF4444; background: #fef2f2; }
.badge-warning { color: #D97706; background: #fffbeb; }
.badge-info { color: #4F46E5; background: #eef2ff; }

进度条（Progress Bar）

css

.progress-track {
  height: 6px;
  background: var(--abu-border);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--abu-primary);
  transition: width 0.4s ease;
}

分割线

css

.divider {
  height: 1px;
  background: var(--abu-border);
  margin: 16px 0;
}

按钮

基础按钮样式已预设在渲染器中，直接用 <button> 即可。

css

/* 主要操作 */
.btn-primary {
  background: var(--abu-primary);
  color: #fff;
  border-color: var(--abu-primary);
}
.btn-primary:hover { opacity: 0.9; }
 
/* 次要操作 */
.btn-secondary {
  background: var(--abu-bg-secondary);
  border-color: var(--abu-border);
}
 
/* 小按钮 */
.btn-sm { padding: 4px 8px; font-size: 12px; }
 
/* 按钮组 */
.btn-group { display: inline-flex; gap: 8px; }

按钮文字简洁：2-4 个字（开始 重置 下一步）
一组操作最多 1 个主要按钮，其余用默认样式
禁用态：opacity: 0.5; pointer-events: none

布局模式

网格仪表盘

css

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

KPI 行：3-4 列
图表区：1 列（全宽）或 2 列
不要超过 4 列

Flex 布局

css

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

标准页面结构

┌─ 标题区（标题 + 副标题/数据来源）──────────────────┐
│                                                      │
├─ KPI 行（3-4 个指标卡片）──────────────────────────┤
│                                                      │
├─ 主图表区（全宽或左右分栏）────────────────────────┤
│                                                      │
├─ 辅助区（表格/列表/补充图表）──────────────────────┤
│                                                      │
└─ 脚注（数据来源、时间戳）──────────────────────────┘

图表规范

Chart.js 标准配置

javascript

// 全局默认值（在创建图表前设置）
Chart.defaults.font.family = "system-ui, -apple-system, 'PingFang SC', sans-serif";
Chart.defaults.font.size = 12;
Chart.defaults.color = '#888579';
Chart.defaults.plugins.legend.labels.usePointStyle = true;
Chart.defaults.plugins.legend.labels.boxWidth = 8;
Chart.defaults.plugins.legend.labels.boxHeight = 8;
Chart.defaults.plugins.legend.labels.padding = 16;
// 推荐配置
const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'bottom',           // 图例放底部，不占标题空间
      labels: { usePointStyle: true, boxWidth: 8, boxHeight: 8, padding: 16 }
    },
    tooltip: {
      backgroundColor: '#29261b',
      titleFont: { size: 13 },
      bodyFont: { size: 12 },
      padding: 10,
      cornerRadius: 6,
      displayColors: true,
    }
  },
  scales: {
    x: {
      grid: { display: false },       // X 轴隐藏网格线
      ticks: { font: { size: 12 } },
      border: { color: '#e5e2db' }
    },
    y: {
      grid: { color: '#f5f3ee' },     // Y 轴用极浅网格线
      ticks: { font: { size: 12 } },
      border: { display: false }
    }
  }
};

ECharts 标准配置

javascript

const echartsTheme = {
  backgroundColor: 'transparent',
  textStyle: { fontFamily: "system-ui, -apple-system, 'PingFang SC', sans-serif" },
  title: { textStyle: { fontSize: 16, fontWeight: 600, color: '#29261b' } },
  legend: { bottom: 0, itemWidth: 12, itemHeight: 8, textStyle: { fontSize: 12, color: '#888579' } },
  grid: { left: 60, right: 20, top: 40, bottom: 50, containLabel: false },
  xAxis: { axisLine: { lineStyle: { color: '#e5e2db' } }, splitLine: { show: false } },
  yAxis: { axisLine: { show: false }, splitLine: { lineStyle: { color: '#f5f3ee' } } },
  tooltip: {
    backgroundColor: '#29261b', borderWidth: 0, textStyle: { color: '#fff', fontSize: 12 },
    padding: [8, 12], extraCssText: 'border-radius: 6px;'
  },
  color: ['#4F46E5', '#0891B2', '#10B981', '#F59E0B', '#EF4444', '#7C3AED', '#EC4899']
};

图表设计原则

标题在图表外部用 HTML 写，不用 Chart.js/ECharts 内置标题
图例放底部，用圆点样式，不要用方块
网格线极淡（#f5f3ee）或隐藏，不要用深色
柱状图：圆角 borderRadius: 6，柱宽适中不要太细
折线图：线宽 2px，圆点 4px，hover 6px
饼图/环图：环图优先（更现代），中间显示总计
数值格式化：Y 轴大数字用 万 亿 单位，tooltip 显示完整数字
脚注生成时间：不要硬编码日期，用 <span class="generated-date"></span> 占位，JS 中用 new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-') 动态填充

动画与交互

过渡：仅 background、color、border-color、opacity、transform，时长 0.15s
hover 效果：卡片 background 微调亮度，按钮 opacity: 0.9 或 background 变色
可点击元素：必须有 cursor: pointer + hover 视觉变化
禁止：box-shadow 变化、filter: blur()、大幅 transform 动画（流式渲染不兼容）
图表动画：使用库内置动画即可（Chart.js 默认 1s easing），不要自定义复杂动画

禁止清单

❌ 深色/黑色背景
❌ 渐变（linear-gradient / radial-gradient）
❌ 阴影（box-shadow）、模糊（filter: blur）
❌ position: fixed（iframe 内无效）
❌ localStorage / sessionStorage（sandbox 限制）
❌ fetch / XHR 网络请求（所有数据内联）
❌ ES module import（用 <script src=""> 引入）
❌ 非 4 倍数间距（5px, 7px, 15px 等）
❌ 超过 2 种字重（只能 400 和 600）
❌ 纯装饰性元素（无意义的 icon、分隔符、装饰线条）
❌ 手写 SVG icon（用 Unicode 字符替代：↑ ↓ ● ▶ ◀ ✓ ✕ →）

可用外部库（CDN）

html

<!-- 图表 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
 
<!-- 动画 -->
<script src="https://cdn.jsdelivr.net/npm/animejs@3"></script>

可用 CDN 前缀：cdn.jsdelivr.net / cdnjs.cloudflare.com / unpkg.com / esm.sh

库选择指南：

简单柱/线/饼图 → Chart.js（轻量，配置简单）
复杂交互图表、中文场景 → ECharts（功能全，中文友好）
自定义可视化、力导向图 → D3（灵活但代码量大）
动画演示 → anime.js

注意：外部脚本和内联脚本按顺序执行（渲染器已处理加载顺序）。不要用 `window.onload` 包裹代码，直接写即可。

场景模板

指标卡片（紧凑型）

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingbuiltin-skills/html-widget/SKILL.md

Popularity

Repository stars: 169
Repository forks: 47
7-day trend score: 26

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/pm-shawn/abu-cowork/html-widget/badge)](https://verified-skill.com/skills/pm-shawn/abu-cowork/html-widget)

Something wrong with this skill or its page? Tell us.