ドキュメント作成

任意のプロジェクト向けの完全でプロダクションレディなドキュメンテーションサイトを生成します。

ワークフロー

1. 分析 - パッケージマネージャー、モノレポ構造を検出、コンテキストを読み込み
2. 初期化 - 正しいセットアップでドキュメントディレクトリを作成
3. 生成 - テンプレートを使用してドキュメントページを作成
4. 設定 - AI 統合 (MCP、llms.txt) を設定
5. 完了 - 正しいコマンドで次のステップを提供

---

パッケージマネージャーリファレンス

ロックファイルから検出、見つからない場合は npm をデフォルトに:

ロックファイル	PM	インストール	実行	追加
pnpm-lock.yaml	pnpm	pnpm install	pnpm run	pnpm add
package-lock.json	npm	npm install	npm run	npm install
yarn.lock	yarn	yarn install	yarn	yarn add
bun.lockb	bun	bun install	bun run	bun add

以下のコマンドでプレースホルダーとして [pm] を使用します。

---

ステップ 1: プロジェクト分析

プロジェクト構造の検出

以下をチェック:
├── pnpm-workspace.yaml   → pnpm モノレポ
├── turbo.json            → Turborepo モノレポ
├── lerna.json            → Lerna モノレポ
├── nx.json               → Nx モノレポ
├── apps/                 → Apps ディレクトリ (モノレポ)
├── packages/             → Packages ディレクトリ (モノレポ)
├── docs/                 → 既存ドキュメント (上書き回避)
├── README.md             → メインドキュメントソース
└── src/ or lib/          → ソースコード位置

ドキュメント位置を決定

プロジェクトタイプ	対象ディレクトリ	ワークスペースエントリ
標準プロジェクト	./docs	N/A
apps/ 付きモノレポ	./apps/docs	apps/docs
packages/ 付きモノレポ	./docs	docs
既存 docs/ フォルダ	ユーザーに確認、または ./documentation	—

コンテキストファイルを読み込み

ファイル	抽出内容
README.md	プロジェクト名、説明、機能、使用例
package.json	名前、説明、依存関係、リポジトリURL
src/ or lib/	エクスポートされた関数、API ドキュメント用コンポーザブル

多言語対応要件を検出

プロジェクトが多言語ドキュメントを必要とするかチェック:

インジケータ	アクション
依存関係に @nuxtjs/i18n が含まれる	i18n テンプレートを使用
locales/ または i18n/ フォルダが存在	i18n テンプレートを使用
複数言語の README ファイルが存在	i18n テンプレートを使用
ユーザーが明示的に複数言語を言及	i18n テンプレートを使用
上記なし	デフォルトテンプレートを使用

---

ステップ 2: ドキュメント初期化

ディレクトリ構造を作成

デフォルトテンプレート:

[docs-location]/
├── app/                            # オプション: カスタマイズ用
│   ├── app.config.ts
│   ├── components/
│   ├── layouts/
│   └── pages/
├── content/
│   ├── index.md
│   └── 1.getting-started/
│       ├── .navigation.yml
│       └── 1.introduction.md
├── public/
│   └── favicon.ico
├── package.json
└── .gitignore

i18n テンプレート (多言語検出時):

[docs-location]/
├── app/
│   └── app.config.ts
├── content/
│   ├── en/
│   │   ├── index.md
│   │   └── 1.getting-started/
│   │       ├── .navigation.yml
│   │       └── 1.introduction.md
│   └── fr/                         # または他の検出言語
│       ├── index.md
│       └── 1.getting-started/
│           ├── .navigation.yml
│           └── 1.introduction.md
├── nuxt.config.ts                  # i18n 設定に必須
├── public/
│   └── favicon.ico
├── package.json
└── .gitignore

package.json を作成

デフォルト:

{
  "name": "[project-name]-docs",
  "private": true,
  "scripts": {
    "dev": "nuxt dev --extends docus",
    "build": "nuxt build --extends docus",
    "generate": "nuxt generate --extends docus",
    "preview": "nuxt preview --extends docus"
  },
  "dependencies": {
    "docus": "latest",
    "better-sqlite3": "^12.5.0",
    "nuxt": "^4.2.2"
  }
}

i18n (@nuxtjs/i18n を追加):

{
  "name": "[project-name]-docs",
  "private": true,
  "scripts": {
    "dev": "nuxt dev --extends docus",
    "build": "nuxt build --extends docus",
    "generate": "nuxt generate --extends docus",
    "preview": "nuxt preview --extends docus"
  },
  "dependencies": {
    "@nuxtjs/i18n": "^10.2.1",
    "docus": "latest",
    "better-sqlite3": "^12.5.0",
    "nuxt": "^4.2.2"
  }
}

nuxt.config.ts を作成 (i18n のみ)

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', language: 'en-US', name: 'English' },
      { code: 'fr', language: 'fr-FR', name: 'Français' }
    ],
    defaultLocale: 'en'
  }
})

.gitignore を作成

node_modules
.nuxt
.output
.data
dist

モノレポ設定を更新 (該当する場合)

pnpm モノレポ

1. ワークスペースにドキュメントを追加し、onlyBuiltDependencies を設定 (better-sqlite3 に必須):

packages:
  - 'apps/*'
  - 'docs'

onlyBuiltDependencies:
  - better-sqlite3

2. ルート package.json に dev スクリプトを追加:

{
  "scripts": {
    "docs:dev": "pnpm run --filter [docs-package-name] dev"
  }
}

またはディレクトリパスで:

{
  "scripts": {
    "docs:dev": "cd docs && pnpm dev"
  }
}

npm/yarn モノレポ

{
  "workspaces": ["apps/*", "docs"],
  "scripts": {
    "docs:dev": "npm run dev --workspace=docs"
  }
}

