skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-dashboard

Implement Umbraco backoffice dashboards with manifest and Lit-based elements.

1|Updated May 21, 2026
Search Tags:#dashboard#extension-types#conditional rendering#umbraco#lit#backoffice#front-end integration
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-dashboard-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-dashboard
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-dashboard
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-dashboard-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you implement and register a custom Umbraco backoffice dashboard so editors see the right UI and functionality in the correct backoffice context.

Core Features & Use Cases

  • Dashboards with conditions: Controls which section/tree context the dashboard appears in, so the UI is relevant instead of cluttering every user view.
  • Backoffice integration via official extension types: Implements the dashboard manifest and the dashboard element following Umbraco’s documented extension patterns.
  • Testable, minimal working implementation: Produces a straightforward manifest + front-end element implementation you can validate quickly in the backoffice.

Use case example: Add a dashboard to the Content section that shows an editor-focused summary panel for a selected item, while using conditions to ensure it does not appear elsewhere.

Quick Start

Fetch the latest Umbraco dashboard extension documentation, decide the target backoffice section and permissions, then implement the dashboard manifest and element code and verify it renders in the correct tree context.

Frequently Asked Questions about umbraco-dashboard

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

FAQPage Schema
How do I create a custom Umbraco backoffice dashboard?▼

To create a custom Umbraco backoffice dashboard, you define a dashboard extension manifest in an umbraco-package.json file and implement a Lit-based dashboard element class that renders the UI.

How do I restrict dashboard visibility to specific Umbraco backoffice sections?▼

You restrict dashboard visibility to specific Umbraco sections by applying conditional rendering rules within the dashboard extension manifest, ensuring the UI only appears in the correct tree context.

Does Umbraco use Lit for backoffice dashboard extensions?▼

Yes, Umbraco uses Lit for backoffice dashboard extensions, requiring you to wire a Lit-based front-end element class to the dashboard manifest so it renders reliably in the backoffice.

What is the umbraco-package.json manifest used for in dashboard extensions?▼

The umbraco-package.json manifest is used to register a custom dashboard extension, defining its configuration, target backoffice section, and linking the front-end element for Umbraco backoffice integration.

Can I add an editor-facing summary panel to the Umbraco Content section?▼

Yes, you can add an editor-facing summary panel to the Umbraco Content section by implementing a custom dashboard with conditions that ensure it only appears for the selected item's tree context.

Why is my custom Umbraco dashboard not rendering in the backoffice?▼

Your custom Umbraco dashboard may not render if the dashboard extension manifest is invalid or the Lit-based front-end element class is not correctly wired to the umbraco-package.json configuration.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-entry-point

Implement Umbraco backoffice entry points with initialization and cleanup routines.

Official
Intermediate
albanistrefialbanistrefi
4

umbraco-dashboard

Create Umbraco backoffice dashboards with Lit elements and manifest registration.

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-property-editor-schema

Implement Umbraco property editor schemas with C# and manifest configurations.

Official
Intermediate
kraftvaerkkraftvaerk

umbraco-property-action

Generate TypeScript code and manifest files for Umbraco property editor actions.

Official
Intermediate