data-dashboard

技能：数据仪表板

步骤 0——工具包在这里吗？ 此技能会读取工具包中的文件。检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 只有在 KIT_MISSING 时，才说明安装的只有技能文件夹，这是 npx skills add 的安装方式。请明确告知用户，并指引他们使用 npx ux-ui-agent-skills init 或安装插件，然后停止。不要猜测 你无法打开的文件内容。

仪表板是最难保持可信的屏幕：信息密集、大部分内容不是文本，而且几乎所有默认设置都会让它更糟。以下方案生成了 ${CLAUDE_SKILL_DIR}/../../../examples/showcase/ 和 ${CLAUDE_SKILL_DIR}/../../../examples/terminal/，两者在两种主题下都通过了所有检查。

1. 先确定需求，再着手绘制

用一行分别回答以下问题，或从用户那里 /grill-me：

• 谁会阅读这些内容？他们据此做什么决策？ 面向运营人员的营收控制台和面向交易员的交易界面截然不同。
• 哪个数字最重要？ 没有主次之分的仪表板就像一堵墙。
• 更新频率如何？ 每小时更新的数据要标注“上次运行”时间。实时数据要显示逐笔记录和每行的时间戳。
• 信息密度要多高才算合理？ 终端可以容纳 12 个面板，周报则不行。

2. 按布局顺序组织，而不是排列相同大小的卡片

四张大小相同的统计卡片，是最明显的设计缺失信号。将内容分成不同形状的区块：

区块	内容	原因
1	主指标，字号为正文的 3 倍，并配有自己的图表，横跨大部分宽度	视线只落在一个焦点上
2	两到三个次要数据，采用堆叠或窄列布局	布局自然显得克制
3	并排展示三种不同形状的图表（环形图、排名条形图、迷你折线图）	多样性体现设计意图
4	可真正排序的表格，再加上信息流或日志	先摘要，再呈现细节
5	以页脚行收尾	页面应当有意结束

使用 12 列网格，并明确指定跨度（span 8 / span 4），然后依次折叠为 6 列和 1 列。主区块不要使用 repeat(auto-fit, …)——它会生成你想避免的相同大小卡片墙。

3. 图表清单

以下图表都使用普通的内联 SVG，带有 viewBox，由 CSS 控制尺寸，并使用 --color-chart-* 填充颜色。无需图表库，也没有运行时依赖。

图表	几何图形	用途
条形图 / 柱状图	每个分组使用一个 <rect>，用 rx 设置柔和的圆角	离散周期
K 线图	每个周期使用 <line> 影线和 <rect> 实体，并按涨跌设置类名	OHLC 价格
成交量图	置于价格图表下方，与价格图共用 x 轴比例，设置 opacity:.45	判断价格变动背后的力度
移动平均线	在 K 线上方绘制 <polyline>，线宽 2px，连接处圆角	在噪声中观察趋势
折线图 / 迷你折线图	使用 <polyline>，通过 pathLength="1" 实现绘制动画	在单元格中展示趋势
面积图 / 堆叠面积图	每个区段使用一个 <path>：沿顶部向前绘制，沿前一个基线反向绘制，然后闭合	展示随时间变化的构成
深度图	在中间价两侧镜像绘制两条累积面积路径	展示订单簿流动性
瀑布图	每个步骤使用一个悬浮的 <rect>，各级之间用虚线连接	归因分析
环形图	每个区段使用带有 stroke-dasharray 的 <circle>，并通过 rotate() 旋转	展示整体中的份额，使用 3-5 个切片
径向仪表	使用相同技巧，设置 stroke-linecap:round，绘制 270 度弧线	展示某个数值相对于限值的情况
散点图 / 气泡图	使用 <circle>，半径表示第三个维度	展示两个指标和一个权重
相关性矩阵	使用 HTML 表格，通过 color-mix 为单元格着色	展示成对关系
热力图	使用 HTML 表格或 <rect> 网格，根据数值着色	展示队列、日历
订单簿	使用 HTML 表格，每行附带深度条	展示买盘和卖盘

生成几何图形，不要手动放置。 编写一个小型的确定性脚本（使用带种子的随机游走），生成 SVG 元素，然后粘贴输出结果。手动输入的坐标会逐渐偏移，而且无法重新生成。

4. 领域正确性也是专业素养的一部分

关卡无法发现一张绘制精美却毫无意义的图表。请手动检查：

• 相关矩阵必须对称，且对角线上的值必须恰好为 1。对熟悉相关矩阵的人来说，上下三角填入随机值一眼就能看出问题。
• 堆叠面积图的各部分之和必须等于总量；各带不能交叉或留有间隙。常见错误是按索引而不是坐标反转基线，这会在各带之间形成深色楔形区域。
• 瀑布图需要连接线，且结束柱的值必须等于起始值加上各步骤的值。
• 深度在中间价两侧都应向外递增；绝不能递减。
• 圆环图各分段的总和若不等于整体，就是在说谎的饼图。

5. 每张图表的无障碍规范

