Menu
Rebrand the app — change the product name, logo, description, theme, and navigation. Use when porting this template into a new product.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Stand 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.
Add 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.
Everything 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.
| name | rebrand |
| description | Rebrand the app — change the product name, logo, description, theme, and navigation. Use when porting this template into a new product. |
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.
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 }.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).
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.
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).