Umbraco State Management

This handles Umbraco's Observable pattern for reactive state management in backoffice customization. You get typed state containers (UmbStringState, UmbArrayState, etc.) that expose observables for components to subscribe to, keeping your UI in sync without tight coupling. The skill fetches current docs from Umbraco's foundation documentation before generating code, which matters since this is framework-specific stuff that changes. Most useful when you're building custom contexts that need to share data across multiple elements or creating derived state with asObservablePart. The examples cover the basic state-to-observable-to-observer flow and show the private state, public observable pattern that Umbraco expects.

skills.sh installs: 384
GitHub stars: 27
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-state-management --agent claude-code

Installs into .claude/skills of the current project.

Files

Umbraco State Management

What is it?

States in Umbraco are containers for reactive values that enable communication across component instances using the Observable pattern. An Umbraco State is a container for a value that you can create Observables from, which allows multiple observers to subscribe and automatically receive updates when the state changes. This pattern is particularly useful for sharing data between contexts and elements without tight coupling.

Documentation

Always fetch the latest docs before implementing:

Main docs: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/states
Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
Context API: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/context-api

Workflow

Fetch docs - Use WebFetch on the URLs above
Ask questions - What type of state? Who observes? Where to provide observable?
Generate code - Implement state with observables based on latest docs
Explain - Show what was created and how observation works

SKILL.md on GitHub