deutscher-skin

Preview · a replayed session in a sandbox

claude · ~/work/app · deutscher-skin

› fix the failing auth test and add an audit log call ⏺ Read(src/auth.ts) ⎿ Read 6 lines ✏️ ändert /work/app/src/auth.ts ✓ · Edit ⏺ Bash(bun test) ⎿ 3 pass, 1 fail ● Done. refresh now rejects expired claims and logs an audit event. ✻ Worked for 42s · done 4:20 PM ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── › ? for shortcuts

Draws

Tool row

✏️ ändert /work/app/src/auth.ts ✓ · Edit

README

Ein Claude-Code-Mod, der nur die Darstellung ändert: Jeder Tool-Aufruf bekommt ein eigenes Icon und eine Farbe aus deiner Palette, Dateien werden hervorgehoben, Befehle erscheinen wie in einem eigenen Terminal-Theme. Dein Workflow bleibt exakt gleich, Claude Code sieht nur nach dir aus. Ein sicherer erster Mod zum Ausprobieren.

Installieren

Im Terminal in Claude Code eintippen:

/plugin install deutscher-skin --marketplace boonpflug/claude-mods-deutsch

Danach y zum Hinzufügen des Marketplace und mit Enter den Bereich „user“ wählen. Der Mod läuft sofort.

Aus der Shell geht es auch: claude plugin install deutscher-skin --marketplace boonpflug/claude-mods-deutsch

Source 1 files

hooks/register.tsx 46 lines

1import type { Register } from 'claude-code'
2
3// Palette: Terrakotta, Creme, Espresso (einfach durch deine eigenen Farben ersetzen)
4const ACCENT = '#c8643b'
5const CREAM = '#f3e3cc'
6const MUTED = '#9b8573'
7
8const LOOK: Record<string, { icon: string; label: string }> = {
9  Read: { icon: '📖', label: 'liest' },
10  Edit: { icon: '✏️', label: 'ändert' },
11  Write: { icon: '📝', label: 'schreibt' },
12  Bash: { icon: '⚡', label: 'führt aus' },
13  Grep: { icon: '🔍', label: 'sucht' },
14  Glob: { icon: '🗂️', label: 'findet' },
15  WebFetch: { icon: '🌐', label: 'lädt' },
16}
17
18function summary(input: unknown): string {
19  if (typeof input !== 'object' || input === null) return ''
20  const o = input as Record<string, unknown>
21  const pick = o.file_path ?? o.command ?? o.pattern ?? o.url ?? o.path
22  const text = typeof pick === 'string' ? pick : ''
23  return text.length > 90 ? `${text.slice(0, 87)}…` : text
24}
25
26export const register: Register = on => {
27  on('ui.render', { component: 'ToolUse' }, async ($, e, next) => {
28    const look = LOOK[e.props.tool]
29    if (!look || e.props.isExpanded) return next(e)
30
31    const { Box, Text } = $.ui.resolve(e)
32    const state = e.props.isErrored ? '✗' : e.props.isRunning ? '…' : '✓'
33    const stateColor = e.props.isErrored ? 'red' : e.props.isRunning ? 'yellow' : 'green'
34
35    return (
36      <Box flexDirection="row" gap={1}>
37        <Text>{look.icon}</Text>
38        <Text color={ACCENT} bold>{look.label}</Text>
39        <Text color={CREAM}>{summary(e.props.input)}</Text>
40        <Text color={stateColor}>{state}</Text>
41        <Text color={MUTED}>· {e.props.tool}</Text>
42      </Box>
43    )
44  })
45}
46