Expert at managing Docusaurus-based documentation sites, including content creation, navigation structure, module documentation, and site configuration.
This skill enables you to expertly manage and maintain Docusaurus-based documentation sites, specifically for multi-module projects. You'll handle content creation, navigation structure, configuration, and ensure documentation consistency across all modules.
Before applying this skill, ensure:
The documentation module typically contains:
- `docs/intro.md` - Main landing page
- `docs/modules/` - Module-specific documentation subdirectories
- `docs/project/` - Project-wide documents
When working with documentation:
#### Markdown Standards
```yaml
---
id: unique-doc-id
title: Document Title
sidebar_label: Sidebar Label
slug: /custom-url-path
---
```
#### Module Documentation Structure
When documenting a module, follow this standard structure:
1. **Overview** - High-level description and purpose
2. **API Documentation** - Detailed API reference
3. **MCP Integration** - Model Context Protocol details (if applicable)
4. **Changelog** - Version history and updates
5. **Security** - Security considerations and best practices
6. **Usage Examples** - Practical code examples
7. **Detailed Docs/Tutorials** - In-depth guides
#### Links
When documenting a new module:
1. **Create module directory structure**:
```
docs/modules/new-module/
├── index.md (overview)
├── api.md
├── usage.md
├── changelog.md
└── tutorials/
└── getting-started.md
```
2. **Update `sidebars.js`**:
```javascript
{
type: 'category',
label: 'New Module',
items: [
'modules/new-module/index',
'modules/new-module/api',
'modules/new-module/usage',
'modules/new-module/tutorials/getting-started',
],
}
```
3. **Add frontmatter** to each new file with correct `id`, `title`, and `sidebar_label`
4. **Verify navigation** works correctly by testing locally
#### Modifying `docusaurus.config.js`
This file affects the entire site. Before making changes:
- `title` and `tagline` - Site branding
- `url` and `baseUrl` - Deployment URLs
- `themeConfig.navbar` - Top navigation
- `themeConfig.footer` - Footer content
- `plugins` - Additional functionality
#### Managing `sidebars.js`
```javascript
{
type: 'category',
label: 'Category Name',
items: ['doc-id-1', 'doc-id-2'],
}
```
When modifying `src/css/custom.css`:
If adding custom React components:
```mdx
import CustomComponent from '@site/src/components/CustomComponent';
<CustomComponent prop="value" />
```
**Always test before committing:**
1. **Start local development server**:
```bash
cd documentation
npm run start
# or
yarn start
```
2. **Manual testing checklist**:
- Navigate to all modified sections
- Click all new or modified links
- Check rendering of Markdown elements (tables, code blocks, lists)
- Verify images and static assets load correctly
- Test responsive design on different screen sizes
- Check navigation breadcrumbs and sidebar highlighting
3. **Build verification**:
```bash
npm run build
# or
yarn build
```
- Ensure build completes without errors or warnings
- Review any broken link warnings
- Test the built site if possible
The `documentation/docs/modules/documentation/` directory contains documentation about the documentation system itself:
Before finalizing documentation work:
```markdown
---
id: tutorial-name
title: Tutorial Title
sidebar_label: Getting Started
---
Instructions...
Code examples...
```
```markdown
---
id: api-reference
title: API Reference
---
Description of the class.
#### `methodName(param1, param2)`
**Parameters:**
**Returns:** Type - Description
**Example:**
\`\`\`javascript
const result = methodName(value1, value2);
\`\`\`
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/docusaurus-documentation-manager/raw