tonywjs

HTML Diagram — Development skill for Claude Code

Development community

편집 가능한 HTML 도식을 만드는 Claude Code 스킬.

How to install HTML Diagram

This entry records only its repository, not the path inside it, so there is no exact command to give. Open tonywjs/html-diagram and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What HTML Diagram does

편집 가능한 HTML 도식을 만드는 Claude Code 스킬. 문서 자체가 에디터.

Alternatives in Development

Web Artifacts Builder — Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui 94.1k ★
HTML Report — /html-report - Generate Application Tracker Dashboard 36.6k ★
HTML Ppt Skill — HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML present 8.1k ★

README

html-diagram

편집 가능한 HTML 도식을 만드는 Claude Code 스킬입니다. **문서 자체가 에디터**입니다. 산출물은 외부 의존이 없는 HTML 한 파일이고, 보기 모드에서는 완전히 정적이며 편집 모드(⌘E)에서는 도형을 끌어 옮기고 글자를 고치고 같은 파일에 저장할 수 있습니다.

기능 샘플러 포스터

무엇을 해 주나

편집 모드: 노드 드래그·리사이즈·복제(⌘D, ⌥드래그)·복사/잘라내기/붙여넣기(다른 문서로도)·삭제·생성, 화살표 끝점·곡률·라벨 편집, 속성 패널(색·테두리·둥글기·투명도·그림자·z순서), undo/redo(50단계).
저장: 같은 파일 덮어쓰기(File System Access API, 크로미움), 직전 버전 히스토리 30개를 문서 안에 보관, 편집 0.7초 뒤 자동저장과 복구 배너. 미지원 브라우저는 다운로드로 저장.
텍스트: 더블클릭하면 리치 서식 툴바(단락 스타일·글씨체·크기 단계·굵게/기울임/밑줄/취소선·글자색/배경·정렬·목록·들여쓰기·표).
화살표: 노드를 옮기면 자동 추종. 실선/파선/점선, 화살촉 end/both/none, 곡률, 투명도, 흐름 애니메이션, 측면·비율 앵커, 좌표 끝점, 라벨.
배포용 저장: 최종본이 나오면 메뉴의 "배포용으로 저장"으로 편집기를 걷어낸 정적 HTML을 따로 만듭니다. 화살표와 라벨이 문서에 구워져 엔진 없이도 그대로 보이고, 창 폭에 맞춘 축소만 남습니다. 명령줄에서는 python3 assets/export-static.py 산출.html 배포.html(헤드리스 Chrome 필요).

설치

**Claude Code**

git clone https://github.com/tonywjs/html-diagram.git ~/.claude/skills/html-diagram

Claude Code는 `SKILL.md`의 description을 보고 도식·인포그래픽 요청에 이 스킬을 자동으로 씁니다. `/html-diagram`으로 직접 부를 수도 있습니다.

**Codex CLI** (`~/.agents/skills/`를 읽습니다)

git clone https://github.com/tonywjs/html-diagram.git ~/.agents/skills/html-diagram

Claude Code 쪽에 이미 받았다면 심볼릭 링크로 충분합니다.

ln -s ~/.claude/skills/html-diagram ~/.agents/skills/html-diagram

Codex에는 브라우저 도구가 없으므로 SKILL.md는 그 경우 `assets/static-check.py`로 정적 검사까지만 하고 브라우저 검증은 못 했다고 보고하도록 지시합니다.

**그 밖의 에이전트**: SKILL.md와 assets로 이루어진 [Agent Skills](https://agentskills.io) 규격이라, 같은 규격을 읽는 도구라면 폴더를 그대로 두면 됩니다.

구조

경로	역할
`SKILL.md`	에이전트용 규약, 생성 워크플로, 검증 절차, 체크리스트
`assets/fig-editor.js`, `assets/fig-editor.css`	편집 엔진(문서에 인라인됨)
`assets/template.html`	산출물의 출발점. 복사한 뒤 , 첫 , `FIG:CONTENT` 영역만 작성
`assets/template-skeleton.html`, `assets/build-template.py`	엔진을 인라인해 템플릿과 예시를 조립
`assets/quality-check.js`	품질 검사(글자 하한 12px, 격자 점유율 75%)
`assets/static-check.py`	브라