Umbraco Backoffice Extensions Overview

What This Skill Does

• A "custom admin area" = Section + Menu + Dashboard
• A "data management tool" = Section + Menu + Workspace
• A "hierarchical browser" = Section + Menu + Tree + Workspace

./examples/

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

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

This workflow applies whether invoked via

/umbraco-quickstart

or directly.

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

examples/

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

1. Browse the

   examples/

   folder and read the README.md for each example
2. Copy the example closest to your needs into your project
3. Rename aliases from the example namespace to your own (e.g.,

   Blueprint.*

   to

   MyApp.*

   )
4. Update the

   entityType

   values to match your domain
5. Customise the UI components for your use case
6. Register with Umbraco via

   umbraco-package.json

7. Add project reference to the main Umbraco instance - use skill

   umbraco-add-extension-reference

Reference Documentation