ドキュメント作成

あらゆるプロジェクトに対応した、本番環境対応ドキュメントサイトを生成します。

ワークフロー

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/                 → アプリディレクトリ(モノレポ)
├── packages/             → パッケージディレクトリ(モノレポ)
├── docs/                 → 既存ドキュメント(上書き回避)
├── README.md             → メインドキュメンテーションソース
└── src/ または lib/      → ソースコード場所

ドキュメント場所の決定

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

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

ファイル	抽出内容
README.md	プロジェクト名、説明、機能、使用例
package.json	名前、説明、依存関係、リポジトリURL
src/ または 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見出し):

## 基本認証を追加

## ルートを保護

## ログインリダイレクトを処理

## セッションをカスタマイズ