turbo-addlisted

# Adding a New Theme to Turbo-Themes Turbo-themes uses a token-based theming system: theme definitions in `src/themes/packs/` define color tokens, `src/themes/registry.ts` collects them, the build generates CSS from tokens, the theme-selector package provides UI components, and the site plus example projects consume the themes. ## Related Skills - `stand-ts`: TypeScript coding standards - `commit`: semantic commit format when committing changes - `turbo-verify`: use after implementation to verify completeness ## How to Implement: Copy a Reference, Discover the Touchpoints Do NOT write theme packs from a template or trust a memorized file list. Instead: 1. **Pick a reference theme** and mirror its files: - Synced theme with npm package: `src/themes/packs/catppuccin.synced.ts` + `scripts/sync-catppuccin.mjs` - Synced theme: `src/themes/packs/rose-pine.synced.ts` - Manual theme with license/source metadata: `src/themes/packs/nord.ts` - Manual theme: `src/themes/packs/bulma.ts`, `src/themes/packs/dracula.ts` 2. **Discover every touchpoint** by grepping for an existing theme's variant id (pick one from `src/themes/registry.ts`, e.g. a rose-pine or catppuccin variant): ```bash # Every file that mentions an existing variant — the new theme needs the # same touchpoints (packs, token JSON, icons, site data, examples, tests) rg -l 'rose-pine-moon' --hidden -g '!node_modules' -g '!dist' # Family-level touchpoints (type unions, family maps, vend