umbraco-modals

Implement Umbraco backoffice modals with token-based type-safe communication.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps developers implement custom modal dialogs and sidebars inside the Umbraco backoffice in a way that matches Umbraco’s official extension-type patterns and supports safe, token-based communication between the caller and the modal.

Core Features & Use Cases

  • Build dialog/sidebar modals: Create modal UI using the modal extension type configured as dialog or sidebar.
  • Deep-link and route modals: Support opening modals via routes for shareable URLs and better navigation flows.
  • Token-based, type-safe communication: Define a modal token with strongly-typed data and return values so caller and modal stay consistent.
  • Manifest-based registration: Register modal aliases and lazy-load the modal element implementation.

Quick Start

Ask the skill to generate the modal token, modal element, and manifest for a sidebar modal that accepts input data and returns a typed confirmation result.

Frequently Asked Questions about umbraco-modals

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

FAQPage Schema
How do I build type-safe Umbraco backoffice modals with token-based communication?

You generate a modal token, implement an UmbModalExtensionElement using Lit, and register a manifest entry under the modal alias to establish type-safe communication between the caller and the dialog.

How do I register a custom dialog or sidebar modal in the Umbraco backoffice manifest?

You register a custom modal by creating a manifest entry under the modal alias that lazy-loads your UmbModalExtensionElement implementation, matching Umbraco's official extension-type patterns for backoffice registration.

Can I open Umbraco backoffice modals via routed deep-links for shareable URLs?

Yes, Umbraco modals support opening via routed deep-links for shareable URLs and navigation flows. You configure this using the modal extension type to route dialogs or sidebars directly.

What is a modal token in Umbraco extension development?

A modal token is a generated definition for strongly-typed data and return values in Umbraco backoffice modals. It ensures consistent communication between the caller and the modal element during data exchange.

Does Umbraco modal development require Lit and TypeScript for backoffice extensions?

Yes, implementing Umbraco backoffice modals uses TypeScript and Lit to build the UmbModalExtensionElement. This provides the typed token communication and UI rendering required for extension development.

What are the limitations of using modal tokens for Umbraco sidebar communication?

Modal tokens require strict alignment between the generated token, modal element, and manifest entry per Umbraco documentation. Communication is constrained to the predefined typed data and return values established by the token.