# HTML
HTML・Web UIを作る・磨くための入口と、作品・シェル・細部を実物で確認するためのkit。表現方法は内容と体験から考え、必要に応じて画像生成や立体などの専門制作も組み合わせる。掲載例を制作できる表現の一覧にはしない。
## 制作する
Co-Baseでは `/html` に自然な言葉で依頼する。Claude Codeでは `/html`、Codexの明示的なスキル選択では `$html` または `/skills` から `html` を選ぶ。会話として届いた `/html` もAGENTS.mdが同じ入口へ案内する。検出されない環境では [SKILL.md](SKILL.md) を指定できる。構成から設計する仕事と、既存を改善する仕事を目的で分け、動きやシェルは必要な時に扱う。
Company OSの共通トンマナを持つが、対象repoの品質規則と今回の指定を優先する。個人の会話・資料・外部の過去作例は、共有kitの必須入力にしない。
独立案の比較や並行制作も同じ入口へ頼める。目的・必要な内容・守る条件・対象や参考・希望するモデルなど、伝えたいことを一つの依頼にまとめる。
[依頼を書き始めるページ](start.html)では、作りたいこと、対象、参考や気になる点、決まっている条件を手掛かりに、`/html`の依頼文をコピーできる。空欄でも、一文だけでも始められる。入力は保存・送信しない。入力した文面と任意欄の見出しを、そのまま依頼へまとめる。AIは対象と参考を確かめ、本人の判断が必要な分岐があれば、推奨と理由を添えて相談する。
新しく作る時は、目的と内容から全体を設計する。品質の参考は画像や実画面で見て、その完成度と表現の幅をつかむ。参考の構図や部品を使うかは、その仕事に合うかで判断する。すでに意図と水準が伝わっていれば、参考や指示を増やす必要はない。
既存を磨く時は、良くしたいことと元の魅力を実物で捉え、変更前後の画面と操作を比べる。良い作品や細部を残す時は、元の文脈と一緒に収蔵する。制作・改善・収蔵は、同じ入口で内容に応じて進められる。
## 実物を見る
Co-BaseのHTML入口、またはこのディレクトリで起動したサーバーから開く。
```sh
node serve.mjs
```
表示された `/html/` のURLを使う。必要なら `--port N` で指定できる。既存のサーバーを停止する手順は含まない。
| 場所 | 使う時 |
|---|---|
| [index.html](index.html) | 良い原作を実寸で開き、内容・構図・素材・操作の関係を見る |
| [shell.html](shell.html) | 原ソースから引き継いだ共通部分と、本文に使える領域を確認する |
| [parts.html](parts.html) | 寸法の異なる選択、切り替え、詳細へ進んで戻る手応えを確かめる |
| [部品から探す](component-preview/index.html) | 選択・開閉・一覧の状態を動かし、使われている見本や原作へ戻る |
| `references/works/` | 選択収蔵した原作と、その実装・生成素材。出所と改変は [provenance.json](provenance.json) |
| `examples/` | 追加の試作。掲載を品質の保証や制作の既定と見なさない |
見本の数値と内容は架空。操作できる範囲は各見本で確認する。静止画での見栄えと実操作の品質は分けて確かめる。
3つのライブラリー画面にある「部品・表現を探す」から、タブ、表、メニュー、写真、動きなどの言葉で実物へ進める。同じ作品を複数の言葉から探せる索引で、制作の分類や部品の全件一覧ではない。原作・共通の実装・操作の参考を区別して表示し、試作は「試作を含める」を選んだ時に加わる。
「表現を見る」は、言葉と用途・プロジェクト、表現の性質、確かめたいことを組み合わせて絞り込める。別の試作を含める、条件内で並べ替える、続きを見ることもできる。現在表示する作品だけ画像を読み込み、作品の全文やコードは開いた先で扱う。AIも[同じ索引の検索](references/discovery.md)から必要な候補だけを受け取れる。
これらは参照する目的の違いで、作品を部品から順に組み立てる工程ではない。同じ作品を全体の体験から見ることも、カレンダーや選択表現に着目して見ることもできる。どちらか一方へ所属させず、元の文脈へ戻れるようにする。初回から完成した体験を作り、その実物でさらに改善する。見本を増やしたことだけで、今後の創造性や品質を実証したとは扱わない。
[appearance.css](appearance.css) は色とグラデーション、[selection.css](selection.css) は原版由来の選択の縁と淡い反応・遷移を持つ。[selection.mjs](selection.mjs) は実際のタブの幅・高さへ追従する任意の外観補助。寸法・配置・情報量と、選択そのものの動作は各画面が所有する。
共通UIの書体は対象の正式sourceから確かめる。同梱シェルを採用する時の書体は [shell-source.css](assets/shell/shell-source.css) にあり、色だけを持つappearance.cssとは範囲が異なる。[トンマナの説明](references/tone.md) はこの区別と対象への接続を扱う。[disclosure.mjs](disclosure.mjs) は対象selectorを指定でき、動的な差替前に返された解除関数を呼べる。既定の呼出はライブラリーの補足欄を保つ。
シェルの外観と背景・表示pickerは原版から抽出し、公開の接続口 [shell/mount.mjs](shell/mount.mjs) をライブラリー自身も使っている。[chrome.mjs](chrome.mjs) はこのkitのラベル・リンク・保存先を渡す薄いadapter。共通の見出し・説明・ページナビは任意の `pageHeader` として接続でき、ライブラリーの文面や制作へのリンクは専用adapterが持つ。URLコピーとピン留めは操作でき、ピンはこのブラウザーのこのkit内に保存する。元Hubのアカウント・通知・配置同期を移植したものではない。対象に正式なシェルがある場合はそちらを使う。
表示設定はライブラリーのタブとサイドバーのリンクへ引き継ぐ。遷移先に表示指定があればそちらを優先する。タブの下線は対応ブラウザーでページをまたいで移動し、動きを抑える設定では静止する。通常のリンクとブラウザーの履歴はそのまま使える。
## 共通シェルを対象へ接続する
この Company OS Studio sidebar を採用する時は [接続の説明](references/shell.md) と [動く最小例](shell/example.html) を開ける。例の [HTML](shell/example.html)・[対象adapter](shell/example.mjs) は、そのまま読める実装。対象repoに別の正式sourceがある場合は、そのsourceと版を先に確かめる。検索やピンを全HTMLへ必須にする入口ではない。
空の host と本文 `main` を用意し、対象の module から `mountShell()` を呼ぶ。以下の `page-shell.mjs` は対象側のファイル名で、動く実例は `shell/example.mjs` にある。
```html
対象が自由に設計する本文
```
`mountShell({host, main, pageHeader, identity, location, navigation, pin, appearance, onAppearanceChange})` で接続する。`navigation` はグループとitemの配列。`href` は本物のリンク、`data` と `onActivate` は対象のbutton動作へつながる。行・図標・selected/hover/focusは共通側が描画し、対象側で書き直さず使える。
`pageHeader` は任意。タイトル・説明・操作・ページナビを含む、接続済みの `main` の先頭要素を渡す。文面・リンク・項目数は対象が持ち、[page-header.css](shell/page-header.css) の `.co-page-*` が見え方を揃える。渡さない既存ページの接続は変わらない。[実例](shell/example.html) で、ナビだけの構成や対象に必要な要素へ置き換えられる範囲を確認できる。
[page-header.mjs](shell/page-header.mjs) は選択表示を現在のDOMへ追従させる。ページリンクは `aria-current="page"`、画面内のタブは `aria-selected="true"` を使う。遷移、本文の切替、タブのキー操作は対象が持ち、アンカーをタブへ変換しない。対象側で内容を差し替えた後は `shell.pageHeader?.refresh()` も呼べる。APIはタイトルや本文の内容を保存する機構ではない。
`pin` は対象専用の `storageKey`、現在地を返す `current: () => ({href, title})`、復元可能なURLだけを返す `normalizeHref(value)` を渡す。URLコピーは current のhref、pin識別は正規化後のURL。単に現在URLを渡しても、URLから復元できない本文やメモが保存されたことにはならない。対象内のURL/titleが変わった後は戻り値の `refresh()` を呼び、`popstate` での本文復元は対象が持つ。外観をページ移動後も保つ場合は、例のように `onAppearanceChange` と初期 `appearance` を対象専用の保存先へつなぐ。
本文の構成・アイコン・タブ・図・情報量は対象が設計する。CSSは本文のclassへscopeし、共通sidebarの選択表現を本文の寸法指定へ広げない。配布時は `shell/` の実装、`chrome.css`、`appearance.css`、`assets/shell/` と出所・説明を一緒に扱う。ライブラリーと接続例は同じ共通実装を使う。収蔵原作が持つシェルのコピーは、その採用版の実装として保持する。
## 配布と更新
このディレクトリを単位に扱い、Co-Base内部や旧Hubを実行時の依存にしない。対象へコピーした実装は対象が所有し、kitの更新で自動上書きしない。業務データ・権限・ホスト設定の接続は対象側で行う。
「この作品を参考に追加」「この選択の手応えを共通に」「次からもっと良いものを作れるように」と依頼できる。実物と意図から変更の範囲を整理し、[更新の指針](references/update.md) に沿って反映する。掲載だけで共通規則を変えたり、最新日付やモデル名だけで既定へ昇格させたりしない。
| 変えるもの | 反映する場所と範囲 |
|---|---|
| 参考になる作品・素材 | 作品集と原作への導線。内容・構図・素材・操作を実物で見られるようにする |
| 共通の色・選択の手応え | `appearance.css`、`selection.css` / `selection.mjs`。採用している画面へ反映し、各画面の寸法・配置は保つ |
| シェル・表示・移動の既定 | `shell/` と `assets/shell/`。`chrome.mjs` はライブラリー設定を接続する。同じシェルを使う画面で操作を確認する |
| ページの見出し・説明・ナビの外観 | `shell/page-header.mjs` / `.css`。採用するページのDOMに接続し、本文の構図とは分けて更新する |
| ライブラリーの文面・行き先 | `library-header.mjs` / `.css` と `navigation.mjs` / `.css`。3画面固有の案内とページ間の遷移を持つ |
| 実物を探す導線 | 共有の登録は `reference-data.mjs` を作品集・finder・AI検索で共用。私有の選択カタログは `reference-query.mjs --catalog` で読む。用途・版・原作・対応画像を一緒に更新する |
| 依頼の記入支援 | `start.html` / `start.css` / `start.mjs`。任意の手掛かりから、原文を保持した依頼をコピーする |
ローカルserverに依存しない閲覧先へ届ける時は、[静的サイトの配信と更新](references/publish.md)を使う。共有kitの公開一覧と、明示した採用場面だけから配信物を作る。私有カタログの任意の`web`は配信した実HTML、`href`は元の制作ファイルを指す。
配布一覧と出所・改変・採用版も更新する。別repoへのコピーは自動更新せず、その対象で必要な差分を取り込んで確認する。