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 static { / 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):