by hellosverre
Skins for Claude Code: tool rows with icons, diff, table and Mermaid chart cards, a usage band and fifteen themes. /skin swaps them live.
# Add to your Claude Code skills
git clone https://github.com/hellosverre/claude-skinsGuides for using cli tools skills like claude-skins.
See how claude-skins compares with popular alternatives.
claude-skins is an open-source cli tools skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by hellosverre. Skins for Claude Code: tool rows with icons, diff, table and Mermaid chart cards, a usage band and fifteen themes. /skin swaps them live. It has 63 GitHub stars.
claude-skins's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/hellosverre/claude-skins" and add it to your Claude Code skills directory (see the Installation section above).
claude-skins is primarily written in TypeScript. It is open-source under hellosverre on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other CLI Tools skills you can browse and compare side by side. Open the CLI Tools category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh claude-skins against similar tools.
No comments yet. Be the first to share your thoughts!
Top skills in this category by stars
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
See comparison
Needs Claude Code 2.1.287 or later, in a terminal or the desktop app's Code tab. Run both inside Claude Code:
/plugin marketplace add hellosverre/claude-skins
/plugin install skins@hellosverre-mods
Restart Claude Code. The noir skin is on; type /skin to change it.
skins checks for a new release once a day and shows a toast when you are behind. To update:
claude plugin marketplace update hellosverre-mods
claude plugin update skins@hellosverre-mods
Then restart Claude Code. Open sessions keep the version they started with.
claude plugin uninstall skins@hellosverre-mods
To keep it installed but go back to Claude Code's own drawing, run /skin off.
| Command | What it does |
|---|---|
/skin |
Settings: pick a skin with a live preview, toggle parts, repaint any colour |
/skin <name> |
Switch skin: noir, tokyo-night, dracula, catppuccin, rose-pine, nord, gruvbox, kanagawa, everforest, one-dark, solarized, night-owl, ayu, github, mono |
/skin list |
Every skin, yours included |
/skin off |
Back to Claude Code's own drawing |
/skin rail|shimmer|band|clip|markdown|quiet|charts|math|commands|shell on|off |
Toggle one part |
/skin calm · calm off |
No motion, one line per tool row, read-only output folded, failures always whole. calm off puts back what you had |
/skin copy · copy code |
Copy Claude's last reply, or just its last code block |
/skin tables on|text|off |
text draws tables and code as selectable text on the desktop |
/skin gallery |
Every element the skin draws, numbered, to point at |
/skin pin · unpin · share |
Give this folder its own look, drop it, or make it the default |
Design one with Claude. Ask "make me a skin that feels like a sunset". skins gives Claude a
design tool, so it builds the skin and applies it while you watch. Repainting a built-in skin saves
it as your own my-<skin>. Choices are remembered across sessions.
Drawn by the mod's own card code (scripts/previews.ts), not screenshots.
| Part | Desktop app | Terminal |
|---|---|---|
| Tool calls | Icon per kind, spinner while running, lines changed, time taken | A node on the turn's rail |
| Edits | Diff card with +N −M and numbered lines |
Claude Code's own diff |
| Shell commands | Terminal card with status, stderr apart, long output folded | Card with the command, ✓ or ✗ exit N, stderr in red under its own label, each stream folded to 8 + 4 lines (/skin shell off for Claude Code's own) |
| Quiet output (off by default) | Reads, searches and read-only commands fold to one row; a failure keeps its error line | The same |
| Tables | Card with header rule, zebra rows, colour swatches | Cell grid with a header band |
| Charts | ```mermaid as a card: flowchart, xy, pie, gantt, timeline, journey, kanban, mindmap, quadrant, radar, sankey, gitGraph, treemap, packet, block, architecture, C4 |
The same seventeen drawn in cells, ASCII with /skin icons ascii |
| Math | $$…$$, \[…\] and ```math as a typeset card: fractions, roots, sums and integrals with limits, matrices, aligned lines; $…$ inline turns into Unicode |
Fractions and limits stacked in cells, inline $…$ as Unicode |
| Command output | /cost, /context and plugin output: tables, code and key: value runs as cards |
The same as cell grids |
| Alerts and task lists | > [!NOTE] as a titled box, - [ ] with ticks and a done count |
The same |
| Code blocks | Card with language, line numbers, highlighting; shell blocks keep the Run button | Claude Code's own markdown |
| Spinner | Animated icon per phase | The skin's word with a band of light |
| Above the prompt | Context and plan-limit rings, Compact button, nudge at 70% | Block meters, same button |
| Your prompts | Rounded outline | The same |
Every card has a Copy button and animates once, on first draw, respecting reduced motion. Only the drawing changes: the stored conversation and what the model reads are untouched. Agents, plan mode and the permission prompt keep Claude Code's own drawing.
Light and dark. Every skin has both and follows Claude Code's theme. On auto it follows your
terminal (COLORFGBG) or the system. Force one with SKINS_THEME=light or SKINS_THEME=dark.
Checked by hand on Windows (terminal and desktop app, 0.3.0) and run on Linux (terminal, 0.4.0, Claude Code 2.1.288). macOS, VS Code and mobile are untested. The surface × OS matrix and render times per row are in docs/compat.md. To measure on your machine:
scripts/bench.sh
| What | What you get instead | Where |
|---|---|---|
| Agents, plan mode, todos, the permission prompt | Claude Code's own rows and dialogs | kindOf in hooks/tools.ts; test "tools a skin cannot redraw faithfully keep their own row" |
| Edits on the terminal, failed edits everywhere | Claude Code's own diff | hooks/register.tsx ToolResult; test "on the desktop an edit is a diff card…" |
| Code blocks on the terminal | Claude Code's own markdown | replyRows in hooks/rows.tsx; test "a code fence is a card on the desktop and stays markdown in the terminal" |
Shell fences (```bash) on the desktop |
The app's own block, so its Run button stays | test "on the desktop a shell fence keeps the app's own block" |
| Sequence, state, class and ER diagrams on the desktop | A code card: only the terminal's vendored layout draws them | artKind in hooks/mermaid-art.ts, parseMermaid in hooks/mermaid.ts |
| A diagram too wide or too long (over 80 lines or 8,000 characters on the terminal) | Rows for flowchart, xy and pie, else the code | test "a diagram too wide for the terminal falls back to rows…" |
| A reply block over 9,000 characters, a prompt over 4,000 | Claude Code's own drawing of the whole message | MAX_MARKDOWN, MAX_PROMPT in hooks/register.tsx |
| Code cards past 80 lines | The first 80 and a N more lines note; Copy takes all of it |
MAX_LINES in hooks/svg-code.ts |
| TeX commands the parser does not know | Drawn as written, \name |
hooks/math.ts |
| Shell output on the terminal vs the desktop | The terminal card names the command and folds each stream to 8 + 4 lines; the desktop card says Output and folds both streams together to 6 + 6 |
hooks/shell-rows.tsx, hooks/svg-terminal.ts |
| A failed shell call that hands back error text, not its record | stdout and stderr arrive merged, so the whole text is drawn as stderr | shellResultOf in hooks/shell.ts |
| A command sent to the background, or output that is an image | Claude Code's own row, which says where it went or draws the image | keepsOwnRow in hooks/shell.ts; test "/skin shell off gives shell output back…" |
Shell cards and tool timings after /resume |
No command in the header and no time: both are recorded as the call runs | commandAtom, durationAtom in hooks/register.tsx |
Slash-command errors and /skin's own output |
Claude Code's own row | test "slash-command output with key: value lines is a table, prose keeps its row" |
/skin calm and Claude Code's spinner |
Calm hands the spinner back to Claude Code, whose own spinner still moves | Spinner in hooks/register.tsx |
| The settings pane on mobile | A line saying to use the terminal or the desktop app | Pane in [hooks/register.tsx](hooks |