CLAUDE SKINS

Full editor theming for Claude Code. 25 skins. Your mascot, sidebar, terminal, and status bar — all in one command.

📚 Installation Guide

Your entire editor. One skin.

Not just a mascot swap. Every pixel of your VS Code transforms — background, sidebar, tabs, terminal, status bar, brackets, cursor. One command.

index.ts
utils.ts
mainUTF-8TypeScript
Activity Bar Sidebar Tabs Editor Status Bar
99
Color keys themed
16
Terminal ANSI colors
0
Dependencies

Community Creations

Skins built by the community. Fork the repo, add your skin, open a PR.

0 community skins + Submit Your Skin
No community skins yet. Be the first to contribute!

Installation Guide

Clone, scan, apply. Your entire editor transforms in under 60 seconds.

Prerequisites
  • ✓Node.js 18+ installed
  • ✓VS Code or Cursor with the Claude Code extension
  • ✓Git installed
1
Clone the repo

Grab the source. Zero dependencies — nothing to install.

git clone https://github.com/ClaudevGuy/claude-skins.git && cd claude-skins
2
Scan your system

Finds your Claude Code installation and shows what can be customized.

node bin/claude-skins.js scan
✓ Found VS Code extension: claude-code v2.1.56
✓ Patchable: mascot, logo, icon
✓ Welcome art: dark + light variants
✓ Webview mascot: inline SVG
───────────────────────────
Ready to apply skins.
3
Browse available skins

See all 25 skins with rarity tiers, color palettes, and ASCII previews right in your terminal.

node bin/claude-skins.js list
4
Apply a skin

One command changes everything — mascot, editor theme, sidebar, terminal colors, status bar, cursor, brackets, and 99 color keys.

node bin/claude-skins.js apply <skin-id>

Examples:

$ node bin/claude-skins.js apply fire $ node bin/claude-skins.js apply holographic $ node bin/claude-skins.js apply solana-degen
5
Reload VS Code

Trigger a window reload so VS Code picks up the new assets and theme.

Ctrl+Shift+P → "Reload Window"

Or just close and reopen VS Code. That works too.

6
Auto-reapply after updates optional

Claude Code updates can reset your skin. The watcher detects changes and re-applies automatically in the background.

node bin/claude-skins.js watch
Quick Apply
Want it fast? Pick a skin from above, then run one line:
git clone https://github.com/ClaudevGuy/claude-skins.git && cd claude-skins && node bin/claude-skins.js apply fire
Changed your mind?

Restore everything to default — original mascot, theme, and VS Code settings from backup.

node bin/claude-skins.js restore
What Gets Changed
✓ Welcome screen mascot
✓ Editor background & foreground
✓ Sidebar & activity bar colors
✓ Status bar
✓ Tab styling
✓ Terminal ANSI colors
✓ Cursor color
✓ Bracket pair colors
✓ Selection highlights
✓ Extension icon & favicon
FAQ
Is this safe?▼
Yes. Every file is backed up before patching. Run node bin/claude-skins.js restore to undo everything and return to the original state.
Will it survive Claude Code updates?▼
Extensions updates may reset patched files. Use node bin/claude-skins.js watch to auto-reapply your skin whenever files change.
Can I make my own skin?▼
Drop a folder with a manifest.json + mascot.svg into the skins/ directory. The tool picks it up automatically.
Does it work with Cursor?▼
Yes. The scan command auto-detects both VS Code and Cursor installations. It patches whichever it finds.