How does this skill handle data privacy in components?

It follows the best practice of keeping state containers private and mutable while exposing public, read-only observables to consumers.

What is the primary pattern used for state in Umbraco?

Umbraco uses the Observable pattern, where states act as containers for reactive values that multiple observers can subscribe to for automatic updates.

Which specific state types does this skill support?

It supports a variety of specialized types including UmbStringState, UmbNumberState, UmbBooleanState, UmbArrayState, UmbObjectState, and UmbClassState.

Can I use this for derived data?

Yes, it includes patterns for 'Observable Parts,' which are derived observables that only trigger updates when a specific mapped value within a state changes.

Umbraco State Management

Name: Umbraco State Management
Author: umbraco

byumbraco

•

内容管理

Implements reactive state management and observable patterns within the Umbraco backoffice environment.

This skill empowers Claude to architect and implement reactive state management within the Umbraco CMS backoffice using the native Observable pattern. It facilitates the creation of private states—such as UmbStringState, UmbNumberState, or UmbArrayState—and exposes them as public read-only observables to enable decoupled communication between context providers and Lit-based UI components. Ideal for developers building complex Umbraco extensions, it ensures that data synchronization and UI updates remain consistent and performant according to modern Umbraco foundation principles.

主要功能

011 GitHub stars

02Implementation of reactive UmbState containers for strings, numbers, arrays, and objects

03Creation of derived states using asObservablePart for optimized data tracking

04Subscription management for UmbLitElement components to react to state changes

05Standardized patterns for decoupled cross-component communication in the backoffice

06Architecting state-aware contexts using the UmbContextBase class

使用场景

01Developing custom backoffice dashboards with real-time reactive data updates

02Building complex property editors that require data synchronization across multiple UI elements

03Creating shared services using the Umbraco Context API to manage global extension state

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-state-management

For use in Claude.ai and ChatGPT

Download Skill