mcpbeat

Rebrand

ahpxex/rebrand

Rebrand the app — change the product name, logo, description, theme, and navigation. Use when porting this template into a new product.

346 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
117
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/ahpxex/open-dashboard --skill rebrand

The instruction itself

3 sections, as written by the author

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

  • 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.

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).

How to use it

Copy the folder

Take ahpxex/rebrand from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.