Umbraco Backoffice Extensions Overview

What This Skill Does

Backoffice customisations are combinations of extension types working together:

• A "custom admin area" = Section + Menu + Dashboard

• A "data management tool" = Section + Menu + Workspace

• A "hierarchical browser" = Section + Menu + Tree + Workspace

This skill provides complete working blueprints. The source code is in ./examples/

• copy and adapt for your needs.

For details on individual extension types, invoke the referenced sub-skills.

TIP: If the Umbraco CMS source code is available in your workspace, use it as a reference and for inspiration. The backoffice client code in src/Umbraco.Web.UI.Client/src/packages/ shows production implementations of all extension types - study how the core team structures sections, workspaces, trees, and other patterns.

Required Workflow

CRITICAL: This workflow is MANDATORY for ALL extension development.

1. PLAN ──► Read PRE-BUILD-PLANNING.md FIRST │ Draw wireframe, label extension types, identify UUI components │ ⚠️ DO NOT write code until wireframe is approved ↓
2. BUILD ──► Use examples and sub-skills to create extension │ │ ⛔ STOP - Do not skip validation ↓
3. VALIDATE ──► MANDATORY post-build steps: • npm run build (must pass) • Spawn umbraco-extension-reviewer agent • Fix High/Medium issues without asking • Browser test per POST-BUILD-VALIDATION.md

If you skip planning: You WILL build the wrong extension type. If you skip validation: Bugs WILL reach the user.

This workflow applies whether invoked via /umbraco-quickstart or directly.

CRITICAL: Follow this workflow for ALL extension development:

1. PLAN ──► Read PRE-BUILD-PLANNING.md, draw wireframes, identify extension types ↓
2. BUILD ──► Use examples and sub-skills to create extension ↓
3. VALIDATE ──► Read POST-BUILD-VALIDATION.md, run umbraco-extension-reviewer

• Never skip planning - Wireframes prevent building the wrong extension type

• Never skip validation - The reviewer catches issues before they reach users

Available Examples

Each example has a detailed README.md with full documentation. See the examples/ folder.

Example Complexity What It Shows

Blueprint Starter Section + Menu + Dashboard + Workspace - the fundamental pattern

tree-example Intermediate Tree navigation in Settings section with Workspace

TimeDashboard Advanced 13+ extension types including Header Apps, Modals, Property Editors

notes-wiki Full-stack Complete C# backend with CRUD, hierarchical tree, multiple workspaces

Quick Reference

• Need a new section? Start with Blueprint

• Need tree navigation? See tree-example

• Need specific extension type? Check TimeDashboard for examples

• Need full-stack with API? Study notes-wiki

Using the Examples

• Browse the examples/ folder and read the README.md for each example

• Copy the example closest to your needs into your project

• Rename aliases from the example namespace to your own (e.g., Blueprint.* to MyApp.* )

• Update the entityType values to match your domain

• Customise the UI components for your use case

• Register with Umbraco via umbraco-package.json

• Add project reference to the main Umbraco instance - use skill umbraco-add-extension-reference

Reference Documentation

Detailed reference material is available in separate files for on-demand loading:

Reference When to Read

PRE-BUILD-PLANNING.md Before building any extension - visual planning, wireframes, UUI components

EXTENSION-MAP.md "Where does extension type X appear in the UI?" - ASCII diagram showing all extension locations

SUB-SKILLS-REFERENCE.md "What skill do I need for X?" - Complete index of all sub-skills by category

POST-BUILD-VALIDATION.md After building - complete validation workflow, browser testing, debugging