Agent Skills › nevertoday/zhongguo-traditional-colors › xxd-data-viz

xxd-data-viz

GitHub

基于中国传统色创建数据可视化调色板。支持分类、顺序、发散等图表模式，强调区分度与无障碍访问。提供ECharts/D3等代码及详细配色规则，解决传统色在图表中适用性差的问题。

skills/xxd-data-viz/SKILL.md nevertoday/zhongguo-traditional-colors

触发场景

需要基于中国传统色的数据可视化配色生成ECharts、D3或Chart.js图表颜色配置设计符合无障碍标准的图表调色板

安装

npx skills add nevertoday/zhongguo-traditional-colors --skill xxd-data-viz -g -y

更多选项

不安装直接使用

npx skills use nevertoday/zhongguo-traditional-colors@xxd-data-viz

指定 Agent (Claude Code)

npx skills add nevertoday/zhongguo-traditional-colors --skill xxd-data-viz -a claude-code -g -y

安装 repo 全部 skill

npx skills add nevertoday/zhongguo-traditional-colors --all -g -y

预览 repo 内 skill

npx skills add nevertoday/zhongguo-traditional-colors --list

SKILL.md

Frontmatter

{
    "name": "xxd-data-viz",
    "description": "Create chart and data visualization palettes from Chinese traditional colors. Use when a user needs categorical, sequential, diverging, highlight, dashboard, map, ECharts, D3, Chart.js, or colorblind-aware data palettes with Chinese traditional color identity."
}

xxd-data-viz

Purpose

Use this skill when colors must encode data. It should not turn a poster palette into a chart palette; it must choose colors by data meaning, distinguishability, ordering, and accessibility.

Pain Points This Solves

Attractive palettes fail charts because categories are not distinct or values are not ordered by lightness.
Designers mix categorical, sequential, and diverging color logic in one chart.
Chart color often relies on hue alone, which weakens accessibility and makes legends harder to read.

Data Contract

Use the bundled references inside this skill:
- references/chinese-color-master-list.md: full 742-color Markdown source list.
- references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
- references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
Do not treat all harmony colors as chart-ready; validate distinctness or ordering for the chart mode.
Do not rely on hue alone. Add label, order, pattern, stroke, marker shape, direct labeling, or interaction guidance when needed.

Chart Mode Workflow

Identify data meaning before picking colors:
- Categorical: unrelated groups.
- Sequential: low to high values.
- Diverging: two directions around a meaningful midpoint.
- Highlight: one or two emphasized series against quiet context.
- Dashboard semantic: success, warning, danger, info, selected, neutral.
Choose selection criteria:
- Categorical: maximize hue and lightness separation.
- Sequential: monotonic lightness is more important than poetic harmony.
- Diverging: balance perceived strength on both sides and reserve a neutral midpoint.
- Highlight: keep background series quiet and the target unmistakable.
Build the palette from project colors only.
Add chart implementation details:
- Background/grid/axis color.
- Legend or direct labels.
- Hover and selection color.
- Missing data and disabled series.
If requested, output ECharts, D3, Chart.js, or CSV arrays.