Claude CodeにダッシュボードUIの作成・批評力を与えるスキルパッケージです。
中辛 の解説
ダッシュボードのKPIタイル、売上チャート、ランキングリスト、日付範囲ピッカーなどをClaude Codeに「良い見た目」で作らせたり、既存画面を批評させたりするためのスキルファイル一式です。SKILL.mdに作業手順と批評フォーマット、referencesフォルダにコンポーネント仕様・レイアウト・Tailwind v4のカラートークン・コードスニペット・QA手順・SwiftUI版の仕様がまとめられています。127個の実際のダッシュボード画面と1つの売上分析プロダクトの分解から作ったルールだと説明されており、各作業はブラウザ3幅(3440/1440/375)やSwiftUIシミュレーターでのスクリーンショット確認で終わる仕組みです。Claude Codeプラグインとして追加するか、スキルフォルダを~/.claude/skills/にコピーして使います。CodexやCursorなど、Markdownのルールファイルを読める他のエージェントでもSKILL.mdを指定すれば利用できると書かれています。
こんなリポジトリです
こんなときに便利です
- 開発者がClaude Codeに分析・売上ダッシュボードのUIを一から作らせたい場合
- 既存のダッシュボード画面のスクリーンショットを渡して、デザインの問題点をランク付きで批評してもらいたい場合
- 日付範囲ピッカーやKPIタイルなど特定のコンポーネントだけを再デザインしてもらいたい場合
主な機能
ほかとの違い
127個の実際に公開されたダッシュボード画面と1つの売上分析プロダクトの分解・実際の再設計事例から導いたルールを、コードではなく画面のスクリーンショットで検証する仕組みにしている点です。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- Claude Code(またはMarkdownのルール/スキルファイルを読み込める他のコーディングエージェント)
- Webの場合はTailwind(v4)ベースの実装環境、SwiftUIの場合はSwift Charts対応のiOS/macOS開発環境
すぐに始める
- Claude Codeプラグインとして追加する場合
/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skill
- 通常のスキルファイルとして使う場合(上記の代替手順)
git clone https://github.com/abdiraimov-otabek/dashboard-design-skill
cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try abdiraimov-otabek/dashboard-design-skill
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2026 年に作成
「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/abdiraimov-otabek/dashboard-design-skill)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る