Skills
.Work. You
Rest

docusaurus-styling

Official

Unify Docusaurus visuals with Avalonia branding.

Design & Creative#branding#theming#styling#tailwind#docusaurus#css-variables#swizzling
AuthorAvaloniaUI
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Docusaurus pages often diverge from Avalonia branding; this Skill provides a structured approach to style Docusaurus to match the Avalonia Customer Portal theme using TailwindCSS, CSS variables, and optional component swizzling to ensure a unified brand experience.

Core Features & Use Cases

  • Theme alignment: Mirror the Customer Portal palette, typography, spacing, and shadows across the docs site.
  • Tailwind + CSS variables: Leverage Tailwind utilities and global CSS variables to implement consistent theming with minimal drift.
  • Component swizzling guidance: Provide safe strategies for swapping or wrapping Docusaurus components to reuse Customer Portal UI patterns when needed.
  • Use Case: When a docs site needs to visually align with the customer portal to present a single brand experience.

Quick Start

Configure the Docusaurus project to mirror the Customer Portal by aligning TailwindCSS, CSS variables, and, if needed, component swizzling.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: docusaurus-styling
Download link: https://github.com/AvaloniaUI/avalonia-docs/archive/main.zip#docusaurus-styling

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.