Install
openclaw skills install @wwbwin/csv-viz-craftopenclaw skills install @wwbwin/csv-viz-craft团队成员之间传递数据时,Excel 表格需要安装软件、手机端体验差、分享出去容易版本混乱。更关键的是,静态表格无法筛选、排序、搜索,大量数据时定位困难。
本 Skill 将 CSV 数据转化为可交互的 HTML 数据表格,支持列排序、全局搜索、列筛选、分页、行选择、统计摘要等交互功能。提供 7 种展示模式——从标准表格到卡片网格、从简易透视到筛选面板,让数据分享变得简单、直观、可交互。
将 CSV 数据转化为可筛选、排序、搜索的交互式数据表格 HTML。
作者:wuwenbin-beijing-st
运行此 Skill 后,按以下步骤操作:
姓名,年龄,城市,月收入
张三,28,北京,15000
李四,35,上海,22000
支持标准 CSV、TSV(制表符分隔)、以及带 BOM 的 UTF-8 编码。
| 数据类型 | 推荐模式 | 特点 |
|---|---|---|
| 结构化数据表 | data-table(标准表格) | 列排序、筛选、分页、可定制列宽 |
| 产品/人员展示 | card-grid(卡片网格) | 卡片式布局,适合图文展示 |
| 分类汇总 | pivot-lite(简易透视) | 按维度分组汇总,支持计数/求和/均值 |
| 多维度分析 | filter-dashboard(筛选面板) | 多维度联动筛选,适合探索式分析 |
| 选项对比 | comparison(对比视图) | 选中多行并排对比,适合产品/方案对比 |
| 趋势数据 | chart-embed(内嵌图表) | 表格内嵌迷你柱状图/折线图 |
| 报告输出 | export-ready(打印优化) | 打印友好,去掉交互元素,保留结构 |
分类色(用于类别区分)
#4e79a7 #f28e2b #e15759 #76b7b2 #59a14f #edc948 #b07aa1 #ff9da7
连续色(用于数值渐变)
#c7e9c0 → #74c476 → #238b45
发散色(用于正负对比)
#d73027 → #f7f7f7 → #1a9642
--bg: #ffffff
--text: #1f2937
--header-bg: #1a73e8
--header-text: #ffffff
--row-even: #f8fafc
--row-hover: #e0f2fe
--border: #e2e8f0
--bg: #1e293b
--text: #e2e8f0
--header-bg: #0f172a
--header-text: #94a3b8
--row-even: #1e293b
--row-hover: #334155
--border: #475569
--bg: #f8f9fa
--text: #343a40
--header-bg: #495057
--header-text: #ffffff
--row-even: #ffffff
--row-hover: #e9ecef
--border: #dee2e6
--bg: #fefcf6
--text: #3a3a3a
--header-bg: #ea580c
--header-text: #ffffff
--row-even: #fff7ed
--row-hover: #ffedd5
--border: #fed7aa
/csv-viz主入口命令。粘贴 CSV 数据,选择展示模式后生成交互式数据表格 HTML。
/csv-dashboard生成带图表的仪表盘视图。自动识别数值列和分类列,生成统计图表 + 数据表格的组合视图。
skills/csv-viz-craft/
├── SKILL.md
├── patterns/
│ ├── data-table.json # 标准数据表格
│ ├── card-grid.json # 卡片网格
│ ├── pivot-lite.json # 简易透视表
│ ├── filter-dashboard.json# 多维度筛选面板
│ ├── comparison.json # 对比视图
│ ├── chart-embed.json # 内嵌迷你图表
│ └── export-ready.json # 打印/导出优化
└── templates/
├── base.html
├── data-table.html
├── card-grid.html
├── pivot-lite.html
├── filter-dashboard.html
├── comparison.html
├── chart-embed.html
└── export-ready.html