KareemGhorab Apply Doodle Theme
Migrate an existing React web app onto the Doodle UI theme. This is a theme migration, not a rewrite.
Canonical sources (re-check if any command below looks stale):
- Repo: https://github.com/KareemGhorab/doodle-ui
- npm:
@kareem-ghorab/theme(tokens, fonts, blob radii) - Registry:
@doodle-ui→https://doodle-ui.vercel.app/r/{name}.json, or GitHub formnpx shadcn@latest add KareemGhorab/doodle-ui/{name}
Detailed snippets and pitfalls live in reference.md.
Hard rules
- Consume, don't modify the doodle-ui repo. Never publish npm or edit
doodle-uifrom this skill. - Prefer the official README / npm over memory. Never invent registry URLs or CLI flags.
- Theme package is required;
@doodle-uiregistry components are opt-in — ask before adding them. - Preserve architecture and behavior. Only touch styling, tokens, fonts, theme wiring, and (if requested) component sources.
- Keep both themes working. Light + dark must render correctly via the
.darkclass strategy, with an accessible toggle and adequate contrast. - Stay responsive. Theme migration must not break mobile/tablet/desktop layouts. After restyling, primary surfaces must still work at ~375px and ≥1280px with no required horizontal scroll.
- React web only. If the target is React Native, Flutter, or non-React, stop and say the skill does not apply.
Workflow
1. Intake / detect
Read checklists/intake.md. Determine framework (Next.js App Router vs Vite/CRA), package manager, Tailwind major version (v4 is the supported path), whether shadcn/components.json already exists, and scope: theme-only vs theme + doodle components.
If it is not a React web app, stop here.
2. Install the theme package
<pm> add @kareem-ghorab/theme
Use the app's detected package manager (npm i, pnpm add, yarn add, bun add).
3. Wire global CSS (Tailwind v4)
In the app's global stylesheet, in this order:
@import "@kareem-ghorab/theme/fonts.css";
@import "tailwindcss";
@import "@kareem-ghorab/theme/styles.css";
@custom-variant dark (&:is(.dark *));
For non-Tailwind or Tailwind < v4, use the tokens-only path in reference.md.
Remove any existing :root / .dark shadcn token blocks that would override @kareem-ghorab/theme.
4. Wire dark/light
- Next.js: add
next-themesThemeProviderwithattribute="class"(see reference.md). - Vite/CRA: toggle the
darkclass on<html>and persist the choice.
Ensure a visible, keyboard-accessible theme toggle exists.
5. Optional — doodle components
Only if the user wants the restyled shadcn components:
- Ensure
components.jsonexists (npx shadcn@latest initif needed). - Add the
@doodle-uiregistry (or use the GitHub install form). - Add the base style first, then components:
npx shadcn@latest add @doodle-ui/doodle
npx shadcn@latest add @doodle-ui/button @doodle-ui/card @doodle-ui/input
Prefer aligning existing components to doodle rather than leaving two visual systems.
6. Restyle pass
- Map generic radii to
.doodle-radius-*utilities (button/card/input/modal/nav/popover/pill/badge/avatar/media). - Use
font-sans(Neucha) for body andfont-display(Cabin Sketch) for headings. - Replace hard-coded colors with doodle tokens (
bg-primary,text-muted-foreground,border-border, etc.). - Apply
.doodle-focus-glowwhere a chalky focus halo fits. - Keep layouts responsive — do not introduce fixed widths that break mobile.
7. Verify
Run checklists/verify.md: install succeeds, app builds/runs, fonts load, light + dark both look doodle, no broken imports. If the project has an AGENTS.md, note the theme choice there.