skills.rest
albanist
albanistCOMMUNITY
Explore all skills by this author →
GitHub

umbraco-umbraco-element

Create Umbraco backoffice web components using UmbElementMixin and UmbLitElement.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation of custom web components for the Umbraco backoffice, enabling seamless integration and enhanced user experiences.

Core Features & Use Cases

  • Component Creation: Generate custom elements using UmbElementMixin or UmbLitElement.
  • Context Management: Easily consume and provide contexts for state management and communication between components.
  • Localization: Integrate multi-language support directly into your components.
  • Use Case: Develop a custom dashboard widget that displays real-time user activity by consuming the UMB_CURRENT_USER_CONTEXT and displaying the user's name.

Quick Start

Use the umbraco-umbraco-element skill to create a new LitElement that displays localized terms.

Frequently Asked Questions about umbraco-umbraco-element

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

FAQPage Schema
How do I build custom web components for the Umbraco backoffice?▼

To build custom web components for the Umbraco backoffice, implement elements using UmbElementMixin or UmbLitElement to integrate with Umbraco's foundation APIs for context and controller management.

How does context management work in Umbraco Lit elements?▼

Context management in Umbraco Lit elements works by consuming and providing contexts like UMB_CURRENT_USER_CONTEXT for state management and communication between custom backoffice components.

Can I add multi-language localization to my custom Umbraco dashboard components?▼

You can add multi-language localization directly into custom Umbraco dashboard components by utilizing the foundation APIs provided through UmbElementMixin during web component development.

Do I need to know Lit to customize the Umbraco backoffice?▼

You need a solid understanding of Lit and Web Component standards to effectively customize the Umbraco backoffice and implement elements using UmbLitElement.

What is the best way to display real-time user activity in an Umbraco dashboard widget?▼

The best way to display user activity in an Umbraco dashboard widget is creating an UmbLitElement that consumes the UMB_CURRENT_USER_CONTEXT to access and render the current user's name.

Related Skills

Explore More Software Engineering Skills→
umbracoumbraco
26

umbraco-umbraco-element

Implement Umbraco backoffice Web Components using UmbElementMixin and UmbLitElement.

Official
Intermediate
kraftvaerkkraftvaerk

umbraco-umbraco-element

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

Official
Intermediate
1k-off1k-off
1

umbraco-umbraco-element

Generate TypeScript Umbraco Elements using UmbElementMixin or UmbLitElement.

Community
Intermediate
albanistrefialbanistrefi
4

umbraco-umbraco-element

Implement Umbraco Backoffice Web Components using UmbElementMixin or UmbLitElement patterns.

Community
Intermediate