umbraco-backoffice

Implement Umbraco backoffice extensions with blueprints and validation workflows.

1|Updated May 21, 2026
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-backoffice-1k-off
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-backoffice
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-backoffice
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-backoffice-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building Umbraco backoffice extensions is hard to get right because the correct combination of extension types, wiring (conditions/meta/entityType), and validation steps is easy to miss.

Core Features & Use Cases

  • Complete, working blueprints for combining backoffice extension types into usable features (e.g., Section + Menu + Dashboard + Workspace + Tree).
  • Mandatory development workflow that enforces planning, compile-time checks, automated code review, and browser validation after build.
  • Example-driven learning via included end-to-end examples (Blueprint, tree-example, notes-wiki, TimeDashboard) that demonstrate how components connect in real projects.

Quick Start

Use the umbraco-backoffice skill to plan and implement a new extension by first reading PRE-BUILD-PLANNING.md, then validating your build by running npm run build, spawning umbraco-extension-reviewer, and performing the required browser checks from POST-BUILD-VALIDATION.md.

Frequently Asked Questions about umbraco-backoffice

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Umbraco backoffice extensions with correct wiring and UI placement?

Umbraco backoffice extensions require combining specific extension types with correct conditions, meta, and entityType wiring to ensure proper UI placement. Using structured blueprints guides this combination to build reliable custom sections, menus, and workspaces.

What's the best way to create a custom section and hierarchical tree in Umbraco?

Creating a custom section and hierarchical tree in Umbraco involves combining multiple backoffice extension types into a functional feature. Example-driven blueprints like tree-example demonstrate how to correctly connect these components into a working workspace.

How do I validate Umbraco backoffice extensions after building?

Validating Umbraco extensions requires running npm run build for compile-time checks, spawning the umbraco-extension-reviewer for automated code review, and performing mandatory browser checks to confirm correct UI behavior.

Why does my Umbraco backoffice extension fail to display correctly in the tree navigation?

Umbraco tree navigation issues often stem from missing or incorrect wiring between extension types. Enforcing pre-build planning and following mandatory development workflows prevents these errors by ensuring correct conditions and entityType mappings before compilation.

Can I implement full-stack CRUD operations within an Umbraco backoffice workspace?

Full-stack CRUD operations within an Umbraco workspace are achievable when backoffice extensions are paired with controller APIs. Complete blueprints like notes-wiki demonstrate connecting workspace components to backend controllers for entity management.

Do I need a planning step before developing Umbraco backoffice extensions?

A pre-build planning step is mandatory before developing Umbraco backoffice extensions. Reading PRE-BUILD-PLANNING.md ensures correct extension type selection and wiring strategy, preventing structural errors before code compilation begins.