docs-page

Docs Page Skill

1 つの HTML ファイルで、3 カラムのドキュメントページを作成します。

ワークフロー

1. 有効な DESIGN.md を読みます（上に挿入されています）。本文には本文用のトークン、コードには等幅用のトークンを使用し、行の高さと最大幅のルールを守ります。
2. 概要からトピックを選びます。ページは汎用的なワイヤーフレームではなく、実際のドキュメントのように見える必要があります。具体的な API 名、コマンド例、もっともらしいパラメーターを含めます。
3. 3 つの領域を配置します。dir="rtl" の場合にも正しくレイアウトが反転するよう、インライン軸上に表現します。
   • インライン開始側のナビゲーション（240～280px、固定表示）：グループ化されたリンク一覧を配置し、現在のページを太字にして、インライン開始側の端にアクセントストライプを付けます。4～8 個のリンクを含むグループを 3～5 個配置します。
   • 記事本文（最大幅は約 720px、中間カラムで中央揃え）：H1、リード文、H2 セクション、コードブロック、コールアウトボックス（注記／警告）、インラインリンク、リストを配置します。
   • インライン終了側の目次（200～240px、固定表示）：「このページの内容」と H2／H3 アンカーを配置し、ユーザーのスクロールに合わせて現在のセクションを強調表示します。
4. 1 つの HTML ドキュメントを作成します。
   • <!doctype html> から </html> までを含め、CSS はすべてインラインにします。
   • 3 カラムには CSS Grid を使用し、左右のレールには固定配置を使用します。
   • コードブロックには等幅トークンと柔らかな背景色を使用し、コピーボタンの表示を設けます（見た目だけでよく、JavaScript は不要です）。
   • TOC のリンクが機能するよう、すべての H2／H3 にアンカー ID を付けます。
   • ナビゲーション、記事、TOC に data-od-id を付けます。
5. 本文：信頼できるドキュメントらしい文章を 350 語以上記述します。シェルコマンドを 1 つ以上、コードスニペット（5～15 行）を 1 つ以上、コールアウトを 1 つ以上、テーブルを 1 つ含めます。
6. セルフチェック：
   • 本文は、デザインシステムの最適な行長である 60～75 文字で折り返されます。
   • コードには汎用的な monospace ではなく、デザインシステムの等幅トークンを使用します。
   • アクセントは控えめに使い、アクティブなナビゲーション項目、リンク、コールアウトの境界線 1 か所に限定します。本文には使いません。
   • 1280w で読みやすく、900w 未満でも適切に折りたたまれます（TOC は非表示になり、ナビゲーションは上部ドロワーになります）。
   • レールとアクセントストライプには論理 CSS（margin-inline-start、border-inline-start、inset-inline-end、text-align: start）を使い、dir="rtl" の場合に正しくレイアウトが反転するようにします。

出力仕様

<artifact> タグで囲んで出力します。

<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
<!doctype html>
<html>...</html>
</artifact>

成果物の前に 1 文だけ記述し、その後には何も記述しません。