docusaurus-plugins

Use when creating Docusaurus plugins (remark, rehype, theme, content, lifecycle) to extend markdown, modify HTML, or add custom functionality

$ Installer

git clone https://github.com/mcclowes/docusaurus-plugin-cookie-consent /tmp/docusaurus-plugin-cookie-consent && cp -r /tmp/docusaurus-plugin-cookie-consent/.claude/skills/docusaurus-plugins ~/.claude/skills/docusaurus-plugin-cookie-consent

// tip: Run this command in your terminal to install the skill


name: docusaurus-plugins

IMPORTANT: Keep description on ONE line for Claude Code compatibility

prettier-ignore

description: Use when creating Docusaurus plugins (remark, rehype, theme, content, lifecycle) to extend markdown, modify HTML, or add custom functionality

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:

Repository

mcclowes
mcclowes
Author
mcclowes/docusaurus-plugin-cookie-consent/.claude/skills/docusaurus-plugins
2
Stars
0
Forks
Updated3d ago
Added1w ago