---

ステップ 3: ドキュメント生成

references/templates.md のテンプレートを使用します。

重要: MDC コンポーネント命名規則

MDC の全 Nuxt UI コンポーネントは u- プレフィックスを使用する必要があります:

正	誤
::u-page-hero	::page-hero
::u-page-section	::page-section
:::u-page-feature	:::page-feature
:::u-button	:::button
::::u-page-card	::::page-card

u- プレフィックスなしでは、Vue はコンポーネントを解決できません。

ドキュメント構造

content/
├── index.md                        # ランディングページ
├── 1.getting-started/
│   ├── .navigation.yml
│   ├── 1.introduction.md
│   └── 2.installation.md
├── 2.guide/
│   ├── .navigation.yml
│   ├── 1.configuration.md
│   ├── 2.authentication.md
│   └── 3.deployment.md
└── 3.api/                          # 該当する場合
    ├── .navigation.yml
    └── 1.reference.md

ページを生成

1. ランディングページ (index.md) - ヒーロー + 機能グリッド
2. イントロダクション - 何か、なぜか、ユースケース
3. インストール - 前提条件、インストールコマンド
4. ガイドページ - アクションベース H2 見出しを含む機能ドキュメント

執筆スタイルについては references/writing-guide.md を参照。 MDC コンポーネントについては references/mdc-components.md を参照。

---

ステップ 4: AI 統合設定

Docus は自動的に MCP サーバー (/mcp) と llms.txt 生成を含みます。設定不要です。

ランディングページに AI 統合セクションを追加しないでください。 これらの機能は自動的に動作します。

オプションでイントロダクションページで言及:

::note
このドキュメントは MCP サーバーとの AI 統合、および自動 `llms.txt` 生成を含みます。
::

オプション: app.config.ts

export default defineAppConfig({
  docus: {
    name: '[Project Name]',
    description: '[Project description]',
    url: 'https://[docs-url]',
    socials: {
      github: '[org]/[repo]'
    }
  }
})

オプション: テーマカスタマイズ

プロジェクトがデザインシステムやブランドカラーを持つ場合、ドキュメントテーマをカスタマイズします。

カスタム CSS

app/assets/css/main.css を作成:

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  /* カスタムフォント */
  --font-sans: 'Inter', sans-serif;

  /* カスタムコンテナ幅 */
  --ui-container: 90rem;

  /* カスタムプライマリカラー (プロジェクトブランドカラーを使用) */
  --color-primary-50: oklch(0.97 0.02 250);
  --color-primary-500: oklch(0.55 0.2 250);
  --color-primary-900: oklch(0.25 0.1 250);
}

拡張 app.config.ts

export default defineAppConfig({
  docus: {
    name: '[Project Name]',
    description: '[Project description]',
    url: 'https://[docs-url]',
    socials: {
      github: '[org]/[repo]',
      x: '@[handle]'
    }
  },
  // UI コンポーネントをカスタマイズ
  ui: {
    colors: {
      primary: 'emerald',
      neutral: 'zinc',
    },
    pageHero: {
      slots: {
        title: 'font-semibold sm:text-6xl'
      }
    }
  }
})

---

ステップ 5: 完了

検出されたパッケージマネージャーを使用して指示を提供します。

標準プロジェクト

ドキュメントが [docs-location] に作成されました

開始するには:

  cd [docs-location]
  [pm] install
  [pm] run dev

http://localhost:3000 で利用可能

モノレポ

ドキュメントが [docs-location] に作成されました

ルートから開始するには:

  [pm] install
  [pm] run docs:dev

またはドキュメントディレクトリから:

  cd [docs-location]
  [pm] run dev

http://localhost:3000 で利用可能

含まれる機能

• フルテキスト検索
• ダークモード
• AI ツール用 MCP サーバー (/mcp)
• LLM 統合 (/llms.txt)
• SEO 最適化

次のステップ

1. 生成されたコンテンツをレビュー
2. content/2.guide/ に詳細ガイドを追加
3. app.config.ts でテーマをカスタマイズ
4. Vercel/Netlify/Cloudflare にデプロイ

フォローアップを提案

ドキュメント作成後、拡張を提案:

ドキュメントの準備ができました!

以下を手伝いましょうか:
- **UI をカスタマイズ** - ブランドカラーとスタイルを合わせる
- **ランディングページを拡張** - フィーチャーカード、コードプレビュー、ビジュアルを追加
- **i18n サポートを追加** - 多言語ドキュメント
- **デプロイメント設定** - Vercel、Netlify、または Cloudflare にデプロイ

何を改善したいか教えてください!

---

デプロイメント

プラットフォーム	コマンド	出力
Vercel	npx vercel --prod	自動検出
Netlify	[pm] run generate	.output/public
Cloudflare Pages	[pm] run generate	.output/public
GitHub Pages	[pm] run generate	.output/public

---

例: auth-utils

検出: pnpm モノレポ、packages/ 内のパッケージ

生成された構造:

docs/
├── content/
│   ├── index.md
│   ├── 1.getting-started/
│   │   ├── .navigation.yml
│   │   ├── 1.introduction.md
│   │   └── 2.installation.md
│   ├── 2.guide/
│   │   ├── .navigation.yml
│   │   ├── 1.authentication.md
│   │   ├── 2.oauth-providers.md
│   │   └── 3.sessions.md
│   └── 3.api/
│       ├── .navigation.yml
│       └── 1.composables.md
├── public/
│   └── favicon.ico
├── package.json
└── .gitignore

authentication.md 内 (アクションベース H2 見出し):

## 基本認証を追加
## ルートを保護
## ログインリダイレクトを処理
## セッションをカスタマイズ