Claude Config Editor

Claude Config Editor

A visual web GUI tool for editing Claude Code configuration files (~/.claude/).
Manage Hooks, Agents, Skills, Rules, and Settings through an intuitive interface.

한국어

Screenshots

Hooks Pipeline Editor
Drag & drop hook cards with dual scope (User / Project). 8 hook types with color-coded cards.

Settings Management
Edit environment variables, permissions, and raw JSON with visual UI.

Features

- Hooks Pipeline Editor — Drag & drop hook cards, supports 8 hook types
- Agents Management — Agent categorization (Orchestrator/Specialist/Utility), workflow diagrams
- Skills Management — Skill file grouping with markdown editing
- Rules Management — Rule file editing
- Settings Management — Edit settings.json and manage environment variables
- Dual Scope — Switch between User (~/.claude/) and Project ({path}/.claude/)

Prerequisites

memory-bank Plugin (Optional)

The Project scope list is built from the projects Claude Code knows (~/.claude.json). If the memory-bank plugin is installed, its conversation index adds exchange counts and older projects.
memory-bank stats are read from its SQLite DB (~/.config/superpowers/conversation-index/db.sqlite) in the background and cached for 5 minutes.

Without memory-bank, Project scope still lists Claude Code projects (without exchange counts).

Other Requirements

- Node.js 18+
- npm
- sqlite3 CLI (included by default on macOS)

Installation

Option 1: Install as Claude Code Plugin (Recommended)

Option 2: Manual Installation

This runs both the Vite dev server and the backend API server concurrently.
- Frontend: http://localhost:5173
- Backend API: http://localhost:3850

Tech Stack

- Frontend: React 19 + TypeScript + Vite 8 + Tailwind CSS 4
- Backend: Node.js HTTP Server (filesystem access)
- Editor:…