Which Umbraco versions are supported by this skill?

This skill is designed for Umbraco 14 and later, focusing on the modern Lit-based backoffice and the Extension API.

Does this skill help with deep-linking to modals?

Yes, it provides patterns for routed modals, allowing specific modals to be opened automatically based on the browser URL.

Can I create both sidebars and centered dialogs?

Yes, the skill supports configuring the modal type as either 'sidebar' or 'dialog' within the generated modal token.

How does it handle data passing between the modal and the page?

It implements Umbraco's token-based system (UmbModalToken), allowing for type-safe input data and result values.

Does it use the official Umbraco UI library?

Yes, generated examples utilize the @umbraco-cms/backoffice packages and UUI (Umbraco UI) components for visual consistency.

Umbraco Backoffice Modals

Name: Umbraco Backoffice Modals
Author: umbraco

byumbraco

•

콘텐츠 관리

Implements type-safe modals, dialogs, and sidebars within the Umbraco CMS backoffice environment.

This skill streamlines the development of Umbraco backoffice extensions by generating all necessary boilerplate for modal interactions. It creates type-safe modal tokens, Lit-based modal elements, and registration manifests following the latest Umbraco CMS architecture. Whether you need a simple confirmation dialog or a complex routed sidebar for deep-linking, this skill ensures your implementation follows official best practices for state management and UI consistency within the Bellissima backoffice.

주요 기능

01Implements route registration for deep-linkable backoffice modals

021 GitHub stars

03Creates custom modal elements using UmbLitElement and UUI components

04Automates manifest creation for the Umbraco extension registry

05Generates type-safe UmbModalToken configurations for data and value exchange

06Supports both centered dialog and slide-out sidebar modal types

사용 사례

01Building custom property editor configuration interfaces that require popup interactions

02Implementing complex confirmation workflows with type-safe data returns

03Creating administrative sidebars for secondary content management tasks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-modals

For use in Claude.ai and ChatGPT

주요 기능

01Implements route registration for deep-linkable backoffice modals

021 GitHub stars

03Creates custom modal elements using UmbLitElement and UUI components

04Automates manifest creation for the Umbraco extension registry

05Generates type-safe UmbModalToken configurations for data and value exchange

06Supports both centered dialog and slide-out sidebar modal types

사용 사례

01Building custom property editor configuration interfaces that require popup interactions

02Implementing complex confirmation workflows with type-safe data returns

03Creating administrative sidebars for secondary content management tasks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-modals

For use in Claude.ai and ChatGPT