uehaj

Claude Code Fancy HTML Hook — Documentation skill for Claude Code

Documentation community

Claude Code hook that auto-converts Markdown to fancy infographic HTML on Write/Edit (with confirmation dialog).

How to install Claude Code Fancy HTML Hook

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

What Claude Code Fancy HTML Hook does

Claude Code hook that auto-converts Markdown to fancy infographic HTML on Write/Edit (with confirmation dialog).

Alternatives in Documentation

Docx — Create, edit, and analyze Word documents with tracked changes, comments, and formatting 94.1k ★
Docs Serve — Build the HTML documentation and then serve it locally so it can be viewed in a browser 1.1k ★
Xiaohu Wechat Format — Claude Code 公众号一键排版+发布技能 Markdown → 微信兼容 HTML → 推送草稿箱 30 套主题 + 可视化画廊 428 ★

README

claude-code-fancy-html-hook

Claude Code が Markdown を書き出した瞬間、

通常HTML（プレーンスタイル）
ファンシーHTML（claude -p をサブプロセス起動して生成するインフォグラフィック風HTML）

を自動で `.html/` ディレクトリに吐き出して、ブラウザで開いてくれる macOS 向け hook スクリプトです。

ダイアログで都度「HTML 生成しますか？」「ファンシーも作りますか？」を聞いてくる対話型。

仕組みの概要

Claude Code が *.md を Write/Edit
        ↓ PostToolUse hook (JSON over stdin)
on-md-write.sh
   ├─ AppleScript ダイアログで確認
   ├─ python-markdown で通常HTML生成
   ├─ (任意) claude -p をバックグラウンド起動してファンシーHTML生成
   └─ open でブラウザに表示

詳細は Zenn 記事を参照: [人間がMarkdownを書いたり修正しない時代に、Claude Code hookでドキュメントを自動でファンシーHTML化する](https://github.com/uehaj/zenn-articles/blob/main/articles/claude-code-fancy-html-hook.md)

必要なもの

macOS（osascript / display dialog を使うため）
Claude Code CLI（claude -p をサブプロセスで叩く）
Python 3 + markdown パッケージ
```
pip3 install markdown
```

導入手順

# 1. このリポジトリを clone
git clone https://github.com/uehaj/claude-code-fancy-html-hook.git
cd claude-code-fancy-html-hook

# 2. hook スクリプトを ~/.claude/hooks/ に配置
mkdir -p ~/.claude/hooks
cp hooks/on-md-write.sh ~/.claude/hooks/
chmod +x ~/.claude/hooks/on-md-write.sh

# 3. ~/.claude/settings.json に PostToolUse hook を登録
#    settings.example.json を参考にマージしてください

`settings.example.json`:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit|MultiEdit",
        "hooks": [
          { "type": "command", "command": "$HOME/.claude/hooks/on-md-write.sh" }
        ]
      }
    ]
  }
}

ディレクトリ構成

.
├── README.md
├── hooks/
│   └── on-md-write.sh        # 本体スクリプト
├── images/                    # スクリーンショット置き場
└── settings.example.json      # hook 登録例