Claude Settings Editor — Design skill for Claude Code
GUI-based editor for Claude Code settings.json — standalone HTML with Alpine.js + Tailwind CSS.
How to install Claude Settings Editor
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open mrspot-dev/claude-settings-editor and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Claude Settings Editor does
GUI-based editor for Claude Code settings.json — standalone HTML with Alpine.js + Tailwind CSS.
Alternatives in Design
- Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
- Guitar — by soramimi - Serves as development guide for Guitar Git GUI Client with build commands for various platforms 1.7k ★
- Drawbridge — Design editor for Claude Code and Cursor 960 ★
README
Claude Settings Editor
A visual GUI editor for Claude Code settings.json files.
Single standalone HTML file — no build step, no server, no dependencies to install. Just open and edit.
Quick Start
**Try it online:** [mrspot-dev.github.io/claude-settings-editor](https://mrspot-dev.github.io/claude-settings-editor/)
The hosted version runs entirely in your browser. Your `settings.json` is read and written directly on your own machine through the File System Access API — nothing is uploaded. It saves you the download when you just want a look.
For regular use, prefer a local copy. A file you downloaded changes only when you replace it, while a hosted page always serves whatever is currently deployed — worth keeping in mind for a file that may contain API keys.
**Option A — Manual:**
- Download
claude-settings-editor.html - Open in any Chromium browser (Chrome, Edge, Arc)
- Click Open to load your
settings.json - Edit visually, then Save back to disk
**Option B — Auto-Detect (recommended):**
- Download the repo (or just
claude-settings-editor.html+open-editor.py) - Run the companion script:
python open-editor.py - The script finds all your
settings.jsonfiles, lets you pick one, and opens the editor pre-loaded
Claude Settings Editor — Auto-Detect
========================================
Found 3 settings f
Related Skills
Config Editor
Launch Claude Config Editor - visual GUI for editing ~/.claude/ settings
Tokenicode
A Claude Code GUI — Tauri 2 + React 19 + TypeScript + Tailwind CSS 4
Design Framework
Convert HTML/CSS design output to framework-specific component code. Supports web: React+Tailwind, Vue 3+UnoCS
Module CSS
Compile module CSS assets or fix Tailwind prefix issues
2
Build a high-fidelity, responsive, dark-themed hero section for a SaaS product called "Taskora" using React, T
3
Create a high-fidelity, dark-mode Hero section for a SaaS product called "ClearInvoice" using React and Tailwi
Related Agents
Frontend Minimalist
Livewire and Tailwind specialist. Use for work in app/Livewire, resources/views, resources/css or resources/js
Prosa Panel UI Reviewer
Read-only reviewer for prosa panel changes — html/template, HTMX, Alpine, Frappe charts, CSS modules, OAuth fl
Wp Tailwind
CSS-to-Tailwind demo conversion — converts standard HTML/CSS demos into Tailwind-native HTML