kudo-html-publish¶

§1 スコープと思想（scope-and-philosophy）¶

1.1 二分法の運用化¶

@trq212の主張を工藤さんの仕事文脈に翻訳した運用原則：

層	フォーマット	スキル
AIが読む中間素材	Markdown	kudo-writing / SKILL.md / CLAUDE.md / WorkFlowy
人間が斜め読みする最終成果物（中間粒度）	HTML（本スキル）	kudo-html-publish
人間が編集する正式納品物	PPTX / DOCX	kudo-proposal-deck
印刷・配布物	PDF	kudo-proposal-deck → export

1.2 本スキルが埋める空白¶

これまでの工藤さんの生態系には「MarkdownのままWorkFlowyに蓄積する」か「PPTXで本納品する」かの2モードしかなく、その中間「他者にレイアウト付きで素早く共有したいが、PPTXほどの工数はかけたくない」層が空白だった。本スキルがその空白を埋める。

1.3 やらないこと¶

中間素材のHTML化（SKILL.md, WorkFlowy行など）
正式提案資料のHTML置換（PPTXのまま維持）
単発の対話的回答のHTML化（テキストで十分なものをHTML化しない）

§2 「HTMLで出す」判定マトリクス（when-html）¶

2.1 即発火する条件¶

以下のいずれかが満たされた瞬間に本スキルを起動：

他者が読む AND 斜め読みされる AND PPTX工数をかけない
ユーザーが「一枚物で」「HTMLで」「ブラウザで開く形で」を明示
kudo-deck-generation-router §1.6 の Phase 0.5 がアクティブ化
クライアントに「プレ提示」「事前共有」「ティザー」を送る局面
週次/月次のふりかえりを他者に共有する局面

2.2 発火しない条件（誤発火防止）¶

自分一人のメモ・思考整理 → Markdown／WorkFlowyのまま
SKILL.md改訂 / CLAUDE.md更新 → Markdownのまま
単一質問への回答 → 通常のチャット応答
クライアント本提案のPPTX → kudo-proposal-deck
原稿執筆（コピー・ボディ・ブログ） → kudo-writing

2.3 グレーゾーンの判断軸¶

迷ったら「この成果物を3人以上の他者が斜め読みするか？」を問う。YESならHTML、NOならMarkdown。

§3 4テンプレート（four-templates）¶

3.1 summary — 議事録・打合せまとめ¶

構造：会議名／日付／参加者／所要時間ヘッダー、TL;DR、決定事項・ネクストアクション・未決事項の3つの折りたたみセクション、アクションテーブル。

audience-mode（v0.4）：本体 external 仕様＋工藤への確認事項のみ internal セクションで挿入＝ mixed。

3.2 retrospective — KPT 週次/月次¶

構造：Keep / Problem / Try の3カラムグリッド。

audience-mode（v0.4）：本体 external 仕様（他者と共有可能）＋工藤の私見・次サイクル仮説のみ internal セクション＝ mixed。

3.3 phase05 — HTML一枚物（Deck骨格先行）¶

構造：ヒーロー、3-5章立て、各章 = 後のPPTX 5-10枚分の骨格、最終CTA。

audience-mode（v0.4）：提案本体は external、工藤との議論ポイント・私見・判断項目は internal セクションで挿入＝ mixed デフォルト。

3.4 proposal-preview — クライアントプレ提示¶

構造：カバー、3層構造（顧客課題／提案骨子／投資対効果）、次回アジェンダ。

audience-mode（v0.4）：external 純粋型（internal セクションを一切含まない）。クライアント提示が前提のため、議論用セクションを混ぜない。

§4 生成プロトコル（generation-protocol）¶

Step 1. 用途分類
  - publish vs archive を判定
    - archive → kudo-workflowy-double-save、終了
    - publish → 続行
  - 4テンプレートから1つ選択（§3）

Step 2. セクション単位 audience-mode 設計（v0.4新設）
  - HTML 内の各 <section> に data-audience="external" or "internal" を付与
  - external: クライアント提出物の本体（デフォルト）
  - internal: 工藤への質問／確認／私見／★仮説／判断項目
  - proposal-preview は internal セクションゼロ（external 純粋型）
  - 他テンプレは mixed デフォルト

Step 3. ブランドトークン読込（§5）
  - kudo-brand-tokens.json を SSOT として参照
  - kudo-brand-tokens.css を inline 化
  - section[data-audience="internal"] CSS セレクタを適用

