docs-page

ドキュメントページスキル

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

ワークフロー

1. アクティブな DESIGN.md を読む（上記で注入済み）。本文には本文用タイプトークンを使用し、 コードにはモノトークンを使用します。行の高さと最大幅のルールを尊重します。
2. ブリーフからトピックを選ぶ — ページは汎用的なワイヤーフレームではなく、 本物のドキュメントのように見える必要があります。具体的な API 名、コマンド例、 もっともらしいパラメータを記載します。
3. 3 つの領域をレイアウトする:
   • 左ナビ（240〜280px、スティッキー）: グループ化されたリンク一覧。現在のページは 左端のアクセントストライプ付きで太字にします。4〜8 個のリンクからなるグループを 3〜5 個。
   • 記事本文（最大幅約 720px、中央カラム内で中央揃え）: H1、リード文、H2 セクション、コードブロック、コールアウトボックス（note / warning）、インラインリンク、リスト。
   • 右目次（200〜240px、スティッキー）: 「このページの内容」として H2/H3 の アンカーを表示し、ユーザーがスクロールすると現在のセクションをハイライトします。
4. 単一の HTML ドキュメントを書く:
   • <!doctype html> から </html> まで、すべての CSS をインライン化。
   • 3 カラムには CSS Grid、レールにはスティッキーポジショニングを使用。
   • コードブロック: モノスペーストークン、ソフトなサーフェス塗り、コピーボタンの アフォーダンス（視覚のみ — JS は不要）。
   • 目次のリンクが機能するよう、すべての H2/H3 にアンカー ID を付与。
   • ナビ、記事、目次に data-od-id を付与。
5. 本文: 説得力のあるドキュメントを少なくとも 350 語書きます。少なくとも シェルコマンド 1 つ、コードスニペット 1 つ（5〜15 行）、コールアウト 1 つ、表 1 つを含めます。
6. セルフチェック:
   • 本文テキストは DS の行長の最適値（60〜75 文字）で折り返される。
   • コードは汎用の monospace ではなく、DS のモノトークンを使用している。
   • アクセントは控えめ — アクティブなナビ項目、リンク、1 つのコールアウト ボーダーに使用。本文テキストには使用しない。
   • ページは 1280w で読めること、および 900w 未満で適切に折りたたまれること（目次が 消え、ナビがトップドロワーになる）。

出力契約

<artifact> タグの間に出力します:

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

アーティファクトの前に一文、後に何も書かない。