← ClaudeAtlas

logo-theme-managerlisted

Build and maintain a true theme system for websites. Use when replacing a logo, swapping a favicon, generating a favicon set, building a token-based theme.css with CSS variables, auditing brand consistency across a site, hunting down hard-coded hex colors in pages, tracking every copy of a logo across a project, or making sure a brand change reaches every page, template, and clone. Prevents the classic failure where logo files, colors, and favicons get missed when a brand changes.
MyAiFreedomSystems/logo-theme-manager · ★ 0 · AI & Automation · score 67
Install: claude install-skill MyAiFreedomSystems/logo-theme-manager
# Logo & Theme Manager ## Why this skill exists AI site builders rarely produce what a web developer would call a *theme*. They scatter hex colors inline across pages, copy-paste logo files into random folders, forget the apple-touch-icon on half the pages, and leave no single source of truth. Then the brand changes — a new logo, a new accent color — and updating the site becomes a scavenger hunt: some files get replaced, some don't, and nobody notices the missed ones until a customer does. This skill fixes both halves of the problem: 1. **A real theme system** — one `theme.css` full of CSS custom properties (tokens) that every page links to and consumes. Colors, fonts, spacing, radii, and dark-mode variants live in exactly one file. 2. **A manifest-driven asset tracker** — a JSON manifest listing *every* copy of the logo/favicon set across the project (and its clones), with sha256 fingerprints, so `--check` proves nothing drifted and `--replace` regenerates and redistributes the full asset set in one command. ## Part 1 — Build a true theme system ### 1.1 Create the token file Create `assets/theme.css` (exact path is your choice; one file, one location): ```css /* theme.css — the ONLY place brand values are defined */ :root { /* Brand palette */ --color-primary: #2E5BFF; --color-primary-hover: #1F44CC; --color-accent: #FFB020; --color-bg: #FFFFFF; --color-surface: #F5F6F8; --color-text: #1A1D24; --color-text-muted: #5A6070; --color-bor