Step 4. HTML 生成
  - self-contained 単一ファイル（CDN依存ゼロ）
  - inline CSS only、JSなし default（Copy as MD ボタン例外）
  - @media print 必須（internal セクションは自動非表示）
  - 必須要素6点（§6）を全て含む
  - ファイル名：mixed の場合 -mixed.html、external 純粋型は通常名

Step 5. ハンドオフ
  - ブラウザでダブルクリック開ける
  - 工藤さんがレビュー、緑（internal）と白（external）を区別して読む
  - 議論完了後、「資料化して」発言で §6.6 のプロトコル発火

Step 6. 資料化アクション（v0.4新設・必要時のみ）
  - §6.6 に詳細
  - internal セクションを全除外、external のみのクリーン HTML を別ファイルで生成
  - ファイル名：-for-client.html サフィックス

§5 ブランドトークン適用（brand-application）¶

5.1 SSOT参照¶

カラー・フォントは 個人設定§9 が一次ソース。本スキルは独自定義を一切持たない。

/* kudo-brand-tokens.css の inline 化例（v0.4） */
:root {
  /* Layer 1 ニュートラル */
  --color-paper: #FFFFFF;
  --color-oatmeal: #F1EDE5;
  --color-stone: #C9C5BD;
  --color-mushroom: #7E7B76;
  --color-ink: #2C2B28;
  --color-jet: #161616;
  /* Layer 2 プライム */
  --color-crimson: #BC002D;
  --color-prussian: #003F6B;
  /* Layer 3 セカンダリー */
  --color-ochre: #C89932;
  --color-forest: #2D5A3A;
  /* 拡張色 — internal セクション専用（v0.3新設） */
  --color-forest-deep: #1F4029;
  --color-light-ochre: #E5C97E;
  --color-warm-red: #FF6B6B;
}

5.2 セクション単位 audience-mode の CSS 実装（v0.4新設）¶

/* デフォルト（external セクション）は通常仕様 */
section[data-audience="external"] {
  /* 通常スタイル */
}

/* internal セクション：緑背景＋白文字＋Jetラベル */
section[data-audience="internal"] {
  background: var(--color-forest);
  color: var(--color-paper);
  padding: 24px 28px;
  margin: 36px -28px;  /* 左右に少し食い込ませて識別性UP */
  border-left: 6px solid var(--color-light-ochre);
}
section[data-audience="internal"] h2,
section[data-audience="internal"] h3 { color: var(--color-paper); }
section[data-audience="internal"] strong { color: var(--color-light-ochre); }
section[data-audience="internal"] em { color: var(--color-light-ochre); font-style: italic; }

/* セクション識別タグ（::before で自動挿入） */
section[data-audience="internal"]::before {
  content: "⬢ INTERNAL — 工藤との議論用 / 「資料化」時に除外";
  display: inline-block;
  background: var(--color-jet);
  color: var(--color-light-ochre);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  margin-bottom: 18px;
}

/* インラインの小さい議論メモ */
.internal-note {
  display: block;
  background: var(--color-forest);
  color: var(--color-paper);
  border-left: 4px solid var(--color-light-ochre);
  padding: 14px 18px;
  margin: 18px 0;
}

/* 印刷時：internal セクションは自動除外 = 提出版相当 */
@media print {
  section[data-audience="internal"],
  .internal-note { display: none !important; }
}

5.3 AI slop 回避¶

❌ 過度な中央寄せ
❌ 紫グラデーション
❌ 画一的 rounded-2xl
❌ Interフォント
❌ 絵文字過多
❌ 全幅 hero + ぼんやり背景

§6 必須要素6点（required-elements）¶

すべてのHTML成果物は以下を全て満たす：

self-contained 単一HTML：CDN依存ゼロ、ローカルダブルクリックで開く
Copy as Markdown ボタン：成果物末尾固定。clipboard API 最小JS（10行以内）は §6-4 例外
@media print：A4縦/横どちらで印刷してもレイアウト崩れない。internal セクションは自動非表示
JSなし default：プロンプトインジェクション・XSS リスク回避
ブランドトークン参照：kudo-brand-tokens.css inline 化（独自カラー定義禁止・Tier A規律）
セクション単位 audience-mode 識別（v0.4で根本修正）：各 <section> に data-audience="external" または "internal" を必ず付与。internal セクションは §6.5 の視覚言語（深緑背景＋白文字＋Light Ochre強調＋Jet識別タグ）を満たす

