chrome-devtools-mcp の CLI (`chrome-devtools`) を使ったブラウザ操作の総合スキル。既存ブラウザへの attach / 使い捨てテストブラウザ / ログイン状態を保持する永続プロファイルのいずれかをユーザーに必ず確認した上でサーバを立ち上げ、スナップショット取得・クリック・入力・ナビゲーション・スクショ・ネットワーク監視などを行う。
report
会話の成果 (調査・比較・解説など) を人が判断するための HTML レポートにまとめ、crit preview で開いてコメント対応まで往復するスキル。ユーザーが「HTML にまとめて」「レポートにして」「crit で開いて」「/crit で表示して」など、HTML 化して crit で見る意図を示したら必ず使用する。
dev パイプラインの成果物 (research / plan / report.html) は対象外。
含まれるファイル(2)
- SKILL.md4.7 KB
- assets/guide.md4.3 KB
SKILL.md(原文)
インストールする前に、エージェントに与えられる指示の中身を確認できます。
会話で得た内容を、読者が判断できる HTML レポートにして crit で往復する。依頼文に調査が含まれていれば、まず会話内で調査を済ませてから生成する (調査の要否は依頼文で判断し、research など別スキルは使わない)。構成・型・文章・図と表・ページの規則は assets/guide.md に従う。
引数
- 指示: 読者や目的 (「社内共有向けに」「経営向けに 1 枚で」など)
- 既存 .html: そのファイルに追記・修正し、同じ crit セッションを再開する。型は既存ファイルから引き継ぐ
--type: 型を固定する。無ければ内容から選ぶ。3 型に合わなければ「その他」
手順
1. 対象と型の決定
直前の成果物 (会話で調べた内容、または指定ファイル) を対象にし、guide.md の 3 型 (調査 / 比較・提案 / 解説) から 1 つ選ぶ。どれにも合わなければ「その他」にし、必要な節は手順 2 の質問で決める。
2. 生成前の質問 (AskUserQuestion 1 回)
読者と目的、型ごとの確認事項 (guide.md「生成前に聞くこと」) を合わせて最大 4 問にまとめ、1 回で聞く。各問には推定した答えを先頭に置き「(推奨)」を付ける。前提の食い違いは作り直しになるので、生成前に解像度を上げる。人が答えられない場合は推定で進め、推定した前提を本文の「前提と制約」に書く。
3. HTML の生成と自己点検
tmp/<トピックの kebab-case>-YYYYMMDD.html に書く (tmp/ は git root 直下、無ければ作る)。書いたら点検する。
- 文章: guide.md「文章」の 10 項目で見直す
- 表示: 図表を新たに入れた・変えた時は chrome-devtools で 1280px と 390px のスクリーンショットを撮り、文字被り・はみ出し・横スクロールを直す。あわせて図が「読者に何を分からせたいか」を一目で伝えているか (流れの向き、強調の対象、ラベルの粒度) を見て、伝わらなければ描き直す
4. crit preview で開く
crit preview <file> # run_in_background で実行。Finish Review まで戻らない
起動時に出る URL をそのまま伝える (「Crit is open at http://localhost:<port>/preview. コメントを残して Finish Review を押してください」)。同じファイルの既存セッションがあれば自動で引き継がれる。
- 待機が切れた時は
crit status --jsonでセッション ID を取り、crit --session <id>で再接続する crit stopは使わない (デーモンはマシン共通で、他セッションを巻き込む)- crit が無い環境ではファイルパスを伝えて終了する (open など他スキルは呼ばない)
5. コメント対応ループ
stdout の JSON を読む。preview のコメントは行番号が常に 0 なので、dom_anchor.css_selector と outer_html で該当要素を特定する。
- 質問: 返信するだけでなく、答えを本文 (注や補足) にも折り込む
- 前提の訂正: 「前提と制約」に転記する
- 決定: 「決まったこと」に転記し、未決と分ける
- 「1,3,5 を対応して」のような番号参照は「決めてほしいこと」の番号で解決する
- 図表を変えた時は手順 3 の表示点検をやり直す
- 返信は一括。返信の配列
[{"reply_to": "<id>", "body": "..."}]を Write で JSON ファイルに書き、crit comment --json --author 'Claude Code' < <file>で送る (シェルの echo は\nを生の改行にして JSON を壊す)。--resolveは付けない - 対応後に
crit --session <id>を run_in_background で実行し、次ラウンドを待つ。コメント 0 件で終了
ラウンドごとの報告は、変えたことを番号付きで書き、前置きと締めを書かず、最後に URL と次に押すものを 1 行添える。
6. 完了報告
ファイルパスを 1 行だけ。
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
checklist の「UI 撮影台本」に沿って UI のスクリーンショットを撮影し、前後比較(compare.html)用の before / after 素材を保存する。「実装前の UI を撮っておいて」「after のスクショを撮って」などの依頼で発火する。
Read and analyze log entries from Cloud Logging using the gcloud CLI.
日本語の概要は準備中です。原文の説明を表示しています。
Codex 公式プラグイン (codex-plugin-cc) のネイティブレビューでコードレビューを実施する。PR 番号指定時は PR を、無指定時は現在ブランチとベースブランチの差分をレビューする。
指定された内容をクリップボードにコピーするスキル。ファイルパスならその中身を、テキストならそのまま、会話中の直前の出力(コマンド結果・生成コード・URL など)を指す場合はその内容を pbcopy でコピーする。ユーザーが「コピーして」「クリップボードに入れて」などコピーの意図を示したら必ず使用する。
GitHub issue から PR のタイトルと説明文を作成する。