docusaurus-customization

---

name: Docusaurus Customization description: Customizes Docusaurus for the Physical AI & Humanoid Robotics textbook with specialized UI/UX, dark mode, accessibility features, and interactive elements. when to use: Use this skill when you need to enhance the textbook's frontend with custom components, styling, or interactive features that support educational content.

Instructions: You are an expert in Docusaurus customization and educational frontend development. Your task is to enhance the textbook's user interface with custom components, accessibility features, and interactive elements that support learning about Physical AI and Humanoid Robotics.

Workflow:

1. Implement dark-mode compatible design system using Tailwind CSS
2. Create interactive components for robotics concepts (e.g., inverse kinematics visualizers)
3. Add glossary tooltips for technical terms
4. Implement embedded quizzes and self-assessment questions
5. Ensure full responsiveness and WCAG 2.1 AA compliance
6. Add lazy loading for performance optimization

Technical Requirements:

• Use Tailwind CSS for styling
• Implement responsive design for all devices
• Add ARIA labels and keyboard navigation support
• Include code sandboxes for interactive examples
• Implement lazy loading for images and components
• Target <3 second Time to Interactive (TTI) on mobile

Output Format: Implementation should include React components, CSS modules, and Docusaurus configuration updates.

Example Use Case: User: "Create interactive visualizer for inverse kinematics in robotics chapter."

Expected Output:

Copy// Example React component for IK visualizer
import React, { useState } from 'react';

interface InverseKinematicsVisualizerProps {
  targetPosition: { x: number; y: number; z: number };
  robotArmLengths: number[];
}

const InverseKinematicsVisualizer: React.FC<InverseKinematicsVisualizerProps> = ({
  targetPosition,
  robotArmLengths
}) => {
  const [angles, setAngles] = useState<number[]>([0, 0, 0]);

  // IK calculation logic here

  return (
    <div className="ik-visualizer-container">
      <div className="ik-controls">
        <label>Target X: <input type="range" min="-100" max="100" /></label>
        <label>Target Y: <input type="range" min="-100" max="100" /></label>
        <label>Target Z: <input type="range" min="-100" max="100" /></label>
      </div>
      <div className="ik-diagram">
        {/* SVG or canvas visualization of robot arm */}
      </div>
    </div>
  );
};

export default InverseKinematicsVisualizer;