
用于编辑 Claude 代码的单页 HTML 工具。.claude/agents 和 skills .md 文件
概览
一个单页HTML工具,用于可视化和编辑Claude Code中使用的.claude/agents/*.md和.claude/skills//SKILL.md文件。 🌐 https://amazingsyp.github.io/harness-editor/harness-editor.html(推荐Chrome/Edge) 1. 打开上方链接(Chrome / Edge) 2.点击→选择你的项目根目录(包含.claude/的目录) 3.点击左侧树中的任意.md文件→开始编辑 所有数据都保持在线。没有任何内容上传到服务器(由浏览器文件系统访问API驱动)。 用Claude代码构建代理和技能很容易,但打磨它们——调整前置内容、细化描述、比较文件间表格——在通用编辑器中会变得笨拙。这是一个专注于这一任务的小工具。
概述(AI 翻译)
英语 |한국어
一个单页HTML工具,用于可视化查看和编辑
.claude/agents/*.md和.claude/skills/**/SKILL.md文件 Claude Code 使用。
🌐 现在就试试: https://amazingsyp.github.io/harness-editor/harness-editor.html(推荐Chrome/Edge)
一分钟后开始
- 打开上方链接(Chrome / Edge)
- 点击** 📁 选择文件夹** →选择你的项目根目录(包含
.claude/的目录) - 点击左侧树中的任意
.md文件→开始编辑
所有数据都保存在你自己的机器上。没有任何数据上传到服务器(由浏览器文件系统访问API驱动)。
为什么?
用Claude代码构建代理和技能很容易,但打磨它们——调整前置内容、细化描述、比较文件间表格——在通用编辑器中会变得笨拙。这是一个专注于这一任务的小工具。
特色
- 目录树视图,带有颜色编码的代理/技能/编排器,以及脏污和错误标记
- 前置信息表单编辑器 — 分别输入
name/description/type/model - Markdown 正文编辑器 + 带同步分段滚动的分割预览
本页由 AI 翻译,技术细节请以原文为准。
README
以下为原文 README 节选,完整内容请查看原文。
Harness Editor
English | 한국어
A single-page HTML tool for visually viewing and editing
.claude/agents/*.mdand.claude/skills/**/SKILL.mdfiles used by Claude Code.
🌐 Try it now: https://amazingsyp.github.io/harness-editor/harness-editor.html (Chrome / Edge recommended)
Get started in 1 minute
- Open the link above (Chrome / Edge)
- Click 📁 Select folder → choose your project root (the directory that contains
.claude/) - Click any
.mdfile in the left tree → start editing
All data stays on your own machine. Nothing is uploaded to a server (powered by the browser File System Access API).
Why?
Building agents and skills with Claude Code is easy, but polishing them — tweaking the frontmatter, refining descriptions, comparing tables across files — gets awkward in a generic editor. This is a small tool focused on that one job.
Features
- Directory tree view with color-coded agents / skills / orchestrators, plus dirty and error markers
- Frontmatter form editor — separate inputs for
name/description/type/model - Markdown body editor + split preview with synced section scrolling
- WYSIWYG mode — edit tables, headings, and emphasis directly in the right pane
- Multi-file search and bulk replace (regex, target filters)
- Description-quality scoring (length, trigger phrases, follow-up keywords) aligned with the revfactory/harness meta-skill recommendations
- Roundtrip-safe serialization —
parse → edit → savepreserves meaning exactly - Dark / light themes, page-close protection
Browser support
| Browser | Mode |
|---|---|
| Chrome / Edge / Brave / Opera | Directory mode (recommended) — pick a folder once, edit and save many files in place |
| Safari / Firefox | Single-file mode — upload → edit → download |
Keyboard shortcuts
| Key | Action |
|---|---|
⌘S / Ctrl+S |
Save current file |
⌘⇧S / Ctrl+Shift+S |
Save all modified files |
⌘P / Ctrl+P |
Search across all files |
⌘⇧H / Ctrl+Shift+H |
Bulk replace |
⌘B / Ctrl+B |
Toggle sidebar |
⌘\ / Ctrl+\ |
Toggle preview |
Esc |
Close modals |
Use locally
Download harness-editor.html from the repo and double-click it. No installation required — all dependencies are loaded from CDNs at runtime.
Dependencies (all loaded from CDN)
- marked.js — Markdown rendering
- js-yaml — Frontmatter YAML parsing & serialization
- turndown + GFM plugin — HTML → Markdown conversion for the WYSIWYG mode
Inspiration
This tool is designed to work well with the file format produced by the revfactory/harness meta-skill — but it works with any standard Claude Code agent or skill .md file.
License
推荐工具
换一个关键词,或者移除筛选条件。
安装
npx skillfish add amazingsyp/harness-editor