# nocashflow/claude-cyberpunk-themes architecture

> Architecture diagram of the GitHub repository nocashflow/claude-cyberpunk-themes, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nocashflow/claude-cyberpunk-themes
- Repository: https://github.com/nocashflow/claude-cyberpunk-themes

## Overview

Cyberpunk Themes is a Claude Code desktop plugin that switches among seven animated pixel-art backdrops and matching application palettes. The main workflow is a user’s `/neon` command or session start: the plugin restores or changes the saved selection, builds the selected scene and palette, and supplies them to Claude Code. Scene modules use shared drawing helpers; palette data is expanded by the color-generation module. Edges reflect the README and supplied excerpts/index; unsampled implementation details are not inferred.

Main entry points: [`plugins/cyberpunk-themes/hooks/register.tsx`](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/register.tsx) (Plugin Commands), [`plugins/cyberpunk-themes/hooks/kit.ts`](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/kit.ts) (Pixel Toolkit), [`plugins/cyberpunk-themes/hooks/extras.ts`](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/extras.ts) (Scene Extras), [`plugins/cyberpunk-themes/hooks/scene.ts`](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/scene.ts) (Neon Rooftop)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_control["Plugin Control"]
  node_register["Plugin Commands<br/>[register.tsx]"]
end

subgraph group_scenes["Animated Scenes"]
  node_rooftop["Neon Rooftop<br/>[scene.ts]"]
  node_alley["Phosphor Alley<br/>[alley.ts]"]
  node_deepnet["Deep Net<br/>[deepnet.ts]"]
  node_clinic["Ripperdoc<br/>[ripperdoc.ts]"]
  node_badlands["Badlands<br/>[badlands.ts]"]
  node_blackwall["Blackwall<br/>[blackwall.ts]"]
  node_corpo["Corpo Plaza<br/>[corpo.ts]"]
end

subgraph group_graphics["Scene Graphics"]
  node_kit["Pixel Toolkit<br/>[kit.ts]"]
  node_extras["Scene Extras<br/>[extras.ts]"]
end

subgraph group_themes["Theme Colors"]
  node_palettes["Theme Palettes<br/>[palettes.ts]"]
  node_colors["Color Generator<br/>[make-colors.js]"]
end

node_user(("User"))
node_claude["Claude Code"]

node_user -->|"issues commands"| node_register
node_claude -->|"starts sessions"| node_register
node_register -->|"sets theme"| node_claude
node_register -->|"selects scene"| node_rooftop
node_register -->|"selects scene"| node_alley
node_register -->|"selects scene"| node_deepnet
node_register -->|"selects scene"| node_clinic
node_register -->|"selects scene"| node_badlands
node_register -->|"selects scene"| node_blackwall
node_register -->|"selects scene"| node_corpo
node_rooftop -->|"uses helpers"| node_kit
node_rooftop -->|"uses elements"| node_extras
node_alley -->|"uses helpers"| node_kit
node_alley -->|"uses elements"| node_extras
node_deepnet -->|"uses helpers"| node_kit
node_clinic -->|"uses helpers"| node_kit
node_badlands -->|"uses helpers"| node_kit
node_badlands -->|"uses elements"| node_extras
node_blackwall -->|"uses helpers"| node_kit
node_blackwall -->|"uses elements"| node_extras
node_corpo -->|"uses helpers"| node_kit
node_corpo -->|"uses elements"| node_extras
node_register -->|"chooses palette"| node_palettes
node_register -->|"builds colors"| node_colors

