create-docs

ドキュメントの作成

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

ワークフロー

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：プロジェクトの分析

プロジェクト構成の検出

Check for:
├── pnpm-workspace.yaml   → pnpm monorepo
├── turbo.json            → Turborepo monorepo
├── lerna.json            → Lerna monorepo
├── nx.json               → Nx monorepo
├── apps/                 → Apps directory (monorepo)
├── packages/             → Packages directory (monorepo)
├── docs/                 → Existing docs (avoid overwriting)
├── README.md             → Main documentation source
└── src/ or lib/          → Source code location

ドキュメントの配置場所を決定

プロジェクトの種類	対象ディレクトリ	ワークスペースのエントリー
標準プロジェクト	./docs	N/A
apps/ があるモノレポ	./apps/docs	apps/docs
packages/ があるモノレポ	./docs	docs
既存の docs/ フォルダー	ユーザーに確認するか ./documentation	—

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

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

i18n 要件の検出

プロジェクトで多言語ドキュメントが必要かどうかを確認します。

指標	対応
依存関係に @nuxtjs/i18n がある	i18n テンプレートを使用
locales/ または i18n/ フォルダーがある	i18n テンプレートを使用
複数言語の README ファイルがある	i18n テンプレートを使用
ユーザーが複数言語を明示的に指定している	i18n テンプレートを使用
上記に該当しない	デフォルトテンプレートを使用

---

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

ディレクトリ構成の作成

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

[docs-location]/
├── app/                            # Optional: for customization
│   ├── 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/                         # Or other detected languages
│       ├── index.md
│       └── 1.getting-started/
│           ├── .navigation.yml
│           └── 1.introduction.md
├── nuxt.config.ts                  # Required for i18n config
├── 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. docs をワークスペースに追加し、onlyBuiltDependencies を設定します（better-sqlite3 に必要です）。

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

onlyBuiltDependencies:
  - better-sqlite3

2. ルートの package.json に開発用スクリプトを追加します。

{
  "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                        # Landing page
├── 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/                          # If applicable
    ├── .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
This documentation includes AI integration with MCP server and automatic `llms.txt` generation.
::

任意：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 {
  /* Custom font */
  --font-sans: 'Inter', sans-serif;

  /* Custom container width */
  --ui-container: 90rem;

  /* Custom primary color (use project brand color) */
  --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]'
    }
  },
  // Customize UI components
  ui: {
    colors: {
      primary: 'emerald',
      neutral: 'zinc',
    },
    pageHero: {
      slots: {
        title: 'font-semibold sm:text-6xl'
      }
    }
  }
})

---

ステップ 5：仕上げ

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

標準プロジェクト

Documentation created in [docs-location]

To start:

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

Available at http://localhost:3000

モノレポ

Documentation created in [docs-location]

To start from root:

  [pm] install
  [pm] run docs:dev

Or from docs directory:

  cd [docs-location]
  [pm] run dev

Available at http://localhost:3000

含まれる機能

• 全文検索
• ダークモード
• AI ツール向け MCP サーバー（/mcp）
• LLM 連携（/llms.txt）
• SEO 最適化

次のステップ

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

フォローアップの提案

ドキュメントの作成後、改善案を提案します：

Your documentation is ready!

Would you like me to:
- **Customize the UI** - Match your brand colors and style
- **Enhance the landing page** - Add feature cards, code previews, visuals
- **Add i18n support** - Multi-language documentation
- **Set up deployment** - Deploy to Vercel, Netlify, or Cloudflare

Let me know what you'd like to improve!

---

デプロイ

プラットフォーム	コマンド	出力
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 見出し）：

## Add basic authentication
## Protect your routes
## Handle login redirects
## Customize the session