§6.5 audience-mode（セクション単位・mixed デフォルト）（audience-mode）¶

6.5.1 設計の趣旨（v0.4 の本質）¶

工藤さんの当初の意図：1つの HTML 成果物の中に、工藤への質問・確認・私見と、クライアント提出物の本体が混在する。「資料化して」と一声で、緑のセクションを抜けば提出物が完成する。

v0.3 では誤って「ファイル単位」で internal / external を分けてしまい、議論版→提出版を作り直す二度手間が発生していた。v0.4 で「セクション単位」に修正。mixed が標準形態。

6.5.2 2種類のセクション¶

属性	視覚言語	用途
`data-audience="external"`	通常仕様（Paper / Oatmeal 背景、Ink 本文）	クライアント提出物の本体（デフォルト）
`data-audience="internal"`	Forest 緑背景、Paper 白文字、Light Ochre 強調、Jetラベル付き	工藤への質問／確認／私見／★仮説／判断項目

加えて、本文中に挟む小さい議論メモは .internal-note クラスで実装可能（インラインメモ形式）。

6.5.3 internal セクション視覚言語（v0.3 から継承）¶

要素	値	備考
背景	Forest #2D5A3A	§9 Layer 3
本文	Paper #FFFFFF	§9 Layer 1
強調	Light Ochre #E5C97E	§9 拡張色
警告	Warm Red #FF6B6B	§9 拡張色
カード抜き	Forest Deep #1F4029	§9 拡張色
識別タグ	Jet #161616 ＋ Light Ochre 文字	`::before` で自動挿入
左ボーダー	Light Ochre 6px	セクション識別
印刷時挙動	自動非表示（@media print で display:none）	印刷＝提出版相当

6.5.4 テンプレ別のデフォルト¶

テンプレート	デフォルト形態	備考
summary	mixed（本体 external＋確認のみ internal）	議事録本体は他者共有可能、Claude側補足のみ internal
retrospective	mixed（本体 external＋私見のみ internal）	KPT 本体は共有可能、次サイクル仮説は internal
phase05	mixed（提案本体 external＋議論ポイント internal）	Phase 0.5 の典型形態
proposal-preview	external 純粋型（internal セクションゼロ）	クライアント提示が前提のため、議論用を混ぜない

6.5.5 「資料化」アクションは §6.6 へ¶

internal セクションを除外して提出版を生成するプロトコルは §6.6 参照。

§6.6 「資料化」プロトコル（resource-finalization）¶

6.6.1 発火トリガー¶

工藤さんから以下の発言があった瞬間に発火：

「資料化して」「提出版にして」「クライアント版に」
「緑を抜いて」「議論部分を消して」「外に出せる形に」
「印刷して渡す形」「PRに使う版」「外部公開用」
「クリーン版」「これ清書して」

6.6.2 実行内容¶

1. 元 HTML から section[data-audience="internal"] を全削除
2. .internal-note クラスのインラインメモも全削除
3. クリーン化された HTML を別ファイルで出力
4. ファイル名規約：
   - 元ファイル: foo-mixed.html
   - 提出版:    foo-for-client.html
5. Markdown版 Copy as Markdown ボタンも internal 除外モードを採用
6. 工藤さんに「-for-client.html で生成しました」と報告

6.6.3 印刷時の挙動¶

@media print で section[data-audience="internal"] は display: none !important 設定済み（§5.2 CSS）。

つまり工藤さんが mixed HTML をそのまま Cmd+P で印刷すれば、緑セクションは自動的に消え、白い本体だけの提出版PDFが手に入る。

「資料化して」発言なしでも、印刷経路だけで提出版が手に入るのが v0.4 の強み。

6.6.4 二度手間ゼロの保証¶

v0.3 では (a) 議論用HTML作成 → (b) 提出用HTML作り直し、の2ステップだったが、v0.4 では：

1ファイル（mixed）作成 → 「資料化して」or 印刷 → 提出版が即完成

の1ステップに圧縮される。

§7 Phase 0.5 ハンドオフプロトコル（phase05-handoff）¶

kudo-deck-generation-router §1.6 から呼ばれた場合の連携手順：

