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
- Guitar — by soramimi - Serves as development guide for Guitar Git GUI Client with build commands for various platforms 1.7k ★
- Tokenicode — A Claude Code GUI — Tauri 2 + React 19 + TypeScript + Tailwind CSS 4 436 ★
- Module CSS — Compile module CSS assets or fix Tailwind prefix issues 407 ★
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
Design Framework
Convert HTML/CSS design output to framework-specific component code. Supports web: React+Tailwind, Vue 3+UnoCS
Paper Workbench
Build a visual, dyslexia-friendly paper editing workbench HTML file. Takes a paper (file or pasted text) plus
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
Astro Website
Create static website with Astro v5+, React, Tailwind CSS, TypeScript, with accessibility and SEO best practic
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