Communitygithub.com

ダッシュボードビルダー

Grafana、SigNoz、および類似のプラットフォーム向けに、実際の運用担当者の質問に答える監視ダッシュボードを構築します。メトリクスを運用可能なダッシュボードに変換するときに使用します(見た目だけのダッシュボードではありません)。

ダッシュボードビルダー とは?

このスキルは、開発者やAIエージェントが運用ダッシュボードを構築するための体系的なアプローチを提供します。単にすべてのメトリクスを表示するのではなく、「健全か?」「ボトルネックはどこか?」「何が変わったか?」「どのようなアクションを取るべきか?」といった運用担当者の実際の質問に答えられるダッシュボードを作成します。Grafana、SigNoz、Kibanaなど複数のプラットフォームに対応し、運用質問の定義から始まり、対象プラットフォームのスキーマ調査、最小限の有用なボード構築、無駄なパネルの削除というワークフローに従います。Elasticsearch、Kafka、APIゲートウェイなどの具体的なユースケース向けのサンプルパネルセットも含まれており、品質チェックリストに従ってダッシュボードの実用性を検証できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/everything-claude-code/tree/main/skills/dashboard-builder

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ダッシュボードビルダー は何をしますか?

人が運用できるダッシュボードを構築するタスクがある場合に使用します。

目標は「すべてのメトリクスを表示すること」ではありません。目標は以下に答えることです:

  • 健全か?
  • ボトルネックはどこか?
  • 何が変わったか?
  • 誰かがどのようなアクションを取るべきか?

使用タイミング

  • 「Kafka監視ダッシュボードを構築する」
  • 「Elasticsearch用のGrafanaダッシュボードを作成する」
  • 「このサービスのSigNozダッシュボードを作成する」
  • 「このメトリクスリストを実際の運用ダッシュボードに変換する」

ガードレール

  • 視覚的なレイアウトから始めず、運用担当者の質問から始めること
  • 存在するからといって利用可能なすべてのメトリクスを含めないこと
  • 構造なしにヘルス、スループット、リソースパネルを混在させないこと
  • タイトル、単位、適切なしきい値なしでパネルを出荷しないこと

ワークフロー

1. 運用質問を定義する

以下に従って整理する:

  • ヘルス / 可用性
  • レイテンシ / パフォーマンス
  • スループット / ボリューム
  • 飽和度 / リソース
  • サービス固有のリスク

2. 対象プラットフォームのスキーマを調査する

まず既存のダッシュボードを検査する:

  • JSON構造
  • クエリ言語
  • 変数
  • しきい値のスタイル
  • セクションレイアウト

3. 最小限の有用なボードを構築する

推奨構成:

  1. 概要
  2. パフォーマンス
  3. リソース
  4. サービス固有のセクション

4. 無駄なパネルを削除する

すべてのパネルは実際の質問に答える必要があります。答えられない場合は削除します。

サンプルパネルセット

Elasticsearch

  • クラスタヘルス
  • シャード割り当て
  • 検索レイテンシ
  • インデックスレート
  • JVMヒープ / GC

Kafka

  • ブローカ数
  • レプリケーション不足パーティション
  • メッセージ受信 / 送信
  • コンシューマラグ
  • ディスクおよびネットワークプレッシャー

APIゲートウェイ / イングレス

  • リクエストレート
  • p50 / p95 / p99 レイテンシ
  • エラーレート
  • 上流のヘルス
  • アクティブ接続数

品質チェックリスト

  • 有効なダッシュボードJSON
  • 明確なセクショングループ化
  • タイトルと単位が存在する
  • しきい値/ステータス色が意味を持つ
  • 共通フィルタ用の変数が存在する
  • デフォルトの時間範囲と更新間隔が適切
  • 運用価値のない無駄なパネルがない

関連スキル

  • research-ops
  • backend-patterns
  • terminal-ops

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

accessibility

Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA. Use when building or auditing UI that must meet WCAG 2.2 Level AA, or when reviewing a change for keyboard, contrast, or screen-reader support.

affaan-m/claude-api

Anthropic Claude API patterns for Python and TypeScript. Covers Messages API, streaming, tool use, vision, extended thinking, batches, prompt caching, and Claude Agent SDK. Use when building applications with the Claude API or Anthropic SDKs.

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

affaan-m/everything-claude-code

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

affaan-m/everything-claude-code-conventions

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

affaan-m/gget

gget CLI and Python workflow for quick genomic database queries, sequence lookup, BLAST-style searches, enrichment checks, and reproducible bioinformatics evidence logs.

affaan-m/literature-review

Systematic literature-review workflow for academic, biomedical, technical, and scientific topics, including search planning, source screening, synthesis, citation checks, and evidence logging.

affaan-m/motion-ui

Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.

affaan-m/project-guidelines-example

Example project-specific skill template based on a real production application.

affaan-m/pubmed-database

Direct PubMed and NCBI E-utilities search workflows for biomedical literature, MeSH queries, PMID lookup, citation retrieval, and API-backed literature monitoring.

affaan-m/scholar-evaluation

Structured scholarly-work evaluation for papers, proposals, literature reviews, methods sections, evidence quality, citation support, and research-writing feedback.

affaan-m/uspto-database

USPTO patent and trademark data workflow for official record lookup, PatentSearch queries, TSDR checks, assignment data, and reproducible IP research logs.

agent-architecture-audit

Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution, tool discipline failures, hidden repair loops, and rendering corruption. Produces severity-ranked findings with code-first fixes. Essential for developers building agent applications, autonomous loops, or any LLM-powered feature. Use when an agent or LLM feature misbehaves and the failing layer is unknown, or before shipping an agent stack.

agent-eval

Head-to-head comparison of coding agents (Claude Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and consistency metrics. Use when choosing between coding agents, or when a change to an agent setup needs measured pass rate, cost, and time rather than an impression.

agent-harness-construction

Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates. Use when defining or revising an agent

agentic-engineering

Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing. Use when planning or executing engineering work that agents will carry out end to end.

agentic-os

Build persistent multi-agent operating systems on Claude Code. Covers kernel architecture, specialist agents, slash commands, file-based memory, scheduled automation, and state management without external databases. Use when building a persistent multi-agent system on Claude Code with its own memory, commands, and scheduling.

agent-introspection-debugging

Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports. Use when an agent run fails and you need a reproducible diagnosis instead of a retry.

agent-payment-x402

Add x402 payment execution to AI agents with per-task budgets, spending controls, and non-custodial wallets. Supports Base through agentwallet-sdk and X Layer through OKX Payments / OKX Agent Payments Protocol. Use when an agent must pay for something itself and needs per-task budgets, spending controls, and a non-custodial wallet.

関連スキル