{"id":48521144,"url":"https://github.com/madebysan/theme-editor","last_synced_at":"2026-04-07T21:01:33.930Z","repository":{"id":344076709,"uuid":"1170204440","full_name":"madebysan/theme-editor","owner":"madebysan","description":"A Claude Code skill that injects a floating visual theme editor into React + Tailwind CSS v4 projects","archived":false,"fork":false,"pushed_at":"2026-03-13T00:31:32.000Z","size":4022,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-13T07:51:56.819Z","etag":null,"topics":["claude-code","claude-code-skill","design-tokens","react","tailwindcss","theme-editor"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/madebysan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-01T21:07:39.000Z","updated_at":"2026-03-13T00:31:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/madebysan/theme-editor","commit_stats":null,"previous_names":["madebysan/theme-editor"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/madebysan/theme-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madebysan%2Ftheme-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madebysan%2Ftheme-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madebysan%2Ftheme-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madebysan%2Ftheme-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madebysan","download_url":"https://codeload.github.com/madebysan/theme-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madebysan%2Ftheme-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31528751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["claude-code","claude-code-skill","design-tokens","react","tailwindcss","theme-editor"],"created_at":"2026-04-07T21:01:04.255Z","updated_at":"2026-04-07T21:01:33.921Z","avatar_url":"https://github.com/madebysan.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eTheme Editor\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA Claude Code skill that injects a floating visual theme editor\u003cbr\u003einto any React + Tailwind CSS v4 project.\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ca href=\"#install\"\u003e\u003cstrong\u003eInstall the skill\u003c/strong\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/theme-editor.gif\" alt=\"Theme Editor demo — cycling through presets on a dashboard\" width=\"800\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/theme-editor-ui.png\" alt=\"Theme Editor UI — Colors, Type, and Style tabs\" width=\"800\"\u003e\n\u003c/p\u003e\n\n---\n\n## What it does\n\nType `/theme-editor` in [Claude Code](https://claude.com/claude-code) and it injects a floating popover into your running dev server. Tweak your design tokens live in the browser — colors, fonts, border radius, shadows, spacing — and see changes instantly.\n\n**Features:**\n- 14 curated color presets with prev/next navigation\n- 10 Google Font pairings with auto-loading\n- 6 style combos (Sharp, Rounded, Default, Soft, Bold, Minimal)\n- Shuffle per category or shuffle everything at once\n- Undo/redo with Cmd+Z / Cmd+Shift+Z\n- Export as CSS or JSON, import from JSON\n- LocalStorage persistence across page refreshes\n- Dev-only rendering (stripped from production builds)\n- Project-aware — adapts to your actual CSS variables\n\n## How it works\n\nThe skill has three phases:\n\n| Command | What happens |\n|---------|-------------|\n| `/theme-editor` | **Inject** — Audits your CSS tokens, restructures static variables if needed, copies 11 files into your project, wires the editor into your root layout |\n| \"apply this theme\" + JSON | **Apply** — Writes the exported theme values permanently into your CSS file |\n| \"remove theme editor\" | **Remove** — Deletes all injected files and cleans up imports. Keeps the CSS improvements. |\n\n## Requirements\n\n- [Claude Code](https://claude.com/claude-code) CLI\n- A React project with **Tailwind CSS v4+**\n- CSS file using `@theme inline {}` or `@theme {}` with CSS variables\n\n## Install\n\nIn Claude Code, run:\n\n```\n/plugin add madebysan/theme-editor\n```\n\nOr install manually:\n\n```bash\ngit clone https://github.com/madebysan/theme-editor.git\ncp -r theme-editor/skill ~/.claude/skills/theme-editor\n```\n\n## Usage\n\n1. Open a React + Tailwind v4 project in Claude Code\n2. Type `/theme-editor`\n3. Refresh your browser — paintbrush icon appears in the bottom-left corner\n4. Click to open the editor popover\n5. Tweak colors, fonts, and style tokens\n6. When happy, export as JSON and say \"apply this theme\" to make it permanent\n7. Say \"remove theme editor\" to clean up the injected files\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eWhat's inside\u003c/strong\u003e\u003c/summary\u003e\n\n```\nskill/\n├── SKILL.md                    # Skill instructions (what Claude reads)\n├── assets/                     # Template files injected into your project\n│   ├── ThemeDrawer.tsx         # Main floating popover UI\n│   ├── ColorControl.tsx        # Color picker with hex input\n│   ├── FontControl.tsx         # Font input with Google Fonts auto-loading\n│   ├── RangeControl.tsx        # Range slider for numeric tokens\n│   ├── ChoiceControl.tsx       # Segmented button group\n│   ├── ThemeExportImport.tsx   # Export CSS/JSON, import JSON\n│   ├── useTheme.ts             # State management with undo/redo\n│   ├── theme-defaults.ts      # Token definitions (generated per project)\n│   ├── theme-presets.ts        # 14 presets, 10 font pairings, 6 style combos\n│   ├── theme-storage.ts       # localStorage persistence\n│   └── theme-apply.ts         # CSS variable application\n└── references/                 # Reference docs for the Apply phase\n    ├── variable-catalog.md     # All shadcn CSS variables\n    └── css-patterns.md         # CSS pattern detection guide\n```\n\n\u003c/details\u003e\n\n## License\n\n[MIT](LICENSE)\n\n---\n\nMade by [santiagoalonso.com](https://santiagoalonso.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadebysan%2Ftheme-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadebysan%2Ftheme-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadebysan%2Ftheme-editor/lists"}