rebrand

$npx mdskill add ahpxex/open-dashboard/rebrand

Rebrand the app by updating name, logo, description, theme, and navigation.

  • Ports a template into a new product by changing brand assets.
  • Depends on src/config/app.ts, src/lib/sidebar-items.ts, and src/styles/app.css.
  • Reads appConfig to determine new brand values and nav structure.
  • Updates sidebar, browser tab, login page, and theme via CSS variables.

SKILL.md

.github/skills/rebrandView on GitHub ↗
---
name: rebrand
description: Rebrand the app — change the product name, logo, description, theme, and navigation. Use when porting this template into a new product.
---

# Rebrand

The single rebrand surface is `src/config/app.ts` (`appConfig`). It is consumed
by the sidebar (logo + name + nav), the root document head (title +
description), the theme provider, and the auth pages (brand header). Nothing
else should hardcode the product name or logo.

## Steps

1. Edit `src/config/app.ts`:
   - `name` — product name (sidebar, `<title>`, auth header).
   - `description` — `<meta name="description">`.
   - `logo` — any Phosphor icon component (e.g. `import { RocketIcon }`).
   - `theme` — `{ defaultTheme: "light" | "dark" | "system", enableSystem }`.

2. **Navigation** lives in `src/lib/sidebar-items.ts` (`mainMenuItems`,
   `bottomMenuItems`), surfaced as `appConfig.nav`. Add/remove/reorder items;
   keep the `// create-resource:anchor` line (the generator inserts above it).

3. **Theme tokens** (colours) are CSS variables in `src/styles/app.css`
   (`--primary`, `--chart-1..5`, …) for light and `.dark`. Charts and StatusChips
   re-theme automatically.

## Verify

`bun run check`, then load the app: the sidebar, browser tab title, and the
login page all show the new brand. The `appConfig` unit test asserts the nav
invariants (`src/config/app.test.ts`).

More from ahpxex/open-dashboard

SkillDescription
add-backendEverything about the data layer — pick one of six ready-to-run backend templates (TanStack Start + Drizzle + better-auth, Hono + Drizzle + better-auth, Hono + Prisma + better-auth, Hono + Drizzle + Auth.js/NextAuth, FastAPI + SQLAlchemy + JWT, Supabase) and wire the frontend to it through the Repository + AuthProvider seams; scaffold a CRUD resource (Postgres table + server fns + query hooks + DataTable page + create/edit dialog + sidebar entry); bind or swap one resource's data source (Drizzle / REST / GraphQL / in-memory); or re-point the whole app's data + auth at a different backend. Use when adding a data entity or pointing the app at a backend other than the default Postgres + better-auth.
add-componentAdd a copy-ready admin UI building block to a dashboard built on the scaffold-dashboard base — forms (form, wizard, combobox, file upload, inline edit), lists & tables (CRUD list, card grid, infinite/virtual, column controls, filter panel, saved views, CSV export/import), rich views (kanban, calendar, tree, timeline, master-detail), detail & pages (detail/show, record tabs, related records, multi-column layout, settings, chart/dashboard), display & feedback (tags/metadata/progress, empty/loading/error states, notification center, audit trail), and platform features (RBAC, social/magic-link auth, ⌘K global search, i18n, billing, realtime). Each entry has a reference doc with the exact copy + rewire steps.
scaffold-dashboardStand up the dashboard foundation (the platform layer — UI primitives, form system, charts, Repository + adapters, auth seam, theme, routing shell) into a new project as a zero-config runnable app. Run this FIRST when building a dashboard, then compose screens from the add-component catalogue's shapes (add-detail-page, add-kanban, …) and the add-backend operation skill.