# Frontend Dataviz

> >

- **Type:** Skill
- **Install:** `agentstack add skill-endearqb-endearqb-skills-endearqb-frontend-dataviz`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [endearqb](https://agentstack.voostack.com/s/endearqb)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [endearqb](https://github.com/endearqb)
- **Source:** https://github.com/endearqb/endearqb-skills/tree/main/skills/endearqb-frontend-dataviz

## Install

```sh
agentstack add skill-endearqb-endearqb-skills-endearqb-frontend-dataviz
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Data Visualization Skill（SWD 原则）

## 核心理念

遵循 Cole Nussbaumer Knaflic 的 **Storytelling with Data** 六大原则：

1. **理解背景** — 谁是受众？他们需要做什么决策？
2. **选择合适图表** — 见下方图表选择矩阵
3. **消除杂乱** — 删除所有不传递信息的元素（网格线、3D 效果、不必要的边框）
4. **引导注意力** — 用颜色/粗细/位置突出关键信息，其余降至背景色
5. **像设计师一样思考** — 对齐、留白、层次
6. **讲述故事** — 图表标题应是洞察，而非描述（"Q3 销售额下降 18%" 而非 "Q3 销售额"）

---

## Step 1：数据分析

拿到数据后，先判断图表类型：

| 目的 | 推荐图表 |
|------|---------|
| 比较类别 | 条形图（横向更易读标签）|
| 展示趋势 | 折线图 |
| 展示构成 | 堆叠条形 / 瀑布图 |
| 展示相关性 | 散点图 |
| 展示分布 | 直方图 / 箱线图 |
| 部分与整体 | 仅当类别 ≤5 时用饼图，否则用条形 |

---

## Step 2：用 ask_user_input_v0 工具向用户提问

**必须在生成任何图表前，使用 `ask_user_input_v0` 工具一次性提出以下两个问题。**

```javascript
ask_user_input_v0({
  questions: [
    {
      question: "颜色风格？",
      type: "single_select",
      options: [
        "专业商务（极简灰+强调色）",
        "社交媒体（鲜艳多彩，高饱和）"
      ]
    },
    {
      question: "是否使用拟物图表（pictograph）？",
      type: "single_select",
      options: [
        "普通图表",
        "拟物图表（用实物图标代替条形）"
      ]
    }
  ]
})
```

---

## Step 3：生成图表（HTML + Chart.js）

输出统一使用 HTML Artifact，内嵌 Chart.js（从 cdnjs 加载）。

**颜色风格映射：**
- 专业商务 → 灰色基调 + `#2563EB` 单强调色，其余数据点全灰 `#D1D5DB`
- 社交媒体 → 高饱和多色方案，见 `references/color-palettes.md`

**拟物图表：** 用户选择后，使用 SVG Pattern + Chart.js canvas 实现，见 `references/pictograph-icons.md`

**SWD 视觉规范（必须遵守）：**
```
网格线：极浅灰 #F3F4F6 或隐藏
边框：chart border 设为 none
图例：仅必要时显示，放在图表上方（自定义 HTML，不用 Chart.js 默认）
标题字体：加粗，16-18px；标签：12-13px #6B7280
柱间距：categoryPercentage: 0.6, barPercentage: 0.75
```

**图表标题规范：**
- ✅ 洞察型："华东区 Q3 营收同比下降 18%，拖累全国整体表现"
- ❌ 描述型："各区域 Q3 营收对比"

完整代码示例见 `references/chart-examples.md`

---

## Step 4：输出检查清单

- [ ] 已通过 ask_user_input_v0 收集用户偏好？
- [ ] 标题是洞察而非描述？
- [ ] 颜色方案与用户选择匹配？
- [ ] 关键数据点已高亮？
- [ ] 删除了所有装饰性杂乱元素？
- [ ] 有数据来源/时间范围注释？

---

## 参考文件

- `references/color-palettes.md` — 配色方案
- `references/pictograph-icons.md` — 拟物图表 SVG 图标库
- `references/chart-examples.md` — HTML + Chart.js 完整示例

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [endearqb](https://github.com/endearqb)
- **Source:** [endearqb/endearqb-skills](https://github.com/endearqb/endearqb-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-endearqb-endearqb-skills-endearqb-frontend-dataviz
- Seller: https://agentstack.voostack.com/s/endearqb
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.