From sync
当用户需要新建、重构、优化、复制、扩展 Grafana Dashboard 或 Panel 时触发。适用于梳理 dashboard 信息架构、选择 panel 类型、统一 datasource/阈值/配色/布局、输出可直接落地的 dashboard JSON 修改方案。若任务是配置 Grafana MCP、安装工具、或处理账号连接问题,转交 mcp-grafana,而不是使用此 skill。
npx claudepluginhub taptap/claude-plugins-marketplaceThis skill uses the workspace's default tool permissions.
只负责 Dashboard 设计与改造,不负责 Grafana MCP 安装、配置或凭证问题。
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.
只负责 Dashboard 设计与改造,不负责 Grafana MCP 安装、配置或凭证问题。
优先处理这些任务:
不要处理这些任务:
mcp-grafana~/.claude.json、~/.cursor/mcp.json、~/.codex/config.toml先识别 Dashboard 的目标用户和核心问题,再开始画面板。
必须先确认:
如果用户需求模糊,先收敛成一句话目标,例如:
这个 Dashboard 的目标是让值班同学在 10 秒内判断服务是否异常、异常集中在哪个模块、以及是否正在扩大。
先读取原 Dashboard,再决定改造策略。
必须执行:
get_dashboard_by_uid 读取原 Dashboarduiddatasource.uid重点检查:
没有现成 Dashboard 时,先补齐最小输入。
至少确认:
prometheus、loki、cf-analysisservice、cluster、instance、country如果 datasource 不明确,必须先问,不要擅自假设。
遵循“先判断,再定位,再展开”的顺序。
推荐结构:
Row 1: 全局健康 / 总览
Row 2: 核心趋势 / 关键漏斗
Row 3+: 分模块拆解
Bottom: 详细表格 / TopN / 原始明细
如果用户给的指标很多,优先删减,不要把所有指标摊平展示。
顶部展示少量高价值结论,中部展示趋势和对比,底部展示明细。
推荐模板:
Row 1: 4-6 个 Stat,回答“现在是否健康”
Row 2: 2-4 个 TimeSeries / Gauge,回答“趋势是否恶化”
Row 3+: 按模块或维度拆组,回答“问题出在哪里”
Bottom: Table / BarGauge / PieChart,回答“具体是谁造成的”
可以使用 emoji 前缀,但要克制,保证可扫描性。
推荐:
🎯 全局概览⚡ 性能表现🚀 服务健康📱 用户体验📊 业务结果🔥 错误与告警💻 资源利用不要把 emoji 当作唯一语义,标题本身必须可读。
按问题选面板,不按“好看”选面板。
| 场景 | 推荐面板 | 不推荐 |
|---|---|---|
| 单值状态 | stat | gauge 过多堆叠 |
| 百分比健康度 | gauge | 用 stat 硬表示区间 |
| 时间趋势 | timeseries | bargauge |
| 排名对比 | bargauge / table | piechart |
| 占比分布 | piechart | 类别很多时继续用饼图 |
| 详细明细 | table | 用多个 stat 拼表格 |
| 状态变化时间轴 | state-timeline | timeseries 强行表达状态切换 |
额外约束:
tablebargauge 或 tablestat + sparkline,而不是单独再加一个小趋势图| 状态 | 色值 |
|---|---|
| 危险 | #F2495C |
| 警告 | #FF9830 |
| 正常 | #73BF69 |
阈值必须有业务语义,不要只给颜色不给解释。
优先从 Grafana 常用调色板中选,控制同一 Row 内颜色数量。
| 色值 | 用途建议 |
|---|---|
#5794F2 | 主趋势 |
#6ED0E0 | 次趋势 |
#73BF69 | 健康 / 成功 |
#FF9830 | 警告 / 风险 |
#F2495C | 错误 / 异常 |
#B877D9 | 对比系列 |
#FADE2A | 突出提醒 |
#8AB8FF | 次级蓝色系列 |
规则:
必须显式配置:
percentunitmssbytes标题规则:
Top 5 Error APIscolorMode: backgroundgraphMode: areafillOpacity: 20gradientMode: opacitylineInterpolation: smooththresholdsStyle.mode: line+area只在趋势连续、采样足够平滑时使用 smooth。尖峰型数据不要强行平滑。
showThresholdLabels: trueshowThresholdMarkers: trueGauge 适合展示占比和容量,不适合展示经常波动的绝对值。
pieType: donutlegend.displayMode: table只有类别少、占比意义强时才用。
displayMode: gradientorientation: horizontal适合 TopN、排名、对比,不适合展示时间轴数据。
默认原则:
datasource.uid 一致如果用户没有给具体 query:
只有在“用户会反复切换维度”时才加变量。
适合加变量的场景:
不适合加变量的场景:
交付时优先给出可直接落地的结果,而不是只讲理念。
优先级从高到低:
如果用户是让你“帮我设计”,至少输出:
提交前逐项检查:
uid 或关键变量如果不能通过上面的检查,不要急着输出 JSON,先收敛设计。