Communitygithub.com

ahpxex/open-dashboard

包含36个可直接使用的管理后台UI组件的技能目录,AI Agent可安装并组合成真实的后台系统。基于 TanStack Start、Drizzle + better-auth、shadcn + Tailwind v4 构建。

open-dashboard 是什么?

这是一个面向AI Agent的管理后台UI组件集,提供了36个可直接复用的管理界面形状(如表格、图表、状态卡片等),Agent可以按需安装并组合成完整的后台应用。该技能基于 TanStack Start(React 全栈框架)、Drizzle ORM + better-auth(身份认证)、shadcn/ui + Tailwind CSS v4(样式与组件)构建,技术栈现代且统一。使用方式为:Agent 通过 `bunx open-dashboard` 命令安装,然后根据需求选择组件组合,最后通过 `bun run check` 验证配置。品牌化非常简便,只需修改 `src/config/app.ts` 中的 `appConfig` 对象即可统一更新侧边栏、浏览器标题、认证页面等所有品牌元素。导航配置在 `src/lib/sidebar-items.ts`,主题颜色通过 CSS 变量控制。该技能适合需要快速搭建 B2B 后台、管理面板、数据看板等场景的开发者或 AI 编码助手。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add ahpxex/open-dashboard

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

品牌化

单一品牌化入口是 src/config/app.ts(appConfig)。该配置被侧边栏(Logo + 名称 + 导航)、根文档头部(标题 + 描述)、主题提供程序以及认证页面(品牌页头)所使用。其他任何地方不应硬编码产品名称或 Logo。

步骤

  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 模式。图表和状态芯片会自动跟随主题变化。

验证

运行 bun run check,然后加载应用:侧边栏、浏览器标签页标题以及登录页面都应显示新的品牌信息。appConfig 的单元测试会断言导航的不变约束(src/config/app.test.ts)。

相关技能