Claude Code analytics-chart:设计可读的趋势图和表格替代
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/analytics-chart/SKILL.md`,核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/analytics-chart/`,把核对后的文件保存为 `.claude/skills/analytics-chart/SKILL.md`。
- 在该项目根目录启动 Claude Code,在斜杠菜单中选择 `/analytics-chart`。
中文摘要
为分析页面选择主要图表、展示总量和细节,为同一批数据提供可读的文字或表格。
SKILL.md 中文导读
可复现示例
仪表盘图表 chart-16 显示社区报名,每日数据为 {Mon: 6, Tue: 9, Wed: 5}。用一个主趋势图,允许访问单日数值。工作步骤
- 在页面上选出需要优先呈现的指标,核对总量与数据范围。
- 为每个图表读数保留可访问的表格或文字,并检查交互和空状态。
验收方法
主图总量显示 20,表格保留 {Mon: 6, Tue: 9, Wed: 5}。图表说明或交互标签可读出同一日期和值。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中准备数据、组件主题和页面容器。若要实现交互,需要所在项目的图表组件或绘图库。
常见问题
图表有颜色区分,是否还要加可读标签?
需要。图表提供文字或表格替代较易获取相同数据,交互元素也应有可理解的标签。
相关指南
相关推荐
Claude Code accessibility-check:复核移动端大字号和按键反馈
stableversionapps/claude-agentic-sdlc-template
ai-features 技能
stableversionapps/claude-agentic-sdlc-template
code-review 技能
stableversionapps/claude-agentic-sdlc-template
create-feature 技能
stableversionapps/claude-agentic-sdlc-template
create-widget 技能
stableversionapps/claude-agentic-sdlc-template
design-system 技能
stableversionapps/claude-agentic-sdlc-template