mcpField
C
claud3

claud3

github.com/podo数据与数据库29169 次安装1 天前更新
代码仓库

关于 claud3

claud3 是运用 Edward Tufte 数据可视化原则生成 D3.js 图表的技能。它根据数据问题从 80 多种图表类型中选择，并生成响应式、独立的 D3 v7 HTML。

主要功能

  1. 01从 80 多种图表类型中选择
  2. 02运用 Tufte 可视化原则
  3. 03生成单文件 D3 v7 HTML
  4. 04采用深色主题和直接标签
  5. 05支持交互式图表探索

适用场景

  1. 01根据数据问题选择图表类型
  2. 02生成响应式 D3.js 可视化
  3. 03在 playground 模式中探索和改进图表

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill claud3

安装后在 Claude Code 中输入/claud3确认已加载。

附带文件stub.yaml

详细介绍

claud3

目录占位条目 — 完整软件包：dtran320/claud3

决策树

  1. 是否已安装该软件包？ 检查：~/.design-agent-skills/skills/claud3/SKILL.md 是否存在。

    • 是 → 调用 claud3 并继续
    • 否 → 前往第 2 步

  2. 是否可以访问 Shell？

    • 是 → 运行下方的安装命令，然后调用该技能
    • 否 → 显示安装命令；在 Claude Code 中，将其作为以 ! 开头的聊天消息发送 — 添加 -g 可全局安装，否则仅安装到项目中

安装命令

npx skills add dtran320/claud3

安装后调用

  • 技能名称：claud3
  • 触发短语："claud3"、"D3 Tufte"、"80 chart types"、"D3 dark theme"

功能

将 Edward Tufte 的数据可视化原则应用于 D3.js 图表生成。分析底层数据问题，从包含 80 多种图表类型的库中选择最合适的类型，然后使用 D3 v7 生成独立的单文件 HTML，采用深色主题、响应式布局、直接数据标签（无需单独图例）和上下文注释。还包含游乐场模式，可用于交互式探索和优化。

不适用场景

  • 多库可视化 Agent — 改用 data-viz-agent
  • AntV/G2 图表 — 改用 antvis-chart-skills
  • 不受 Tufte 原则约束的快速单图表 — 改用 d3js-skill

评论

支持 Markdown