quick-view

クイックビュー

ブラウザーで構造化データを確認するための最小限の HTML を生成します。スタイルは最小限に抑え、読みやすさを最大限に高めます。

使用する場面

• ターミナルでは読みにくい出力を確認したい場合
• 視覚的なレイアウトが役立つリスト、表、下書き、要約
• ユーザーが「見せて」「これを表示して」「確認しやすくして」「ウェブページとして開いて」と言った場合

出力ルール

必ず行うこと：

• セマンティック HTML：<table>、<ul>、<details>、<pre>、<h1-3>
• CSS 変数を使ったベーステンプレートを使用する
• _private/views/ に書き込む
• open _private/views/{filename} で開く

行わないこと：

• ベーステンプレートを超える装飾的なスタイルを追加する
• CSS フレームワークを使用する
• 過度に作り込んだり、「見栄えを良く」したりする

ファイル名

ビューには一時版 → 保存版 → アーカイブというライフサイクルがあります。

段階	ファイル名	タイミング
一時版	name-temp.html	新しいビューのデフォルト
保存版	name.html	ユーザーが「これを残して」「これはいい」と言ったとき
アーカイブ	name.2025-01-01.html	新しい保存版に切り替える際の以前の保存版

ルール：

1. 必ず -temp 接尾辞を付けて作成する — 新しいビューはすべて name-temp.html から始めます
2. 承認されたら昇格する — ユーザーが承認したら、name.html に名前を変更します
3. 置き換える前にアーカイブする — name.html が存在する場合は、昇格する前に name.DATE.html に名前を変更します
4. 保存版を再生成しない — 再生成するのは -temp ファイルのみです

ワークフロー： 一時版 → 保存版 → アーカイブの各反復については、references/full-guide.md（§ ファイル名のライフサイクル例）を参照してください。

昇格のきっかけとなる表現：

• 「これを残して」「これはいい」「これを保存して」
• 「これをデフォルトにして」「これで確定して」
• 「これが気に入った」

ベーステンプレート

すべてのクイックビュー HTML ファイルでは、${CLAUDE_SKILL_DIR}/assets/base-template.html のベーステンプレートを使用します。これを読み込むと、CSS 変数、ダークモード対応、切り詰め表示の切り替えスクリプト、タイプ別のボーダークラスを含む完全な HTML 構造を取得できます。出力の生成時に、{title}、{timestamp}、{count}、{content} のプレースホルダーを置き換えます。

パターン

項目のリスト

<h1>Title</h1>
<ul>
  <li><strong>@username</strong> — action item</li>
</ul>

表

<table>
  <tr><th>Contact</th><th>Action</th><th>Draft</th></tr>
  <tr><td>@name</td><td>Follow up</td><td>Hey...</td></tr>
</table>

展開可能なセクション（長いコンテンツ向け）

<details>
  <summary><strong>@username</strong> — action</summary>
  <div class="truncate">
    <pre>Long content here that may need truncation...</pre>
  </div>
</details>

タイプ別に区別した項目

<div class="type-user">User message or input</div>
<div class="type-draft">Draft content</div>
<div class="type-done">Completed item</div>

アクション付き

<p>
  <a href="tg://resolve?domain=username">Open Telegram</a> ·
  <button onclick="navigator.clipboard.writeText('draft text')">Copy</button>
</p>

出典付きデータ（引用と詳細確認）

外部ソースから収集したデータを表示する場合は、詳細を確認できるよう、必ず出典へのリンクを含めます。

ベーステンプレートの CSS に追加：

.source { color: var(--muted); font-size: 0.75rem; }
.source a { color: var(--muted); }
.source a:hover { color: var(--accent); }

インライン出典表記（リストで推奨）：

<div class="tip">
  <strong>Tip title</strong> — Description of the tip.
  <span class="source">— <a href="https://x.com/user/status/123">@username</a></span>
</div>

出典列付きの表：

<table>
  <tr><th>Tip</th><th>Source</th></tr>
  <tr>
    <td>Description here</td>
    <td class="source"><a href="https://x.com/user/status/123">@user</a></td>
  </tr>
</table>

要約に出典を含む展開可能な項目：

<details>
  <summary><strong>Tip title</strong> <span class="source">— <a href="URL">@source</a></span></summary>
  <p>Full content...</p>
</details>

主な出典を含むメタヘッダー：

<p class="meta">
  Generated: {timestamp} · {count} items ·
  Source: <a href="https://x.com/user/status/123">Original thread</a>
</p>

原則：

• 外部ソースのデータには、必ず元の情報へのリンクを付ける
• ソーシャルメディアでは @username、記事ではドメインを使用する
• 出典リンクは目立たせず、控えめなスタイルにする
• 単一のソースからのデータをまとめる場合は、主な出典をメタヘッダーに含める

編集可能な下書き（差分追跡付き）

送信前にユーザーが編集する可能性のある下書き向けです。後で分析できるよう、元の内容と編集後の内容を追跡します。

<details> マークアップと、閉じタグ </body> の前に含める saveDraft／copyDraft／restoreEdits／exportEdits スクリプトについては、references/full-guide.md（§ 編集可能な下書きのマークアップ、§ 編集可能な下書きのスクリプト）を参照してください。

編集可能な下書きを使用する場合は、ヘッダーにエクスポートボタンを追加します：

<p class="meta">Generated: {timestamp} · {count} drafts · <button onclick="exportEdits()">Export Edits</button></p>

ワークフロー

1. 表示するデータを特定する（ファイル、変数、直近の出力）
2. パターンを選ぶ：リスト、表、展開可能なセクション
3. 上記のテンプレートを使って HTML を生成する
4. _private/views/{name}-temp.html に書き込む
5. open _private/views/{name}-temp.html を実行する
6. ユーザーが承認したら、{name}.html に昇格する

例

ユーザー：「下書きを見せて」

エージェント：

1. _private/drafts/outreach_drafts.md を読み込みます
2. 各下書きを解析します（見出し＝連絡先、本文＝下書き）
3. 各下書きに <details> を使用した HTML を生成します
4. _private/views/drafts-temp.html に書き込みます
5. open _private/views/drafts-temp.html を実行します

結果：ブラウザーが開き、自動でダークモード／ライトモードに切り替わる、展開可能な下書き一覧が表示されます。長いコンテンツは「もっと見る」で省略表示され、各下書きをコピーできます。

ユーザー：「いい感じです。これを残しておいてください」

エージェント：

1. drafts-temp.html を drafts.html に名前変更します
2. 「drafts.html として保存しました」と確認します

スタイリングの引き継ぎ

このスキルでは、最小限のスタイリングを施した機能的な HTML を生成します。見た目をしっかり整えるには、生成後に html-style スキルを呼び出してください。

quick-view が使用するクラス（html-style と互換性があります）：

クラス	用途
.type-user	ユーザー入力／メッセージ
.type-draft	下書きの内容
.type-done	完了した項目
.source	出典リンク
.meta	メタデータのヘッダー
.truncate	長いコンテンツのコンテナー
.actions	アクションボタンのコンテナー

JS フック用データ属性：

• data-username — 下書きの識別子
• data-original — 差分追跡用の元のテキスト

クレジット

省略表示のパターンと CSS 変数のアプローチは、simon willison's claude-code-transcripts に着想を得ています。