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

ドキュメントページスキル は何をしますか？

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

ワークフロー

1. アクティブなDESIGN.mdを読み込みます（上記でインジェクト）。本文用のボディタイプトークン、コード用のモノトークンを使用し、line-heightとmax-widthルールを尊重します。
2. ブリーフからトピックを選びます — ページは汎用的なワイヤーフレームではなく、実際のドキュメントのように見える必要があります。具体的なAPI名、コマンド例、妥当なパラメータを含めます。
3. 3つの領域をレイアウトします。インライン軸で表現し、dir="rtl"下でも正しく反転するようにします。
   • インラインスタートナビ（240–280px、スティッキー）: グループ化されたリンクリスト。現在のページは太字で、inline-start端にアクセントストライプを付けます。3〜5グループ、各グループ4〜8リンク。
   • 記事本文（max-width ~720px、中央の列にセンタリング）: H1、リード段落、H2セクション、コードブロック、コールアウトボックス（注意/警告）、インラインリンク、リスト。
   • インラインエンド目次（200–240px、スティッキー）: 「このページの内容」セクション、H2/H3アンカー。スクロールに応じて現在のセクションをハイライト。
4. 単一のHTMLドキュメントを記述します:
   • <!doctype html> から </html> まで、すべてのCSSはインライン。
   • 3カラム用のCSS Grid、レール用のスティッキーポジショニング。
   • コードブロック: モノスペーストークン、ソフトな表面塗り、コピーボタンの視覚的要素（JS不要、視覚のみ）。
   • すべてのH2/H3にアンカーIDを付けて、目次リンクが機能するようにします。
   • nav、article、TOCに data-od-id を付けます。
5. 散文: 少なくとも350語の信頼できるドキュメントを記述します。少なくとも1つのシェルコマンド、1つのコードスニペット（5〜15行）、1つのコールアウト、1つのテーブルを含めます。
6. 自己チェック:
   • 本文テキストはDSのライン長スイートスポット（60〜75文字）で折り返されます。
   • コードはDSのモノトークンを使用し、汎用的な 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文、後には何も書きません。