Skill

docusaurus-plugins

Use when creating Docusaurus plugins (remark, rehype, theme, content, lifecycle) to extend markdown, modify HTML, or add custom functionality. Triggers on tasks involving custom remark/rehype plugins, content plugins, theme plugins, or Docusaurus lifecycle hooks.

npx claudepluginhub mcclowes/claude-docusaurus-skills --plugin docusaurus-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

```javascript

Supporting Assets

README.mdreferences/content-plugins.mdreferences/lifecycle-plugins.mdreferences/package-structure.mdreferences/rehype-plugins.mdreferences/remark-plugins.mdreferences/theme-plugins.md

SKILL.md

Similar Skills

angular-new-app

100.1k

Creates new Angular apps using Angular CLI with flags for routing, SSR, SCSS, prefixes, and AI config. Follows best practices for modern TypeScript/Angular development. Use when starting Angular projects.

angular-angular-1

angular-developer

100.1k

Generates Angular code and provides architectural guidance for projects, components, services, reactivity with signals, forms, dependency injection, routing, SSR, ARIA accessibility, animations, Tailwind styling, testing, and CLI tooling.

20 files

angular-angular-1

context7-cli

53.8k

Executes ctx7 CLI to fetch up-to-date library documentation, manage AI coding skills (install/search/generate/remove/suggest), and configure Context7 MCP. Useful for current API refs, skill handling, or agent setup.

3 files

upstash-context7-1

Stats

Stars0

Forks0

Last CommitMar 19, 2026

Actions

View Source View Plugin View on GitHub View README

Docusaurus Plugin Guide

Quick Start

// Remark plugin - transforms markdown AST module.exports = function remarkPlugin(options = {}) { return async function transformer(ast, vfile) { const { visit } = require('unist-util-visit'); visit(ast, 'link', (node) => { // Transform nodes node.data = node.data || {}; node.data.hProperties = { className: 'custom' }; }); return ast; }; }; // In docusaurus.config.js: // remarkPlugins: [require('./plugins/my-plugin')]

Core Principles

5 Plugin Types: Remark (markdown), Rehype (HTML), Lifecycle (routes/webpack), Theme (components), Content (custom data)

Remark: Transforms markdown before HTML conversion, use unist-util-visit for AST traversal

Rehype: Transforms HTML after compilation, processes HAST (HTML AST)

Lifecycle: Most flexible, implements hooks like loadContent(), contentLoaded(), postBuild()

Export function: Returns transformer (remark/rehype) or plugin object (lifecycle)

Reference Files

Detailed guides for each plugin type:

Docusaurus Plugin Guide

Quick Start

// Remark plugin - transforms markdown AST
module.exports = function remarkPlugin(options = {}) {
  return async function transformer(ast, vfile) {
    const { visit } = require('unist-util-visit');

    visit(ast, 'link', (node) => {
      // Transform nodes
      node.data = node.data || {};
      node.data.hProperties = { className: 'custom' };
    });

    return ast;
  };
};

// In docusaurus.config.js:
// remarkPlugins: [require('./plugins/my-plugin')]

Core Principles

5 Plugin Types: Remark (markdown), Rehype (HTML), Lifecycle (routes/webpack), Theme (components), Content (custom data)
Remark: Transforms markdown before HTML conversion, use unist-util-visit for AST traversal
Rehype: Transforms HTML after compilation, processes HAST (HTML AST)
Lifecycle: Most flexible, implements hooks like loadContent(), contentLoaded(), postBuild()
Export function: Returns transformer (remark/rehype) or plugin object (lifecycle)

Reference Files

Detailed guides for each plugin type:

references/remark-plugins.md - Markdown transformation
references/rehype-plugins.md - HTML processing
references/lifecycle-plugins.md - Routes, webpack, global data
references/theme-plugins.md - Themes and swizzling
references/content-plugins.md - Custom content types
references/package-structure.md - Publishing and config