Communitygithub.com

ahpxex/open-dashboard

36種類のコピー可能な管理画面UIを収録したスキルカタログ。AIエージェントがインストールして実際のバックオフィス画面を構成できます。TanStack Start、Drizzle + better-auth、shadcn + Tailwind v4上に構築。

open-dashboard とは?

ahpxex/open-dashboardは、開発者やAIエージェント向けに設計されたスキルカタログで、36種類のコピー可能な管理画面UI(Admin UI)を提供します。これらのUI形状をAIエージェントがインストールし、組み合わせることで、実際に動作するバックオフィスアプリケーションを迅速に構築できます。このスキルはTanStack Start、Drizzle ORM + better-auth、shadcn UI + Tailwind v4をベースに構築されており、モダンなフロントエンド技術スタックを活用しています。主な機能として、ブランド情報(製品名、説明、ロゴ、テーマ)を一元管理する設定ファイル、動的なナビゲーション構成、CSS変数によるカラーテーマのカスタマイズが可能です。AIエージェントはこれらの設定を編集するだけで、管理画面全体のブランドやUIを一貫して変更でき、開発効率を大幅に向上させます。

対応~Claude Code~Codex CLI~Cursor
npx skills add ahpxex/open-dashboard

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

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

ドキュメント

Rebrand(リブランド)

リブランドの操作は src/config/app.ts(appConfig)という単一の表面で行います。この設定は、サイドバー(ロゴ + 名前 + ナビゲーション)、ルートドキュメントのhead要素(タイトル + 説明)、テーマプロバイダー、および認証ページ(ブランドヘッダー)で使用されます。これ以外の場所でプロダクト名やロゴをハードコードしないでください。

手順

  1. src/config/app.ts を編集します:

    • name — プロダクト名(サイドバー、<title>、認証ヘッダー)。
    • description — <meta name="description">。
    • logo — 任意のPhosphorアイコンコンポーネント(例:import { RocketIcon })。
    • theme — { defaultTheme: "light" | "dark" | "system", enableSystem }。
  2. ナビゲーションは src/lib/sidebar-items.ts(mainMenuItems、bottomMenuItems)にあり、appConfig.nav として公開されています。アイテムの追加・削除・並び替えを行えます。// create-resource:anchor という行はそのまま維持してください(ジェネレーターがこの行の上に挿入します)。

  3. テーマトークン(色)は src/styles/app.css 内のCSS変数(--primary、--chart-1..5、…)で、ライト用と .dark 用があります。チャートやStatusChipは自動的に再テーマされます。

確認

bun run check を実行した後、アプリを読み込みます。サイドバー、ブラウザタブのタイトル、ログインページに新しいブランドが表示されます。appConfig のユニットテスト(src/config/app.test.ts)がナビゲーションの不変条件をチェックします。

関連スキル