abdiraimov-otabek/dashboard-design-skill

これは何？

主な機能

• 01KPIタイル、チャート、ヒートマップ、ブレットグラフ、ランキングリスト、日付範囲ピッカーを扱います。
• 02デスクトップ、横長画面、スマートフォン向けの幅でスクリーンショットQAを行います。
• 03Webプロジェクト向けにTailwind v4のカラートークンとReactのスニペットを用意しています。
• 04シミュレーターでの確認方法を含む、SwiftUIとSwift Chartsのリファレンスを提供します。
• 05問題の深刻度に応じて順位付けする批評フォーマットを備えています。

ユースケース

• コーディングエージェントに分析ダッシュボードを一から作らせる。
• エージェントに既存のダッシュボードのスクリーンショットを批評または再設計させる。
• 日付ピッカーやKPIタイルなどのダッシュボードコンポーネントを、チームのプロジェクト間で標準化する。

クイックスタート

1. 1

   Claude Code にマーケットプレイスを追加する

   /plugin marketplace add abdiraimov-otabek/dashboard-design-skill
2. 2

   dashboard-design プラグインをインストールする

   /plugin install dashboard-design@dashboard-design-skill

使う前に知っておきたいこと

• !Claude Code 向けに作られています。他のエージェントで使うには、AGENTS.md またはルールファイルからスキルを手動で参照する必要があります。
• !Web の仕様には Tailwind と React のスニペットが使われているため、別途用意された SwiftUI のリファレンスを除き、他のスタックでは調整が必要です。
• !作業を終えると、該当箇所を削除しない限り、作者の Mac アプリを宣伝する短い締めのメッセージが追加されます。

収録されている特集

トピック

よくある質問

dashboard-design-skill とは？

スクリーンショットによるQAを交え、見やすく誠実なダッシュボードUIの構築・再設計・批評をコーディングエージェントに教えるClaude Codeスキル。 Claude Code向けのエージェントスキルです。Markdownの指示書とリファレンスファイルで構成され、分析、売上、指標、管理用の各種ダッシュボードを設計するようAIコーディングエージェントを導きます。KPIカードと増減値、チャート、ヒートマップ、ブレットグラフ、期間比較、ランキングリスト、日付範囲ピッカー、フィルター、空状態やエラー状態、横長画面とスマートフォン向けレイアウトを扱います。画面上には数値や図形を優先して表示し、説明はツールチップに移す方針です。

dashboard-design-skill は無料で使えますか？ライセンスは？

dashboard-design-skill は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

dashboard-design-skill は今もメンテナンスされていますか？

活発にメンテナンス中。dashboard-design-skill の最終コミットは 2026年10月28日 です。

dashboard-design-skill は何に使えますか？

コーディングエージェントに分析ダッシュボードを一から作らせる。 エージェントに既存のダッシュボードのスクリーンショットを批評または再設計させる。 日付ピッカーやKPIタイルなどのダッシュボードコンポーネントを、チームのプロジェクト間で標準化する。

dashboard-design-skill のインストール方法は？

Claude Code にマーケットプレイスを追加する: /plugin marketplace add abdiraimov-otabek/dashboard-design-skill dashboard-design プラグインをインストールする: /plugin install dashboard-design@dashboard-design-skill

dashboard-design-skill はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/abdiraimov-otabek/dashboard-design-skill