Skins Claude Code mod: 15 Claude Code skins for tool rows, diffs and charts

Skins is a community mod by hellosverre (hellosverre), published in the claude-skins repository. It adds fifteen Claude Code skins (themes) and redraws what the transcript shows. The built-in skins are noir (the default), tokyo-night, dracula, catppuccin, rose-pine, nord, gruvbox, kanagawa, everforest, one-dark, solarized, night-owl, ayu, github and mono. Each one has a light and a dark variant and follows Claude Code's own theme.

Besides colours, the mod changes how things are drawn. According to the author's README:

• Tool rows get an icon, a timing and a rail. A ▸ opens the row to show the call's full input and its answer.
• Edits, shell output, tables, code blocks and links become cards or highlighted blocks, with copy buttons and folding for long blocks.
• Mermaid fences are drawn as charts: seventeen kinds, such as flowchart, xy, pie, gantt, sankey and radar. Math fences are typeset.
• The spinner and the turn footer use the skin's words, with a band of light across the spinner word.
• Above the prompt, a usage band shows context and 5-hour and 7-day plan limits, with a Compact button that suggests compacting from 70% context.

Only the drawing changes: the stored conversation is untouched. Agents, plan mode and the permission prompt keep Claude Code's own drawing. For a similar mod with a narrower scope, see Prismantis.

The install block above adds the author's own marketplace, hellosverre-mods, and installs skins from it. Restart Claude Code afterwards. The noir skin is on from the first session, and /skin changes it. The README asks for Claude Code 2.1.287 or later.

To try it without installing, clone the repository and start Claude Code with claude --plugin-dir . from the clone.

The plugin is one hooks module, hooks/register.tsx, that listens for ui.render events for the tool rows, assistant messages, the spinner and the area above the prompt, and returns its own trees. Charts, tables, code and diffs are drawn by separate files in hooks/. Terminal diagrams use a bundled copy of beautiful-mermaid (MIT), kept in hooks/vendor/mermaid-ascii.js.

The one place it talks to the model is prompt.compose. While charts and hints are on, it appends a short section to the prompt, from register.tsx:

on('prompt.compose', async ($, e, next) => {
  const result = await next(e)
  const active = await activeSkin($)
  const isHeadless = e.surfaces.length === 0 || e.traits.includes('bare') || e.traits.includes('print')

  if (active === null || !active.prefs.charts || !active.prefs.hints || isHeadless) {
    return result
  }

  return { sections: [...result.sections, { id: 'skins:charts', text: CHART_HINT, scope: 'session' as const }] }
})

The text, CHART_HINT in hooks/mermaid.ts, lists the Mermaid kinds that draw and tells Claude to use a chart when it reads better than prose. The tool.call hook times every call, notes which files were created or edited, and passes the call on unchanged.

/skin with no argument opens a settings pane with a live preview, where you pick a skin, switch parts on and off and repaint any colour. /skin help lists every command. Some useful ones:

• /skin <name> switches skin; /skin off and /skin on toggle the whole mod.
• /skin <part> on|off for rail, shimmer, band, countdown, compact, clip, markdown, quiet, charts, math, commands, shell, highlight, hints, links, copy, fold and expand.
• /skin calm removes motion, folds read-only output and keeps failures whole; /skin calm off restores what you had.
• /skin pin gives the current folder its own look; /skin share makes it the default.
• /skin prompt left|right|plain, /skin tables on|text|off and /skin icons unicode|ascii adjust smaller details.
• SKINS_THEME=light or SKINS_THEME=dark forces the light or dark variant.

You can also ask Claude to design a skin. The plugin ships a skin-designer skill and registers the mcp__skins__design tool, which saves and applies a skin.

We read the manifest, hooks/hooks.json, the skin-designer skill, the update checker (hooks/updates.ts), the points in hooks/register.tsx that call into Claude Code, and the type declarations. For the rest of the 70 or so source files in hooks/ we searched every file for network, process, file, environment and dynamic-code calls rather than reading each line. The bundle hooks/vendor/mermaid-ascii.js (about 84 KB) is generated code with its licence in the header; we searched it for network, process and eval use and found none, but did not read it through. There is no root package.json and no install script. scripts/vendor/package.json only builds that bundle and is never run by the plugin. There are no binaries.

What we found:

• Network: one $.http.fetch per day, to https://raw.githubusercontent.com/hellosverre/claude-skins/main/.claude-plugin/plugin.json (hooks/updates.ts:3, hooks/register.tsx:553), with nothing sent. It shows a toast when a newer version exists. The author's README describes it as the one network call.
• Processes: $.process.run (hooks/register.tsx:164) runs defaults read -g AppleInterfaceStyle, reg query … AppsUseLightTheme or gsettings get org.gnome.desktop.interface color-scheme, as argument arrays with a 2-second timeout. It happens only when the theme is auto and nothing else decides.
• Files: it reads its own plugin.json and writes nothing outside the plugin store ($.store). We found no write under ~/.claude, settings.json, shell rc files or LaunchAgents.
• Background work: timers inside the session only (a re-check of the system appearance every few seconds on auto). No daemon.
• Environment: it reads SKINS_THEME, COLORFGBG, FORCE_HYPERLINK, TERM_PROGRAM, TERM_PROGRAM_VERSION, TERM, WT_SESSION, VTE_VERSION, KONSOLE_VERSION, TMUX and CI, to pick colours and hyperlink support. No credentials, and none of it leaves the machine.
• Telemetry: none. Notices: a one-time toast after about three days asking for a GitHub star (hooks/updates.ts:49) and the update toast.
• Model influence: the prompt.compose section above, 458 characters, session scope, skipped for headless runs and removable with /skin hints off. The skin-designer skill and the design tool can change only skin settings. We found no hidden or zero-width characters and no instructions aimed at the model beyond those two.
• Gating hooks: tool.call, session.append, config.set and others pass events through unchanged. validate notes that they have no .catch. The one tool the mod answers itself is mcp__skins__design.
• Requirements: none beyond Claude Code. The README says it was checked by hand on Windows and run on Linux; macOS was not looked at by hand.
• Licence: MIT, with a LICENSE file. The bundled beautiful-mermaid is MIT as well.

claude plugin validate reported no errors. Its only finding was a non-blocking ICON_MISSING note for the plugin directory listing, and it listed seven hooks without a .catch. The author's tests passed on Claude Code 2.1.307: 248 tests in 8 files, 0 failures.

Tested with Claude Code 2.1.307 on macOS (validate and the author's tests, which do not draw a real terminal). If the skin does not appear:

• Restart Claude Code after installing, and check that claude --version is 2.1.287 or later.
• Run /skin list to see whether the mod is on; /skin on turns it back on after /skin off.
• If the colours look wrong for a light terminal, set SKINS_THEME=light.
• If the icons are boxes, run /skin icons ascii. Icons draw on the desktop app only; the terminal shows the rail.
• Links are clickable only in terminals that support OSC 8. FORCE_HYPERLINK=1 or 0 overrides the check.
• Sequence, state, class and ER diagrams draw only in the terminal. On the desktop they stay as a code card.