Agent skill

docusaurus-themes

Use when swizzling Docusaurus theme components and editing theme elements

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/docusaurus-themes

SKILL.md

Docusaurus Swizzle

Quick Start

Swizzle components to customize Docusaurus theme behavior:

bash
npm run swizzle @docusaurus/theme-classic ComponentName -- --wrap

Core Principles

  • Wrap (safe): Extends original component, easier to upgrade
  • Eject (unsafe): Full copy for maximum control, harder to maintain
  • Interactive mode: Use npm run swizzle to browse available components
  • Swizzled components go in src/theme/ComponentName/

Common Patterns

List available components:

bash
npm run swizzle @docusaurus/theme-classic -- --list

Commonly swizzled: Footer, Navbar, DocItem, DocSidebar, TOC

Reference Files

For detailed documentation, see:

Notes

  • Prefer --wrap for minor changes to maintain upgrade compatibility
  • Test thoroughly after swizzling components
  • Check official docs for component-specific swizzle safety ratings

Didn't find tool you were looking for?

Be as detailed as possible for better results