// Umbraco backoffice extension customisation - complete working examples showing how extension types combine
| name | umbraco-backoffice |
| description | Umbraco backoffice extension customisation - complete working examples showing how extension types combine |
| version | 1.3.0 |
| location | managed |
| allowed-tools | Read, Write, Edit, WebFetch |
Backoffice customisations are combinations of extension types working together:
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.
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.
/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
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 |
Blueprinttree-exampleTimeDashboard for examplesnotes-wikiexamples/ folder and read the README.md for each exampleBlueprint.* to MyApp.*)entityType values to match your domainumbraco-package.jsonumbraco-add-extension-referenceDetailed 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 |
Implement UFM (Umbraco Flavored Markdown) components in Umbraco backoffice using official docs
Add a new Umbraco extension project reference to the main Umbraco instance and solution
Understand and use localization in Umbraco backoffice (foundational concept)
Implement property editor UIs in Umbraco backoffice using official docs
Quick setup for Umbraco extension development - creates instance, extension, and registers it
Review checks reference for validating Umbraco backoffice extensions