1. router から「Phase 0.5 起動」シグナル受信
2. kudo-html-publish が phase05 テンプレートで生成
   - mixed デフォルト：提案本体は external、議論ポイント・私見・判断項目は internal
3. 工藤さんがブラウザで確認・要件確定
   - 緑（internal）= 議論／確認、白（external）= 提案本体として読む
4. 確定後、必要に応じて「資料化」アクション（§6.6）でクライアント版生成
5. 3レーンルーターが起動、PPTX化フェーズへ
6. HTML成果物の配置先（kudo-context-routing §1.3 二層ワークスペース規範に従う）：
   - **クライアントプレ提示 HTML（案件固有）** → 各案件 `_claude_workspace/03_output/phase05/` にアーカイブ（既定・特例1）
   - **案件横断の議事録 HTML・ふりかえり・複数案件サマリ** → `_claude_workspace_global/outputs/phase05/`

§8 触らない領域（forbidden-zones）¶

対象	担当スキル
WorkFlowy保存物	kudo-workflowy-double-save
SKILL.md / CLAUDE.md	kudo-persist-settings
原稿（コピー・ボディ・書籍）	kudo-writing
クライアント本提案PPTX	kudo-proposal-deck
個人設定本体	(UI から直接編集)
メモリファイル	(Claude memory)

§9 トリガー語彙（trigger-vocabulary）¶

9.1 HTML生成を発火する語彙¶

「まとめて」「サマリーで」「議事録を」
「ふりかえり」「KPTで」「週次/月次レビュー」
「一枚物」「HTMLで」「ブラウザで開く形で」
「Phase 0.5 で」「本提案の前に」「合意取りたい」
「斜め読みできる形に」「Slack に貼る用」「メール添付用」

9.2 「資料化」アクションを発火する語彙（v0.4新設）¶

「資料化して」「提出版に」「クライアント版に」
「緑を抜いて」「議論部分を消して」「外に出せる形に」
「印刷して渡す形」「PRに使う版」「クリーン版」「清書して」

9.3 発火しない語彙（誤発火防止）¶

「メモ取って」「思考整理」→ Markdown
「SKILL.md 更新」→ Markdown
「コピー書いて」→ kudo-writing
「PPTX で」「スライド作って」→ kudo-proposal-deck

§10 関連スキル¶

スキル	関係
kudo-proposal-deck	兄弟、PPTX本提案前のHTML中間レイヤー
kudo-deck-generation-router	上流、§1.6 Phase 0.5 から呼ばれる
kudo-workflowy-double-save	補完、Copy as Markdown で連携
kudo-context-routing v1.3 §1.3	配置先二層化：クライアント案件 HTML=`_claude_workspace/03_output/` ／案件横断 HTML=`_claude_workspace_global/outputs/phase05/`
kudo-shared-storage-protocol v1.2 §5.5	global 集中原則の親 SSOT。HTML 案件横断成果物の格納先を規定
kudo-ecosystem-cascade-protocol	Tier A: §9 SSOT 必須参照
kudo-skill-cross-reference-resolver	YAML frontmatter / anchor規約

§11 既知の失敗ケースと対策（known-failures）¶

Case 1：クライアント企業のメールゲートウェイがHTML添付を遮断¶

→ @media print で PDF エクスポートして送る。

Case 2：「綺麗に見せたい」が暴走してAI slopに堕ちる¶

→ §5.3 のチェックリストを生成後に巡回。

Case 3：WorkFlowy への転記で構造が崩れる¶

→ Copy as Markdown が WorkFlowy ネイティブの階層MDを出力する実装。

Case 4：Phase 0.5 で章立てが固まる前にHTMLを作り込みすぎる¶

→ Phase 0.5 は合意形成のための一枚物。視覚的完成度より章立ての正確性を優先。

Case 5：JSを入れたくなる衝動¶

→ default JSなし。Copy as Markdown は §6 例外条項で許容。

Case 6：Mac fallback フォントが Hiragino 系統でない（v0.2 追加）¶

→ 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho' 順序。

Case 7：badge の border-radius が AI slop 該当（v0.2 追加）¶

→ border-radius: 0 ~ 2px に制限。

Case 8：議論用と納品用が視覚的に区別できず、最終納品時に過去議論コメントが紛れ込む事故（v0.3 で対処）¶

→ v0.3 で audience-mode 区別原則を新設。

