用途
data-dashboard 是一个 UI/UX 智能体技能，用于构建高密度、数据密集的界面，典型对象是分析控制台和交易终端。技能说明把它们称为最难保持诚实的屏幕：信息密集、以非文字内容为主，而多数默认做法会让它更糟。该技能给出一套完整做法，并声称其示例 showcase（营收控制台）与 terminal（交易台，十种图表）已通过两种主题下的所有检查。
前置检查
技能会读取套件中的 tokens 文件，先运行一次检查命令：
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 或插件安装方式，然后停止；不得猜测无法打开的文件内容。
先定简报
动手前用一行回答四个问题：谁阅读、据此做什么决策（运营的营收控制台与交易员的交易台完全不同）；哪一个数字是领先指标（没有主导数字的仪表盘只是一面墙）；更新节奏（按小时的数据配“上次运行”行，实时数据配走马灯和每行时间戳）；诚实密度是多少（交易终端配得上 12 个面板，周报不需要）。
布局：分带而非等宽卡片
四张等大的统计卡是最明显的“没人设计过”信号。技能要求按带组织，每带形状不同：第 1 带是 3 倍正文大小的英雄指标加自绘图表、横跨大部分宽度；第 2 带是两三个次级数字，堆叠或较窄；第 3 带并排三种不同图表形状（环形、排名条形、迷你走势）；第 4 带是真正可排序的表格加信息流或日志；第 5 带是结束页面的页脚行。使用 12 列网格并显式指定跨度（span 8 / span 4），依次折叠到 6 和 1；主带不要用 repeat(auto-fit, …)，因为它恰好生成要避免的等宽卡片墙。
图表清单
所有图表均为带 viewBox 的内联 SVG，由 CSS 定尺寸，颜色取自 --color-chart-*，不引入图表库或运行时依赖。覆盖：条形/柱形（每个桶一个 rect，rx 做圆角，用于离散周期）；K 线（每周期 line 影线加 rect 实体，按涨跌设类）；成交量（价格图下方同 x 比例的条形，opacity .45）；移动平均（K 线上 2px 圆角连接的 polyline）；折线/迷你走势（polyline，pathLength="1" 用于绘制动画）；面积/堆叠面积（每带一条 path：沿顶部前进、沿前一基线反向、闭合）；深度图（两条累计面积路径围绕中价镜像）；瀑布图（每步一个浮动 rect 加层级间虚线连接）；环形图（circle 配合 stroke-dasharray 与 rotate() 分段，3 至 5 片）；径向仪表（同样技巧，stroke-linecap:round，270 度扫掠）；散点/气泡（circle，半径作第三维）；相关矩阵（HTML 表格，单元格用 color-mix 着色）；热力图（HTML 表格或 rect 网格按值着色）；订单簿（HTML 表格，每行带深度条）。技能要求用确定性脚本（如带种子的随机游走）生成几何，而不是手写坐标，因为手写坐标会漂移且无法复现。
领域正确性
技能强调检查脚本抓不住“画得漂亮但没意义”的图，因此需人工核对：相关矩阵必须对称且对角线恰为 1；堆叠面积必须求和为总量，带之间不得交叉或留缝（常见错误是按索引而非按坐标反转基线，会在带间出现暗楔）；瀑布图需要连接线，且收盘柱必须等于开盘加各步；深度图从中价向两侧上升、绝不下降；环形图各段必须合计为整体。
无障碍契约
每个 SVG 都要有 role="img" 以及 aria-label，或由 aria-labelledby 引用的 title 加 desc；描述要说图表展示的内容而不是“这是图表”，例如“区间 182.06 至 200.10，收于 187.84”优于“价格图”。不得只用颜色编码含义：绿色配加号和箭头，红色配减号；表格单元格中的涨跌也要带文字。表格要有 caption（面板标题已说明时用 .sr-only）、scope="col"/scope="row"，仅在点击真的排序时才用 aria-sort。可排序表头、区间标签页和主题切换都要声明状态，因此必须在真实点击时改变状态，verify_interactive.mjs 会点击并检查。
实测才发现的陷阱
技能列出多项在“看起来已完成”的屏幕上发现的问题：图表调色板不是文字调色板，深色主题下 --color-chart-4 上的白色首字母实测仅 2.65:1；成功绿作为凸起表面上的文字实测 4.43:1，差百分之四未达 AA，应把颜色放在图标和符号上、正文保持中性；axe 不得在过渡中途运行，翻转主题前先禁用过渡，否则对比度在颜色仍在变化时被采样；密集表格放不进手机，应在媒体查询中删掉手机可舍弃的列（迷你走势、派生值）并加注释，不得缩小字号；错峰动画来自 token：calc(var(--duration-fast) * 0.6 * n)，不要写死毫秒；网格行会拉伸子项，两个并排字段只有一个带提示时，无提示控件会被拉高导致输入框高度不一致，需在字段上设 align-content: start 并给控件显式 block-size，并在渲染中量高度；整块面板也受拉伸影响，行高取最高面板，短面板把内容顶到上方形成带边框的空白，每行面板必须声明策略：一个子项吸收余量（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)) 并为窄宽度单独设规则；分类图表必须把类别名放到页面上，只在 aria-label 里写类别名的帕累托图对观看者就是一排匿名条形，标签应置于条形下方并用等间距绘图；.sr-only 需要定位祖先，否则在滚动容器内会相对初始包含块定位、落到视口外并撑大文档滚动宽度；仅在动画期间才有面积的零面积元素在 prefers-reduced-motion 下会被视为内容丢失，雷达扫掠应给一个楔形而非 1px 线；不要跨布局和颜色复用类名，.c4 同时作四列跨度和第四种图表色会把整个面板涂成粉色。
验证循环
技能给出以下命令序列：
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 全绿，却仍然尴尬。
参考示例
两个已通过检查的参考文件：showcase/index.html（营收控制台）与 terminal/index.html（交易台，十种图表）。
适用场景与限制
适用于需要构建分析控制台、交易终端等高密度数据屏幕的智能体工作流。其前提是套件中的 tokens 与脚本可用（KIT_MISSING 时无法继续）；技能本身不提供图表库或运行时依赖；具体脚本参数、各检查项细节及示例文件的实际效果以资料所述为准，其余未在资料中说明的内容暂未提供。