• 每个 SVG 都要添加 role="img"，并且添加 aria-label 或 <title>+<desc>，通过 aria-labelledby 引用。描述图表展示的内容，而不是说它是一张图表：“范围为 182.06 至 200.10，收盘价为 187.84”优于“价格图表”。
• 绝不能只用颜色表达含义。绿色搭配 + 和箭头，红色搭配 -。表格单元格中也要用文字标明上涨和下跌。
• 表格要添加 <caption>（如果面板标题中已有说明，则使用 .sr-only）、scope="col" / scope="row"，并且仅在点击确实会排序时添加 aria-sort。
• 可排序表头、范围选项卡和主题切换按钮都要声明状态——因此，点击时必须确实改变状态。verify_interactive.mjs 会点击这些控件并进行检查。

6. 只有在测量时才会出现的陷阱

这些问题都是在看起来已经完成的界面上发现的。第一组被门禁捕获；标注为“门禁无法发现”的问题，则是在打开截图检查时发现的，这也是为什么这一步不可省略：

• 图表调色板不适用于文本。 在深色主题中，--color-chart-4 上的白色首字母测得 2.65:1。图表颜色是针对大面积填充形状调配的。
• 在凸起表面上将成功状态的绿色用作文本颜色，测得 4.43:1——距离 AA 标准还差 0.04。把这种颜色用于图标和标记；文本保持中性色。
• 不得在过渡过程中运行 axe。 切换主题前先禁用过渡，否则颜色仍在变化时就会采样对比度。
• 密集表格不适合手机。 在媒体查询中移除手机上可以舍弃的列——比如迷你图、派生值——并在注释中说明。不要把字号缩小到比例尺以下。
• 错开延迟应来自令牌： calc(var(--duration-fast) * 0.6 * n)，绝不要手动写入毫秒值。
• 网格行会拉伸其中的项。 两个字段并排显示，但只有一个字段带提示：没有提示的控件会被拉伸，以匹配较高列的高度，导致两个输入框最终高度不同。在字段上设置 align-content: start，并为控件指定明确的 block-size。在渲染结果中测量高度——截图中差异一目了然，标记中却看不出来。
• 同样的拉伸也会影响整个面板，且门禁无法发现。 一行的高度由最高的面板决定；较短的面板会把内容挤在顶部，底部留下带边框的空白——热图面板的说明文字下方空出 130px，右侧列比旁边的地图少两个面板就结束了。每个面板都必须明确说明自己如何处理多余空间：由一个子项吸收空余空间（grid-template-rows:auto minmax(0,1fr)，且该子项自身的轨道设为 minmax(<min>,1fr)，这样它的行也会拉伸），或者由各行分摊空余空间（align-content:space-between），或者给较短的列再添加一个面板。截取该行的截图，并检查每个面板的底边；这类问题在标记中不会显现。
• auto-fit 会悄悄减少一列，且门禁无法发现。 一个宽约 340px 的面板中有三个仪表，使用 minmax(min(100%,7rem),1fr) 后解析为两个轨道，第三个仪表被孤立在空单元格旁边。如果数量固定且有实际意义，就写成 repeat(3,minmax(0,1fr))，并为窄屏宽度单独编写规则。
• 分类图表必须在页面上显示类别，且门禁无法发现。 如果五种缺陷类型的 Pareto 图中，类别名称只存在于 aria-label，所有看到它的人都只能看到一排没有名称的条形。在条形下方放置标签——在 viewBox 中以均匀间距布局绘图区，让对应的标签网格无需第二套坐标系就能对齐。
• .sr-only 需要有经过定位的祖先元素。 否则，在滚动容器中它会相对于初始包含块计算位置，落在视口之外，并让文档的滚动宽度增加数百像素。
• 只在动画期间才有面积的零面积元素在 prefers-reduced-motion 下会被视为丢失内容。给雷达扫描效果添加扇形，而不是 1px 的线条。
• 绝不要在布局和颜色中重复使用同一个类名。 .c4 同时用作四列跨度和第四种图表颜色，结果把整个面板都涂成了粉色。

7. 循环

node ${CLAUDE_SKILL_DIR}/../../../scripts/measure_render.mjs <file> && node ${CLAUDE_SKILL_DIR}/../../../scripts/measure_render.mjs --dark <file>
node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_states.mjs <file>  && node ${CLAUDE_SKILL_DIR}/../../../scripts/axe_audit.mjs --dark <file>
node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_responsive.mjs <file> --scale=1.25
node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_interactive.mjs <file>
node ${CLAUDE_SKILL_DIR}/../../../scripts/slop_tells.mjs --strict <file> && node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs --strict <file>

然后截取截图并检查，在两种主题下分别查看 1600 和 390 宽度。门禁会放过绘制错误的图表。一个不对称的相关矩阵可以拿到 16/16 的绿色通过结果，但仍然令人尴尬。

已完成的参考示例，均已通过门禁验证：${CLAUDE_SKILL_DIR}/../../../examples/showcase/index.html（收入控制台）和 ${CLAUDE_SKILL_DIR}/../../../examples/terminal/index.html（交易工作台，十种图表类型）。