Experimental Beta: This project is an exploration of what's possible with Skills for Umbraco. It's evolving as we learn what works best.

A Claude Code plugin marketplace with 66 skills for Umbraco backoffice customization and testing.

Add the marketplace:

/plugin marketplace add umbraco/Umbraco-CMS-Backoffice-Skills

Install the plugins:

# Backoffice extension skills (58 skills)
/plugin install umbraco-cms-backoffice-skills@umbraco-backoffice-marketplace

# Testing skills (8 skills) - optional but recommended
/plugin install umbraco-cms-backoffice-testing-skills@umbraco-backoffice-marketplace

These skills are your entry points for Umbraco backoffice extension development. Start here.

Start here if you're new. Sets up everything in one command:

# Full setup with custom credentials
/umbraco-quickstart MyUmbracoSite MyExtension --email [email protected] --password Admin123456

# With default credentials ([email protected] / SecurePass1234)
/umbraco-quickstart MyUmbracoSite MyExtension

# Just instance name - will prompt for extension name
/umbraco-quickstart MyUmbracoSite

# No arguments - detects existing or prompts for names
/umbraco-quickstart

This skill will:

1. Create an Umbraco instance (if needed)
2. Create an extension
3. Register the extension with the Umbraco project
4. Warn about missing CMS/UUI source
5. Enter plan mode to help design your extension

If you prefer to set things up step by step:

Use the package-script-writer skill to create an Umbraco instance using the PSW CLI.

/package-script-writer MyProject

Thanks to Paul Seal (@prjseal) for his hard work on the PSW CLI.

Use umbraco-extension-template to create a new extension project:

/umbraco-extension-template MyFeature

Or manually:

dotnet new install Umbraco.Templates
dotnet new umbraco-extension -n MyExtension -ex
cd MyExtension/Client && npm install && npm run watch

Use umbraco-add-extension-reference to register your extension with the Umbraco project:

/umbraco-add-extension-reference MyExtension

This adds a <ProjectReference> to your Umbraco .csproj file so the extension loads.

This is the most important skill. It provides:

• Complete Extension Map - Visual diagram showing where ALL 57 extension types appear in the backoffice UI
• Working Blueprints - Copy-and-adapt examples for common patterns
• Sub-Skill Reference - Links to all other skills organised by category

Use this skill when:

• Starting a new backoffice customisation project
• Understanding how extension types connect together
• Finding the right skill for a specific UI location

Blueprints included:

/umbraco-backoffice

These skills work best when Claude has access to the Umbraco source code. This allows Claude to:

• Reference actual Umbraco implementations and patterns
• Understand types, interfaces, and base classes
• Follow existing code conventions accurately

Recommended setup:

1. Clone the repositories alongside your project:

   git clone https://github.com/umbraco/Umbraco-CMS.git
   git clone https://github.com/umbraco/Umbraco.UI.git

2. Add them as working directories in Claude Code:

   /add-dir /path/to/Umbraco-CMS/src/Umbraco.Web.UI.Client
   /add-dir /path/to/Umbraco.UI/packages/uui

This gives Claude direct access to:

• Umbraco.Web.UI.Client - Backoffice TypeScript source code
• UUI - Umbraco UI component library

Core architectural concepts used across all extensions:

UI extensions for the backoffice:

Navigation & Sections

• umbraco-sections - Top-level navigation
• umbraco-menu / umbraco-menu-items - Sidebar menus
• umbraco-header-apps - Header bar apps

Content Areas

• umbraco-dashboard - Welcome panels
• umbraco-workspace - Entity editing views
• umbraco-tree / umbraco-tree-item - Hierarchical navigation
• umbraco-collection / umbraco-collection-view / umbraco-collection-action - List/grid views

Actions

• umbraco-entity-actions - Context menu actions
• umbraco-entity-bulk-actions - Multi-select operations
• umbraco-entity-create-option-action - Create menu options
• umbraco-current-user-action - User profile actions

UI Components

• umbraco-modals - Dialogs and sidebars
• umbraco-icons - Custom icon sets
• umbraco-theme - Backoffice themes
• umbraco-ufm-component - Umbraco Flavored Markdown

Search & Preview

• umbraco-search-provider - Global search
• umbraco-search-result-item - Custom result rendering
• umbraco-preview-app-provider - Content preview apps

Advanced

• umbraco-global-context - App-wide shared state
• umbraco-kinds - Reusable manifest templates
• umbraco-dynamic-root - Content picker configuration
• umbraco-user-profile-app - User profile tabs
• umbraco-health-check - System health checks
• umbraco-package-view - Package configuration UI
• umbraco-entry-point / umbraco-bundle - Extension lifecycle

Custom data type editors:

Tiptap editor customization:

Authentication and API integration:

Complete testing pyramid for Umbraco extensions:

Testing Pyramid:

                ┌─────────────┐
                │   E2E Tests │  ← Real Umbraco, complete workflows
                └─────────────┘
          ┌─────────────────────────┐
          │   Mocked Backoffice     │  ← No backend, realistic UI
          └─────────────────────────┘
    ┌─────────────────────────────────────┐
    │           Unit Tests                │  ← Fast, isolated
    └─────────────────────────────────────┘

Critical: E2E tests must use @umbraco/playwright-testhelpers and @umbraco/json-models-builders. Never write raw Playwright tests for Umbraco.

/umbraco-testing

Complete working examples in the examples/ folder:

• Blueprint - Section + Menu + Dashboard + Workspace
• TimeDashboard - 13 extension types working together
• tree-example - Settings tree with workspace + complete testing pyramid (32 tests across unit, mocked, and E2E)
• notes-wiki - Full-stack with C# backend (27 skills)
• document-type-crud - E2E testing example with testhelpers

Invoke any skill by name:

Use the umbraco-dashboard skill to create a new dashboard

Or reference in conversation:

I need to create a custom tree in the Settings section

Claude will automatically use the relevant skills (umbraco-tree, umbraco-conditions, etc.)

Umbraco-CMS-Backoffice-Skills/
├── .claude-plugin/marketplace.json     # Marketplace manifest
├── plugins/
│   ├── umbraco-backoffice-skills/      # Plugin with 58 extension skills
│   │   ├── .claude-plugin/plugin.json
│   │   └── skills/
│   │       ├── umbraco-dashboard/SKILL.md
│   │       ├── umbraco-tree/SKILL.md
│   │       └── ... (57 skills)
│   └── umbraco-testing-skills/         # Plugin with 8 testing skills
│       ├── .claude-plugin/plugin.json
│       └── skills/
│           ├── umbraco-testing/SKILL.md
│           ├── umbraco-e2e-testing/SKILL.md
│           └── ... (8 skills + examples)
├── examples/                           # Working code examples
├── Umbraco-CMS.Skills/                 # .NET test project
└── .claude/
    ├── commands/                       # Local commands
    └── settings.local.json             # Local permissions

MIT

Built by Phil W (@hifi-phil)

Skills based on Umbraco CMS backoffice documentation.

The TimeDashboard and tree-example examples are based on work by Kevin Jump (@KevinJump):

• TimeDashboard: KevinJump/TimeDashboard
• tree-example: KevinJump/Umbraco-Tree-Example
• Blog Series: Early Adopter's Guide to Umbraco v14

These examples demonstrate sections, trees, workspaces, menus, header apps, modals, and server communication patterns for Umbraco backoffice extensions.