claude-skins
Skins for Claude Code's transcript: themed tool rows, reply gutters and spinner words. /skin swaps them live.
Install with your AI
Paste into Claude Code, Cursor, or any agent — it reads the repo and wires the tool into your project.
Install and set up claude-skins (git-clone project) into my current project. Found on https://claudeers.com/claude-skins Repo: https://github.com/hellosverre/claude-skins Homepage/docs: — Detected install method: git-clone → git clone https://github.com/hellosverre/claude-skins Category: plugins. Platforms: cli, desktop. Read the repo's README for exact setup and env vars, then install it and wire it into my project. Claudeers Health Verdict: unknown; community-verified: false. Confirm the source before running anything.
git clone https://github.com/hellosverre/claude-skins
// compatibility
| Platforms | cli, desktop |
|---|---|
| Operating systems | — |
| AI compatibility | claude |
| License | MIT |
| Pricing | open-source |
| Language | TypeScript |
claude-skins
A modern skin for Claude Code. A mod that redraws the transcript: tool calls with icons and timings, edits as diff cards, tables and code as animated cards, shell output in a terminal card, a spinner that shows what Claude is doing, and a band above the prompt with your context and plan limits and a Compact button. Seven skins, light and dark, a settings page, and your own agent can design a new skin with you.
These previews are drawn by the mod's own card code (scripts/previews.ts), not screenshots.
Install
Needs Claude Code 2.1.287 or later, in a terminal or the desktop app's Code tab.
/plugin marketplace add hellosverre/claude-skins
/plugin install skins@hellosverre-mods
What it redraws
| Site | Desktop app | Terminal |
|---|---|---|
| Tool calls | A line icon per kind, a spinning ring while it runs, lines changed and time taken | A node on the turn's rail with the same facts |
| Edits | A diff card: file, +N −M, numbered changed lines in green and red | Claude Code's own diff |
| Shell commands | A terminal card: status pill, output with stderr apart, long output folded, and a Copy button for the output | Claude Code's own output |
| Tables in replies | An animated card: header rule, zebra rows, swatches for colours, coloured diffs; Copy gives the markdown | A cell grid with a header band and zebra rows, and the same Copy |
| Code blocks in replies | A card with the language, line numbers and highlighting, and a Copy button | Claude Code's own markdown, and a Copy button |
| Spinner | An animated icon per phase: thinking, tool use, writing, waiting | The skin's word with a band of light through it |
| Above the prompt | Rings for context and each plan limit, a Compact button, and a nudge to compact from 70% context | Block meters and the same button |
| Turn footer | (not raised on desktop) | Time, tool count and lines changed |
| Your prompts | A rounded outline sized to what you typed; attached images stay below it | The same |
| The question dialog | A band naming its topics above Claude Code's own dialog | The same |
Every card rises in row by row and respects reduced motion. A skin only changes what is drawn: the stored conversation, and what the model reads, are untouched. Agents, plan mode and the permission prompt keep Claude Code's own drawing. The default skin is noir, black and white. Cards have no background of their own, so they sit in the page. On a light Claude Code theme every skin switches to its light palette.
Make it yours
/skinopens the settings: pick a skin, see a live preview, switch the rail, tables, shimmer, band and icons, and repaint any colour. Repainting a built-in skin saves it as your ownmy-<skin>./skin galleryshows every element the skin draws, numbered, to point at when you want one changed.- Ask your agent. The mod gives Claude a
designtool and a short guide, so "make me a skin that feels like a sunset" builds one and applies it while you watch. /skin <name>,/skin list,/skin off, and/skin rail|tables|shimmer|band|clip on|offfor quick switches.
Your choices are remembered across sessions.
What it can reach
It draws and remembers. It reads the session's directory, your context and plan usage, and Claude Code's theme setting; keeps its settings in the mod store; registers one tool for your agent; and compacts only when you press Compact, and copies only when you press Copy. It starts no process, touches no file and makes no network call. Check it yourself:
claude plugin validate .
Add a built-in skin
A skin is one file. Copy hooks/themes/nord.ts, change the colours and words, then add one line to
hooks/themes/index.ts.
claude plugin test
Develop
claude --plugin-dir .
Saving a file reloads the mod in the running session. /plugin-types writes the type declarations
into .claude/types for your editor. npx tsx scripts/previews.ts redraws the README previews.
License
MIT
// faq
What is claude-skins?
Skins for Claude Code's transcript: themed tool rows, reply gutters and spinner words. /skin swaps them live.. It is open-source on GitHub.
Is claude-skins free to use?
claude-skins is open-source under the MIT license, so it is free to use.
What category does claude-skins belong to?
claude-skins is listed under plugins in the Claudeers registry of Claude-compatible tools.
// embed badge
[](https://claudeers.com/claude-skins)
// retro hit counter
[](https://claudeers.com/claude-skins)
// reviews
// guestbook
// related in Claude Plugins
🔓A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.
🔓Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explainin…
🔓"CLI-Anything: Making ALL Software Agent-Native" -- CLI-Hub: https://clianything.cc/
🔓financial-services — a Claude ecosystem project on GitHub.