// Visual theme editor for React + Tailwind CSS v4. Tweak colors, fonts, radius, and shadows live in the browser.
theme-editor
git log --oneline --stat
HEAD
- Stars
- 1
- Forks
- 3
- Updated
- Apr 27, 2026
repo --stat
stars
1
forks
3
last update
Apr 27, 2026
license
MITv1.0.0
quickstart.sh
3 steps
- Install
// Drops SKILL.md into ~/.claude/skills/
$ claude skills add madebysan-theme-editor - Invoke
// Run from any project directory
$ claude --skill madebysan-theme-editor "give my landing page a hero treatment" - Or copy this from the README
// extracted from a Usage / Example section
$ skill/ ├── SKILL.md # Skill instructions (what Claude reads) ├── assets/ # Template files injected into your project │ ├── ThemeDrawer.tsx # Main floating popover UI │ ├── ColorControl.tsx # Color picker with hex input │ ├── FontControl.tsx # Font input with Google Fonts auto-loading
madebysan-theme-editor/
references
- references/
- SKILL.mdopen
- README.mdopen
SKILL.md
readonly
- name:
- theme-editor
- slug:
- madebysan-theme-editor
- version:
- v1.0.0
- license:
- MIT
- author:
- @madebysan
- repository:
- github.com/madebysan/theme-editor
- categories:
- tags:
- #claude-code-skill#css-variables#design-tokens#design-tools#react#tailwindcss#theme-editor
- description:
Visual theme editor for React + Tailwind CSS v4. Tweak colors, fonts, radius, and shadows live in the browser.
features.md
8 capabilities
// What you can do with it
- 14 curated color presets with prev/next navigation
- 10 Google Font pairings with auto-loading
- 6 style combos (Sharp, Rounded, Default, Soft, Bold, Minimal)
- Shuffle per category or shuffle everything at once
- Undo/redo with Cmd+Z / Cmd+Shift+Z
- Export as CSS or JSON, import from JSON
- LocalStorage persistence across page refreshes
- Dev-only rendering (stripped from production builds)
README.md
madebysan-theme-editor/README.md
6 sections
Loading README…
@madebysan/index.json
more by author
$ cat reviews/
Reviews
// No reviews yet. Be the first.
Loading review form…