SKILL.md

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

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 &#x26;&#x26; 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

create-docs

SKILL.md

Create Docs

Workflow

Package Manager Reference

Step 1: Analyze Project

Detect Project Structure

Determine Docs Location

Read Context Files

Detect i18n Requirement

Step 2: Initialize Docs

Create Directory Structure

Create package.json

Create nuxt.config.ts (i18n only)

Create .gitignore

Update Monorepo Configuration (if applicable)

Step 3: Generate Documentation

Documentation Structure

Generate Pages

Step 4: Configure AI Integration

Optional: app.config.ts

Optional: Theme Customization

Step 5: Finalize

Standard Project

Monorepo

Features Included

Next Steps

Suggest Follow-ups

Deployment

Example: auth-utils

Stop writing automation&scrapers

create-docs

SKILL.md

Create Docs

Workflow

Package Manager Reference

Step 1: Analyze Project

Detect Project Structure

Determine Docs Location

Read Context Files

Detect i18n Requirement

Step 2: Initialize Docs

Create Directory Structure

Create package.json

Create nuxt.config.ts (i18n only)

Create .gitignore

Update Monorepo Configuration (if applicable)

Step 3: Generate Documentation

Documentation Structure

Generate Pages

Step 4: Configure AI Integration

Optional: app.config.ts

Optional: Theme Customization

Step 5: Finalize

Standard Project

Monorepo

Features Included

Next Steps

Suggest Follow-ups

Deployment

Example: auth-utils

Let your agent run on any real-world website

Related skills

Stop writing automation&scrapers