claude-style

A Claude Code mod (hooks-module plugin) named style. It restyles parts of Claude Code's UI, and /style opens a pane where each part is set:

Part	Options
Defaults	border (round, single, double, bold, dashed, classic), color, spacing (compact, normal, roomy)
Your prompts	bubble, bar or plain; color
Plugin bands (rows other mods draw above the prompt)	a frame in a border
Tool calls	rail, card or compact, each a Tool(target) line without Claude Code's dot; colored by tool, status or one color; output full, summarized or hidden (errors always show)
Notices	line or card; color
Mode badge	pills, brackets or plain; color
Prompt hint	color, dimmed
Questions	a tab over the dialog in a border and color
Turn time	a rule across the width, compact or hidden; with or without the verb

Every part except Defaults has a Drawn by row: style draws it as set, Claude Code leaves it as Claude Code draws it and dims the part's other rows, which then ignore presses. The pane opens with the theme's colors, numbered, and color rows name their color by that number.

Press a row to cycle its value. Preview, or /style preview, prints a labeled sample of every part into the transcript, drawn by the same code as the parts themselves. Settings persist across sessions.

Colors are theme keys (permission, planMode, promptBorder, ...), so everything draws in the colors of your Claude Code theme, custom themes included. The pane names each color by its role in the theme and shows a swatch of what your theme makes it.

Claude Code draws some things itself with no hook for a mod: the prompt input box, the divider of a docked pane, the permission dialog and the welcome banner.

Install

This repo is also a plugin marketplace (claude-style):

claude plugin marketplace add msetsma/claude-style
claude plugin install style@claude-style

Important

Plugins nest in their enabledPlugins order in ~/.claude/settings.json, first outermost. A mod that draws a band above the prompt without calling next hides it from everything after it, so keep style first in enabledPlugins for its band frame to reach other mods' bands.

Layout

.claude-plugin/plugin.json        # name, version, description, types
.claude-plugin/marketplace.json   # makes the repo installable as a marketplace
hooks/hooks.json                  # { "modules": ["./register.tsx"] }
hooks/register.tsx                # the mod
types/index.d.ts                  # the settings the mod keeps in $.state
tests/style.test.tsx
demo/                             # the README GIF: vhs tape, setup, offline fake API

.claude-plugin/types/ is generated by Claude Code on load and is gitignored.

Editing

Clone the repo and work from the clone:

git clone https://github.com/msetsma/claude-style
cd claude-style
claude plugin validate .
claude plugin test .

For a watched dev loop that reloads on every save, start a session with claude --plugin-dir <clone>. Otherwise run /reload-plugins in that session after an edit.

vhs demo/demo.tape regenerates demo/demo.gif from the repo root. It needs vhs, node and claude, and runs offline against demo/fake-api.mjs in a throwaway HOME.

Note

An installed copy (style@claude-style) is a cached snapshot: it sees pushed changes only after claude plugin marketplace update claude-style.