click node_register "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/register.tsx"
click node_rooftop "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/scene.ts"
click node_alley "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/alley.ts"
click node_deepnet "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/deepnet.ts"
click node_clinic "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/ripperdoc.ts"
click node_badlands "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/badlands.ts"
click node_blackwall "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/blackwall.ts"
click node_corpo "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/corpo.ts"
click node_kit "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/kit.ts"
click node_extras "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/extras.ts"
click node_palettes "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/palettes.ts"
click node_colors "https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/make-colors.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_register,node_user toneBlue
class node_rooftop,node_alley,node_deepnet,node_clinic,node_badlands,node_blackwall,node_corpo toneAmber
class node_kit,node_extras toneMint
class node_palettes,node_colors toneRose
class node_claude toneIndigo
```

## Components

### Plugin Control

- [Plugin Commands](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/register.tsx): `plugins/cyberpunk-themes/hooks/register.tsx`

### Animated Scenes

- [Neon Rooftop](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/scene.ts): `plugins/cyberpunk-themes/hooks/scene.ts`
- [Phosphor Alley](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/alley.ts): `plugins/cyberpunk-themes/hooks/alley.ts`
- [Deep Net](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/deepnet.ts): `plugins/cyberpunk-themes/hooks/deepnet.ts`
- [Ripperdoc](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/ripperdoc.ts): `plugins/cyberpunk-themes/hooks/ripperdoc.ts`
- [Badlands](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/badlands.ts): `plugins/cyberpunk-themes/hooks/badlands.ts`
- [Blackwall](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/blackwall.ts): `plugins/cyberpunk-themes/hooks/blackwall.ts`
- [Corpo Plaza](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/corpo.ts): `plugins/cyberpunk-themes/hooks/corpo.ts`

### Scene Graphics

- [Pixel Toolkit](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/kit.ts): `plugins/cyberpunk-themes/hooks/kit.ts`
- [Scene Extras](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/extras.ts): `plugins/cyberpunk-themes/hooks/extras.ts`

### Theme Colors

- [Theme Palettes](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/palettes.ts): `plugins/cyberpunk-themes/hooks/palettes.ts`
- [Color Generator](https://github.com/nocashflow/claude-cyberpunk-themes/blob/main/plugins/cyberpunk-themes/hooks/make-colors.js): `plugins/cyberpunk-themes/hooks/make-colors.js`

### Other components

- **User**
- **Claude Code**

## Connections

- User → Plugin Commands: issues commands (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Claude Code → Plugin Commands: starts sessions (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Plugin Commands → Claude Code: sets theme (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Plugin Commands → Neon Rooftop: selects scene (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Plugin Commands → Phosphor Alley: selects scene (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Plugin Commands → Deep Net: selects scene (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Plugin Commands → Ripperdoc: selects scene (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Plugin Commands → Badlands: selects scene (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Plugin Commands → Blackwall: selects scene (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Plugin Commands → Corpo Plaza: selects scene (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Neon Rooftop → Pixel Toolkit: uses helpers (evidence: `plugins/cyberpunk-themes/hooks/scene.ts`)
- Neon Rooftop → Scene Extras: uses elements (evidence: `plugins/cyberpunk-themes/hooks/scene.ts`)
- Phosphor Alley → Pixel Toolkit: uses helpers (evidence: `plugins/cyberpunk-themes/hooks/alley.ts`)
- Phosphor Alley → Scene Extras: uses elements (evidence: `plugins/cyberpunk-themes/hooks/alley.ts`)
- Deep Net → Pixel Toolkit: uses helpers (evidence: `plugins/cyberpunk-themes/hooks/deepnet.ts`)
- Ripperdoc → Pixel Toolkit: uses helpers (evidence: `plugins/cyberpunk-themes/hooks/ripperdoc.ts`)
- Badlands → Pixel Toolkit: uses helpers (evidence: `plugins/cyberpunk-themes/hooks/badlands.ts`)
- Badlands → Scene Extras: uses elements (evidence: `plugins/cyberpunk-themes/hooks/badlands.ts`)
- Blackwall → Pixel Toolkit: uses helpers (evidence: `plugins/cyberpunk-themes/hooks/blackwall.ts`)
- Blackwall → Scene Extras: uses elements (evidence: `plugins/cyberpunk-themes/hooks/blackwall.ts`)
- Corpo Plaza → Pixel Toolkit: uses helpers (evidence: `plugins/cyberpunk-themes/hooks/corpo.ts`)
- Corpo Plaza → Scene Extras: uses elements (evidence: `plugins/cyberpunk-themes/hooks/corpo.ts`)
- Plugin Commands → Theme Palettes: chooses palette (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)
- Plugin Commands → Color Generator: builds colors (evidence: `plugins/cyberpunk-themes/hooks/register.tsx`)