Create Docs

Generate a complete, production-ready documentation site for any project.

Workflow

• Analyze - Detect package manager, monorepo structure, read context

• Initialize - Create docs directory with correct setup

• Generate - Write documentation pages using templates

• Configure - Set up AI integration (MCP, llms.txt)

• Finalize - Provide next steps with correct commands

Package Manager Reference

Detect from lock files, default to npm if none found:

Lock File PM Install Run Add

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

Use [pm] as placeholder in commands below.

Step 1: Analyze Project

Detect Project Structure

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

Determine Docs Location

Project Type Target Directory Workspace Entry

Standard project ./docs

N/A

Monorepo with apps/

./apps/docs

apps/docs

Monorepo with packages/

./docs

docs

Existing docs/ folder Ask user or ./documentation

—

Read Context Files

File Extract

README.md

Project name, description, features, usage examples

package.json

Name, description, dependencies, repository URL

src/ or lib/

Exported functions, composables for API docs

Detect i18n Requirement

Check if project needs multi-language docs:

Indicator Action

@nuxtjs/i18n in dependencies Use i18n template

locales/ or i18n/ folder exists Use i18n template

Multiple language README files Use i18n template

User explicitly mentions multiple languages Use i18n template

None of the above Use default template

Step 2: Initialize Docs

Create Directory Structure

Default template:

[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 template (if multi-language detected):

[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

Create package.json

Default:

{ "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 (add @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" } }

Create nuxt.config.ts (i18n only)

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' } })

Create .gitignore

node_modules .nuxt .output .data dist

Update Monorepo Configuration (if applicable)

pnpm Monorepo

• Add docs to workspace and configure onlyBuiltDependencies (required for better-sqlite3):

packages:

• 'apps/*'
• 'docs'

onlyBuiltDependencies:

• better-sqlite3

• Add dev script to root package.json:

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

Or with directory path:

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

npm/yarn Monorepo

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

Step 3: Generate Documentation

Use templates from references/templates.md.

CRITICAL: MDC Component Naming

All Nuxt UI components in MDC must use the u- prefix:

Correct Wrong

::u-page-hero

::page-hero

::u-page-section

::page-section

:::u-page-feature

:::page-feature

:::u-button

:::button

::::u-page-card

::::page-card

Without the u- prefix, Vue will fail to resolve the components.

Documentation Structure

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

Generate Pages

• Landing page (index.md ) - Hero + features grid

• Introduction - What & why, use cases

• Installation - Prerequisites, install commands

• Guide pages - Feature documentation with action-based H2 headings

For writing style, see references/writing-guide.md. For MDC components, see references/mdc-components.md.

Step 4: Configure AI Integration

Docus automatically includes MCP server (/mcp ) and llms.txt generation. No configuration needed.

Do NOT add AI Integration sections to the landing page. These features work automatically.

Optionally mention in the introduction page:

::note This documentation includes AI integration with MCP server and automatic llms.txt generation. ::

Optional: app.config.ts

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

Optional: Theme Customization

If the project has a design system or brand colors, customize the docs theme.

Custom CSS

Create 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); }

Extended 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' } } } })

Step 5: Finalize

Provide instructions using detected package manager.

Standard Project

Documentation created in [docs-location]

To start:

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

Available at http://localhost:3000

Monorepo

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

Features Included

• Full-text search

• Dark mode

• MCP server for AI tools (/mcp)

• LLM integration (/llms.txt)

• SEO optimized

Next Steps

• Review generated content

• Add more guides in content/2.guide/

• Customize theme in app.config.ts

• Deploy to Vercel/Netlify/Cloudflare

Suggest Follow-ups

After documentation is created, suggest enhancements:

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!

Deployment

Platform Command Output

Vercel npx vercel --prod

Auto-detected

Netlify [pm] run generate

.output/public

Cloudflare Pages [pm] run generate

.output/public

GitHub Pages [pm] run generate

.output/public

Example: auth-utils

Detected: pnpm monorepo, package in packages/

Generated structure:

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

Inside authentication.md (action-based H2 headings):

Add basic authentication

Protect your routes

Handle login redirects

Customize the session