Case 9：v0.3「ファイル単位」audience-mode 設計の二度手間（v0.4 で根本修正）¶

症状：v0.3 では internal ファイル（全面緑）と external ファイル（全面白）を別物として作る設計だった。工藤さんと議論しながら HTML を仕上げた後、クライアント提出時に「議論用→提出用」を作り直す必要があり、実質的な二度手間が発生していた。

工藤さんの本来の意図は「1ファイル内に議論と提出物が混在し、資料化一声で緑を抜くだけで提出版完成」だったが、v0.3 設計者（Claude）がそれを「ファイル全体に1モード」と取り違え、白黒二分法で実装してしまった。

対策：v0.4 で audience-mode をセクション単位（section[data-audience="internal"] / "external"）に変更。1ファイル内に両者が混在する mixed をデフォルトに。「資料化して」発言で internal セクションを除外したクリーン版を即生成（§6.6）。@media print でも internal は自動除外。

2026-05-13 工藤さんとの議論で v0.3 設計の本質的ミスを特定、即日 v0.4 へ修正。ファイル単位 → セクション単位は audience-mode の粒度を正しく取る最重要設計判断として永続化。今後類似のメタ設計で「ユーザーの実運用フローに対して粒度が荒すぎないか」を必ず点検すること。

§12 changelog¶

v0.5（2026-05-15・集中原則ガバナンス Phase 3 Part B-5）¶

§7 Phase 0.5 ハンドオフプロトコル Step 6 を二分岐：HTML 成果物の配置先を「クライアントプレ提示（案件固有）→ 案件 _claude_workspace/03_output/phase05/」と「案件横断議事録・ふりかえり → _claude_workspace_global/outputs/phase05/」に分離（kudo-context-routing §1.3 二層ワークスペース規範 準拠）。
§10 関連スキル表：kudo-context-routing の説明を v1.3 §1.3 二層化に更新、kudo-shared-storage-protocol v1.2 §5.5 を新規追加。
frontmatter related：kudo-context-routing#dual-layer-workspace と kudo-shared-storage-protocol#section-5-5 を新規参照。last_updated を 2026-05-15 に更新。
Phase 2 grep 監査 Pattern 6（_claude_workspace 3 hits）の解消。

v0.4（2026-05-13）¶

audience-mode を「ファイル単位」→「セクション単位」へ根本修正（v0.3 の設計ミスを工藤さん指摘で特定、即日修正）
§6.5 audience-mode を全面書き直し：mixed デフォルト、各 <section> に data-audience 属性で識別
§6.6 「資料化」プロトコルを新設：internal セクション除外による提出版即生成
§5.2 セクション単位 CSS 実装を新設：section[data-audience="internal"] セレクタ、::before 識別タグ、@media print 自動除外
§4 生成プロトコル Step 2 を変更：ファイル単位判定 → セクション単位タグ付け
§4 Step 6「資料化アクション」を新設：トリガー語彙発火時の動作
§3 各テンプレのデフォルト形態を更新：summary/retrospective/phase05 は mixed デフォルト、proposal-preview のみ external 純粋型
§6 必須要素6点目を更新：「audience-mode の明示」→「セクション単位 audience-mode 識別」
§9.2 「資料化」発火語彙を新設
§11 Case 9 を新設：v0.3 設計ミスの永続化（粒度判断の教訓）
anchors に resource-finalization を追加：参照腐敗防止
description 更新：v0.4 mixed 設計の説明を含め 1024 文字以内

v0.3（2026-05-13）¶

audience-mode 区別原則を新設（ファイル単位）。視覚言語（深緑＋白＋Light Ochre＋Jet帯）を確定。この設計は v0.4 でセクション単位に修正されたが、視覚言語自体は v0.4 でも継承されている。

v0.2（2026-05-13）¶

dogfooding フィードバック完全反映、status stable 昇格。

v0.1.2（2026-05-12）¶

YAML frontmatter schema 完全準拠。

v0.1.1（2026-05-12）¶

SKILL.md frontmatter 修正。

v0.1（2026-05-12）¶

初版作成、@trq212理論的根拠採用、4テンプレ定義。

次期予定（v0.5 候補）¶

「資料化」アクションの dogfooding テスト
internal セクション内の .internal-note インライン版の使用パターン整理
PPTX への audience-mode 波及検討（kudo-proposal-deck と協議）