skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-umbraco-element

Implement Umbraco Backoffice Web Components using UmbElementMixin or UmbLitElement patterns.

4|Updated Mar 6, 2026
Search Tags:#localization#web components#controllers#umbraco#lit#context api
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-umbraco-element-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-umbraco-element
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/foundation/umbraco-umbraco-element
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-umbraco-element-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of building Umbraco Backoffice Web Components correctly by grounding implementation in the official UmbElementMixin/UmbLitElement element patterns, including context consumption, state observation, controllers, and localization.

Core Features & Use Cases

  • Guided documentation-first workflow: fetches the latest Umbraco element, context API, controller, localization, and foundation docs before implementation to prevent version drift.
  • Element architecture support: implements elements using UmbElementMixin or UmbLitElement, including how to choose the base class for Lit and non-Lit component foundations.
  • Context, state, and controllers: adds patterns for consumeContext/provideContext, observe observable state updates, and hostController usage for element-embedded behavior.
  • Localization-ready components: enables using the built-in localize controller so UI strings come from Umbraco localization terms.

Quick Start

Fetch the latest Umbraco docs from the skill’s listed URLs, then implement your Web Component by extending UmbLitElement (for Lit) or UmbElementMixin(Base) (for custom bases), wiring up consumeContext, observe, and localization as needed.

Frequently Asked Questions about umbraco-umbraco-element

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

FAQPage Schema
How do I implement custom Umbraco backoffice web components with the Context API?▼

To implement Umbraco backoffice web components, extend UmbLitElement for Lit-based UI or apply UmbElementMixin to custom bases, then wire up consumeContext, observe state, and attach host controllers for production-ready integration.

What's the difference between using UmbElementMixin and UmbLitElement for Lit components?▼

UmbLitElement is the base class for standard Lit-based Umbraco web components, while UmbElementMixin is applied to custom non-Lit base classes to provide the same context, state, and localization capabilities.

How do I add localization to an Umbraco web component?▼

Umbraco web components handle localization by using the built-in localize controller provided by the UmbElementMixin or UmbLitElement patterns, ensuring UI strings resolve from Umbraco localization terms.

Can I use Umbraco foundation controllers and observable state outside of Lit elements?▼

Yes, you can use foundation controllers and observable state outside of Lit by applying the UmbElementMixin to your custom base class, enabling context consumption and state observation without requiring Lit.

How do I prevent API version drift when developing Umbraco backoffice elements?▼

Prevent API version drift by using a documentation-first approach that fetches the latest Umbraco element, context API, controller, and localization docs before generating aligned TypeScript examples.

Why are my Umbraco element context consumers not receiving observable state updates?▼

Observable state updates require correctly wiring consumeContext with the observe pattern inside your UmbLitElement or UmbElementMixin foundation, ensuring the host controller actively tracks context changes.

Related Skills

Explore More Software Engineering Skills→
1k-off1k-off
1

umbraco-umbraco-element

Generate TypeScript Umbraco Elements using UmbElementMixin or UmbLitElement.

Community
Intermediate
umbracoumbraco
26

umbraco-umbraco-element

Implement Umbraco backoffice Web Components using UmbElementMixin and UmbLitElement.

Official
Intermediate
albanistalbanist
4

umbraco-extension-template

Scaffold new Umbraco backoffice extensions using the official .NET template.

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-umbraco-element

Generate Umbraco Elements with UmbElementMixin and UmbLitElement for the Umbraco Backoffice.

Official
Intermediate