# Apply Doodle Theme > Applies Kareem Hany's Doodle UI theme (childish, hand-drawn shadcn/ui look — blob corners, Neucha + Cabin Sketch fonts, light + dark) to an existing React app via the @kareem-ghorab/theme npm package and the optional @doodle-ui shadcn registry. Use when the user asks to apply, add, switch to, or convert an app to the doodle theme / doodle-ui / @kareem-ghorab/theme — or explicitly names apply-doodle-theme. - Skill: `kareemghorab/apply-doodle-theme` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add kareemghorab/apply-doodle-theme` - Raw SKILL.md: https://api.skillmd.com/api/skills/kareemghorab/apply-doodle-theme/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: KareemGhorab (https://skillmd.com/u/kareemghorab) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/kareemghorab/apply-doodle-theme --- # 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 form `npx shadcn@latest add KareemGhorab/doodle-ui/{name}` Detailed snippets and pitfalls live in [reference.md](reference.md). ## Hard rules 1. **Consume, don't modify** the doodle-ui repo. Never publish npm or edit `doodle-ui` from this skill. 2. **Prefer the official README / npm** over memory. Never invent registry URLs or CLI flags. 3. **Theme package is required**; `@doodle-ui` registry components are opt-in — ask before adding them. 4. **Preserve architecture and behavior.** Only touch styling, tokens, fonts, theme wiring, and (if requested) component sources. 5. **Keep both themes working.** Light + dark must render correctly via the `.dark` class strategy, with an accessible toggle and adequate contrast. 6. **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. 7. **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](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 ```bash 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: ```css @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](reference.md). Remove any existing `:root` / `.dark` shadcn token blocks that would override `@kareem-ghorab/theme`. ### 4. Wire dark/light - **Next.js**: add `next-themes` `ThemeProvider` with `attribute="class"` (see [reference.md](reference.md)). - **Vite/CRA**: toggle the `dark` class on `` 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: 1. Ensure `components.json` exists (`npx shadcn@latest init` if needed). 2. Add the `@doodle-ui` registry (or use the GitHub install form). 3. Add the base style first, then components: ```bash 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 and `font-display` (Cabin Sketch) for headings. - Replace hard-coded colors with doodle tokens (`bg-primary`, `text-muted-foreground`, `border-border`, etc.). - Apply `.doodle-focus-glow` where a chalky focus halo fits. - Keep layouts responsive — do not introduce fixed widths that break mobile. ### 7. Verify Run [checklists/verify.md](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.