The unreasonable effectiveness of HTML という記事を教えてもらった。Claude Code にプランを Markdown ではなく HTML で書き出させると、構造が見やすくなるし共有もしやすいという話。
記事の最後にこういう一節がある。
As Claude takes on more, I'd noticed I was reading plans less closely, and I wanted a way to stay engaged with its choices rather than just hand them off.
Claude に任せる範囲が広がるほど、出てきたプランをちゃんと読まなくなる——というのは自分もまさに感じていたところだった。
トークン・コンテキストの消費について気になったが、 これについてはこう書かれていた。
Isn’t it less efficient?
While Markdown often uses fewer tokens, I’ve found that the added expressiveness of HTML and the much higher likelihood of me reading it means I get overall better output. With the 1MM context window in Opus 4.7, the increased token usage is not really noticeable in the context window.
まあそういうものか、と納得。試しにプランを HTML で書かせるようにしてみた。
やりたかったこと
- Claude Code にプランを
.htmlで出力させる - cmux の右ペインのブラウザで HTML としてレンダリングされた状態で見る
- Chrome など外部ブラウザに飛ばない
設定
1. CLAUDE.md に追加
## Planning
plan mode に入る/更新する/抜ける時は `plan-html` skill を必ず参照する。2. plan-html スキルを作成
---
name: plan-html
description: Output the plan-mode plan as a standalone HTML file and (when running under cmux) open it in a cmux browser surface for review. Use whenever entering plan mode, updating an in-progress plan, or about to call ExitPlanMode.
---
# Plan as HTML
plan mode で提示するプランは Markdown ではなく HTML ファイルとして書き出す。
ExitPlanMode の本文には要約だけ載せ、詳細は HTML を参照させる。
## なぜ HTML か
表・SVG・リンク・折りたたみ・色分け・チェックリストなどが使え、
Markdown より情報密度と可読性が高い。
参考: https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html
## 出力規約
- 出力先: `~/.claude/plans/<slug>.html`
- slug は同ディレクトリの既存ファイル命名規則 (例: `ai-ai-3-dazzling-chipmunk`) に合わせる
- 既存の `.md` プランと並走するときは同じ slug の `.html` を作る
- ファイルは単独で開ける完全な HTML (`<!doctype html>` から `</html>` まで)
- インライン CSS のみ。外部 CDN や外部フォントへの依存は禁止 (オフラインで開けるように)
- セクション構成: `Goal` / `Context` / `Approach` / `Steps` / `Risks` / `Open Questions`
## ExitPlanMode との関係
ExitPlanMode のテキストには必ず次を含める (`$HOME` は実パスに展開した値で書く):
```
詳細プラン: file://$HOME/.claude/plans/<slug>.html
```
そのうえで 3〜6 行の要約を書く。長い説明は HTML 側に寄せる。
## cmux 連携
環境変数 `CMUX_BUNDLE_ID` が定義されている (= cmux 配下で実行されている) ときのみ以下を行う:
### 初回出力時
```bash
cmux --json browser open "file://$HOME/.claude/plans/<slug>.html"
# 返ってきた surface:N を以降の更新でも使い回す
```
surface 番号は会話のメモとして覚えておく (ファイル名と紐付けて保持)。
### プラン更新時
同じ surface を再 navigate してリロードする (新規タブを開かない):
```bash
cmux browser surface:N open "file://$HOME/.claude/plans/<slug>.html"
```
`open` を同じ URL で再実行すれば該当 surface が再読込される。
新しいタブを増やさないこと。
### `CMUX_BUNDLE_ID` が未定義の環境
HTML 出力だけ行い、ブラウザ操作はスキップする。
ユーザーに「`file://...` を開いてください」と一行案内する。
## やらないこと
- plan モードを抜けた後の進捗報告を HTML に書き戻すこと (HTML は計画のスナップショット)
- 複数の `surface:` を同時に開くこと
- ExitPlanMode 本文に HTML の中身を丸ごとコピペすること (パスだけでよい)
結果
Claude Code がプランを書いた直後に自動で cmux のブラウザペインが開き、HTML としてレンダリングされた状態で表示される。プランが更新されるとリロードもかかる。
詰まったこと（備忘録）
plain text で表示される
- cmux 0.64.5 で
openSupportedFilesInCmux（デフォルトtrue）が追加された - オンだと
file://リンクのクリックが cmux の「ファイルプレビューペイン」に渡る - プレビューペインは HTML をレンダリングせずソースをテキスト表示する → plain text に見える
openSupportedFilesInCmux: false にすると Chrome で開く
- plain text を直そうと
falseにしたら、今度は OS のデフォルトブラウザ（Chrome）に渡るようになった - 「Open Terminal Links in cmux Browser」はチェック済みだったが効かない
file://はホスト名を持たないので Host Whitelist でも捕捉できない
解決の気づき
クリックで開こうとしていたのが間違いで、cmux browser open "file://..." を直接叩けば cmux ブラウザに渡り HTML として正しくレンダリングされる。CLAUDE.md でエージェントに cmux browser open を実行させる形にしたら、settings.json の変更も一切不要になった。
No comments yet