Tune a React and Tailwind v4 theme while the app is running.
Change color, type, radius, and shadows in a floating visual editor.
I prefer making design-token changes visually: pick colors, swap fonts, and see how the pieces fit together. Theme Editor packages that workflow as a Claude Code skill that adds a temporary editor to the app already running on your machine.
Type /theme-editor in Claude Code and it adds a floating popover to your running dev server. The editor reads the project's real CSS variables, applies changes in the browser, and stays out of production builds.
Fourteen color presets, ten font pairings, and six style combinations provide starting points without locking the project to a theme. You can shuffle one category, undo changes, import or export JSON, and export the final values as CSS.
The skill has three phases:
| Command | What happens |
|---|---|
/theme-editor |
Audits the CSS tokens, copies the editor into the project, and wires it into the root layout |
| "apply this theme" + JSON | Writes the exported values into the project's CSS file |
| "remove theme editor" | Deletes the injected files and imports while keeping the CSS changes |
- Claude Code CLI
- A React project with Tailwind CSS v4+
- CSS file using
@theme inline {}or@theme {}with CSS variables
In Claude Code, run:
/plugin add madebysan/theme-editor
Or install manually:
git clone https://github.com/madebysan/theme-editor.git
cp -r theme-editor/skill ~/.claude/skills/theme-editor- Open a React + Tailwind v4 project in Claude Code
- Type
/theme-editor - Refresh your browser. A paintbrush icon appears in the bottom-left corner.
- Click to open the editor popover
- Tweak colors, fonts, and style tokens
- When happy, export as JSON and say "apply this theme" to make it permanent
- Say "remove theme editor" to clean up the injected files
Made by santiagoalonso.com