HTMLドキュメントとページ
生成するもの
自己完結型の単一.htmlファイルです。納品するファイルはすべて、リビジョンを含めて~/.opencode/html/<slug>.htmlに保存します。必要に応じてmkdir -p ~/.opencode/htmlでディレクトリを作成してください。出力をリポジトリ、デスクトップ、一時ディレクトリに散らばらせないでください。
ファイルはディスクから開き、オフラインで動作します。CSS、JavaScript、画像、図を埋め込みます。外部アセット、ネットワークリクエスト、ビルドステップ、パッケージインストールは使用しません。
このスキルは、標準のスタイルシートとシンプルな出力ルールを提供します。コンポーネントカタログは出発点であり、エージェントが表現できる内容を制限するものではありません。
クイックパス：write → show → iterate
- ソースと
components/shell.htmlを読みます。 - コンテンツに必要なコンポーネントのみを読みます。
- スタイルシートのプレースホルダーを含むファイルを書き込みます。
- プレースホルダーを
styles/base.cssの内容そのもので置き換えます。必要に応じてスキンを追加します。 tools.browser.previewをexecuteツールで使用してファイルを表示します。
まず有用なドキュメントを作成してください。シンプルなページを検証プロジェクトにしないでください。問題が発生したら修正します。別バージョンが要求されない限り、同じファイルを修正します。
構成と拡張
- コンポーネントのマークアップが適切な場合は再利用します。既存の
c-クラスはそのままにして、スタイルシートが適用されるようにします。 - レイアウトは
.c-wrap、.c-section、.c-stack、.c-grid、.c-split、.c-rail、.c-cardを使用して構成します。 - カタログでカバーされていないタスクには、マークアップ、CSS、インラインSVG、またはバニラJavaScriptを追加します。
- カスタムスタイルには
--c-*トークンを優先して使用します。オーバーライドは標準スタイルシートの後に記述します。 - ルーチンの調整にはカスタムプロパティを使用します（例：バーの塗りつぶしに
style="--v: 62%"）。
カスタムコードの行数制限はありません。拡張はタスクが許す限りシンプルに保ちます。一つのドキュメントを仕上げるためだけにスキルを編集したり、共有コンポーネントを追加したりしないでください。
スタイルシート：交換可能なデザイン言語
| ファイル | 役割 |
|---|---|
styles/base.css | 完全なデフォルトデザイン言語。マーカー：/* html-skill: standalone */ |
styles/editorial.css | スキン：温かみのある紙、セリフ書体。マーカー：/* html-skill: skin */ |
ルール:
- 選択したスタイルシートを
<head>内の<style>タグの間にそのまま貼り付けます。ドキュメント固有のオーバーライドは、貼り付けたコピーを編集する代わりに、その後に記述します。 - スタンドアロンスタイルシートは単独で使用します。スキンは
base.cssの後に貼り付けます。スキンはトークンと選択的なルールのみをオーバーライドし、マークアップは同一のままにします。 - スキンを切り替えてもマークアップの変更は必要ありません。拡張は独自のマークアップとクラスを追加できます。
- デザイン言語を追加するには：
styles/editorial.cssをコピーし、最初にトークンをオーバーライドし（--c-bg、--c-ink、--c-accent、--c-font-*、--c-radius-*、--c-measure）、次にまだ見栄えの悪い部分を修正します。すべてのルールを真に置き換える場合を除き、skinマーカーを付けます。すべてのルールを置き換える場合はstandaloneマーカーを付けます。
ドキュメントの構造
components/shell.htmlから始めます。以下の出力ルールに従います:
<h1>は1つだけにし、<title>と一致させます。<title>と<meta name="description">は、ドキュメントの内容を明示します。<meta name="color-scheme" content="light dark">と、最初のペイントの前に実行されるテーマスクリプトを<head>内に記述します（そうしないとページがちらつきます）。<main id="main">へのスキップリンク。- セクションは
<section class="c-section" id="…">とし、idは安定していて人間が読めるものにします。 - ナビゲーションに役立つ場合は、すべてのリンク先が存在する目次（
components/navigation.html）を含めます。 - テーマトグルボタンとフッターを、印刷専用の配布物でない限り含めます。
コンテンツのルール
- 見出しレベルは構造を示します。サイズのためにレベルを選択しないでください。
- 長いドキュメントの場合は、各
h2/h3にアンカーリンク（.c-hlink）を付けます。 - 散文はユーザーの書き方の好みに従います。平易で直接的、1段落に1つのアイデア。フィラーや宣伝的な形容詞は削除します。
<pre>内の<、>、&はエスケープします。- テーブルには
<thead>が必要で、数字は.c-numで右揃えにします。 - すべての
<img>にはalt属性が必要です。証拠画像には.c-figureキャプションを付けます。 - ファイル名：短く、説明的で、ハイフン区切り —
production-finalization.html、commits-2026-09-22.html、api-settings-explainer.html。
JavaScript
テーマ、印刷、コピー、ナビゲーション、ダイアログ、フィルター、タブ、モーションのコンポーネントブロックを再利用します。ドキュメントが使用する機能のみを含めます。
カスタムのバニラJavaScriptは許可されています。インラインでオフラインに保ちます。フレームワークを追加したり、データを取得したりしないでください。重要なコンテンツはJavaScriptなしでも読み取れる必要があります。
モーションとアクセシビリティ
prefers-reduced-motionはbase.cssで尊重されます。アニメーションを行うJSもそれを確認する必要があります（カウンターブロックにパターンが示されています）。- ランドマーク（
header、nav、main、footer）と、すべてのnavにaria-labelを付けます。 - フォーカス状態はスタイルシートから提供されます。アウトラインを削除しないでください。
- モバイルファーストでデザインします。幅360pxで水平スクロールバーは表示されません。
.c-table-wrap、コードブロック、差分、ターミナル、.c-tabs-navのみ、内部でスクロールできます（overflow-x: autoはスタイルシートから提供されます）。 - ポップアップ（
.c-drop-body、ミニレール目次、ツールチップ）はcalc(100vw - 2rem)内に収まります。タッチターゲットは各辺24px以上にします。 - すべての
<table>を.c-table-wrapでラップします。固定カラムが必要でない限り、プレーンな.c-grid（auto-fit）を優先します。
図
SVGは.c-shotフレーム内にインラインで埋め込むか（components/media.html）、data:image/svg+xml;base64, URIとして埋め込みます。PNG画像にはdata:image/png;base64,を使用します。別の画像ファイルにリンクしないでください。
軽量レビュー
ファイルを一度表示します。明らかなレイアウトやコンテンツの問題を修正します。デフォルトではチェッカー、スクリーンショットマトリックス、または繰り返しの監査を実行しません。ユーザーが要求した場合、または特定の問題の診断が必要な場合に、ターゲットを絞ったチェックを使用します。
python3 <skill-dir>/scripts/check.py FILE.htmlは、マークアップ、クラス、見出し、アンカー、コードエスケープ、および一部のアセット参照に関するオプションの診断ツールです。これは納品のゲートや、オフライン動作やアクセシビリティの証明ではありません。
ユーザーが明示的に含めるように要求しない限り、機密情報やプライベート情報は含めないでください。プレビューが開けない場合は、ファイルパスを提供し、レンダリングが確認されなかったことを明記します。
ファイル
| パス | 内容 |
|---|---|
styles/base.css | 正規のスタイルシート：トークン、テーマ、リセット、すべてのコンポーネント。 |
styles/editorial.css | スキン：セリフ書体、温かみのある紙。 |
components/shell.html | スケルトン、ヘッダー、フッター、テーマ、印刷。 |
components/layout.html | コンテナ、グリッド、領域、カード。 |
components/reading.html | 見出し、散文、引用、コールアウト、評決、脚注。 |
components/evidence.html | コードブロック、差分、ターミナル、チップ、コピーJS。 |
components/data.html | テーブル、統計、バー、メーター、タイムライン、比較。 |
components/navigation.html | 目次、レール、パンくず、ページャー、スクロールスパイJS。 |
components/interaction.html | アコーディオン、ダイアログ、ツールチップ、ドロップダウン、フィルター、タブ。 |
components/forms.html | フィールド、選択肢、ボタン、バリデーション状態。 |
components/media.html | フィギュア、スクリーンショット、図、埋め込み。 |
components/motion.html | リビール、カウンター、マーキー、スライドデッキ。 |
specimen.html | すべてのコンポーネントをレンダリング — ビジュアルリファレンス。 |
scripts/check.py | オプションのマークアップ診断。 |