| name | artifact-review-comments |
| description | HTML文書に「選択範囲コメント＋右サイドのコメント一覧」レビューレイヤーを注入してから公開するスキル。HTMLで資料・ドキュメント・提案を作り、他の人に共有して一緒に見ながらレビューしてもらい、もらった指摘をコメントとして残し、最後にコメント一覧をコピーしてClaude Codeに貼って修正する——という往復ワークフロー全体を支える。アーティファクト(claude.aiの共有ページ)として公開する前、あるいは共有用のスタンドアロンHTMLを作るときに使う。「HTMLにコメント機能をつけて」「公開前にレビューできるように」「アーティファクトに指摘を入れられるように」「この資料を共有してレビューしてもらいたい」「選択してコメントできるHTML」「フィードバックを集められるページ」などの依頼では、明示的に「スキル」と言われなくても積極的に使う。注意: これはレビュー用のコメント注釈レイヤーであり、データ集計の可視化レポート(drilldown-report / timeseries-report / gui-report)とは別物。 |
artifact-review-comments
HTML文書に、レビュー用のコメント注釈レイヤーを 追加で注入 するスキル。文書本体の内容には一切手を加えず、UI を付け足すだけ。
想定する往復ワークフロー:
- Claude が HTML 文書を作る（または既存の HTML を使う）
- このスキルでコメントレイヤーを注入し、アーティファクトとして公開 or 共有用 HTML を出力
- 共有された相手がブラウザ上で 本文を選択 → コメント を残す（マーカーが付く）
- レビュー完了後、右サイドの 「コメント一覧をコピー」 で Markdown をコピー
- それを Claude Code に貼り付ける → Claude が引用文を手がかりに該当箇所を直す
レイヤーが備える機能（assets/comment-layer.html）
- 本文テキストを選択すると「＋ コメント」ボタンが出て、コメントを入力できる
- コメントした箇所に黄色マーカーが付き、hover すると吹き出しでコメントが表示される。マーカークリックで一覧の該当コメントにフォーカス（逆も連動）
- 右サイドに固定のコメント一覧パネル
- 左端の境界を ドラッグで幅可変（240〜680px）
- 上部の「隠す」ボタンで 開閉（閉じると右上に「💬 コメント」ボタン、本文は全幅に戻る）
- 最下部に 「コメント一覧をコピー」 ボタン（Markdown 形式）
- 各コメントは引用文＋本文＋削除ボタン
- 完全インライン・外部依存なし。アーティファクトの厳格な CSP 下でも動く（
prompt()/alert() 不使用、クリップボードは execCommand フォールバック付き）
- 状態はセッション内のみ保持（リロードで消える。共有先の一人がレビュー → コピーする使い方を想定）
このレイヤーは検証済みの完成品。中身を書き直す必要はなく、そのまま注入するのが基本。
ワークフロー
まず公開方法を決める。ユーザーが「アーティファクトにして」「公開して」と言うなら経路A、「HTMLファイルがほしい」「既存のこのファイルに付けて」なら経路B。迷ったら経路A（claude.ai で共有しやすい）。
経路A: アーティファクトとして公開する（共有のおすすめ）
アーティファクトの仕様上、コンテンツは <!doctype>/<html>/<head>/<body> を 自分では書かず、本文要素を直接書く（公開時に skeleton でラップされる）。
- 文書本体を body レベルの HTML として
.html ファイルに書く（新規生成 or 既存内容を流用）
- そのファイルの 末尾に
assets/comment-layer.html の中身を丸ごと追記する
- レイヤーは
document.body に対して動くので、skeleton でラップされた後でも正しく動作する
Artifact ツールでそのファイルを公開する（favicon は 💬 など）- 公開 URL をユーザーに伝え、「共有先の人に本文を選択してコメントしてもらい、終わったら右下のコピーボタンで一覧をコピーして、ここに貼り戻してください」と案内する
経路B: 共有用スタンドアロン HTML を出力する
既にユーザーが持っている完結した HTML ファイル、または自前ホスティング用のファイルに付ける場合。
python3 assets/inject.py <input.html> [output.html] を実行
</body> 直前にレイヤーを挿入する（無ければ </html> 直前、それも無ければ末尾）- output 省略時は
<input>.commented.html を同じディレクトリに出力
- 既に注入済みなら検知して中断する
- 出力ファイルパスをユーザーに伝える（WSL なので
file:///... と file://wsl.localhost/Ubuntu/... の両方）
指摘を貼り戻されたとき（修正フェーズ）
コピーされる Markdown はこの形式:
# レビューコメント
## 1.
> （選択された本文の引用＝修正箇所のアンカー）
（コメント本文＝指摘内容）
## 2.
...
引用文を手がかりに元の文書内で該当箇所を特定し、各コメントに沿って修正する。修正後は再度このスキルでレイヤーを注入し直して再公開すれば、次のレビュー往復に入れる。
動作確認
画面を伴う変更なので、注入後の HTML は最低限ブラウザで動くところまで確認する（file: は Playwright で開けないことがあるため、python3 -m http.server で配信して http://127.0.0.1:<port>/... を開く）。確認観点: 選択→コメント追加→マーカー表示→一覧反映→コピー。
