← 一覧へ
✍️ 文章・資料を書くClaude Code難易度: 中級
ドキュメントページ作成 docs-page
ドキュメント作りが楽になる魔法のページ
これは何?
これはドキュメントページを簡単に作れるスキルです。ナビゲーション、本文、目次がきれいに配置された3カラムのHTMLページを自動生成します。APIリファレンスやチュートリアル作成にぴったりで、RTL(右から左)レイアウトにも対応しています。

これでできること
- APIドキュメントやガイドページを簡単に作成できる
- ナビゲーション、本文、目次が整ったレイアウトを自動生成できる
- コードスニペットや注意書きボックスを簡単に挿入できる
- レスポンシブデザインに対応したページを作成できる
こんな時に便利
新たなAPIのドキュメントを作成したい時
開発者向けのガイドページを作りたい時
プロジェクトのメンバーに説明資料を提供したい時
既存のドキュメントを整えて見やすくしたい時
使い方
ドキュメントのテーマを決めてスキルを実行するだけです。ナビゲーションや目次が自動的に作成され、見やすい3カラムレイアウトのHTMLファイルが生成されます。必要に応じて内容を調整できます。
使用例(こう頼んでみよう)
JavaScript APIリファレンスのドキュメントページを作成してくださいCSS Gridの使い方ガイドページを作成してくださいPythonライブラリのチュートリアルページを作成してください必要なもの
- 特になし
導入方法
いちばん簡単(AIに頼む)
次のスキルを入れて: https://github.com/nexu-io/open-design/tree/main/design-templates/docs-page手動で置く
Claude Code →
~/.claude/skills/docs-page/Codex →
~/.agents/skills/docs-page/使いこなしのコツ
- 具体的なAPI名や使用例を入れるとより実用的なドキュメントになります
- コードスニペットや注意点を追加するとわかりやすさがアップします
- 生成されたHTMLをブラウザで確認しながら微調整しましょう