Skills
.Work. You
Rest

umbraco-umbraco-element

Official

Build Umbraco backoffice elements

Software Engineering#customization#web components#umbraco#lit#backoffice#element
Authorumbraco
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill simplifies the process of implementing custom Web Components within the Umbraco Backoffice by leveraging the UmbElementMixin and UmbLitElement, enabling easier integration with Umbraco's context and localization features.

Core Features & Use Cases

  • Web Component Integration: Create custom elements that seamlessly integrate with the Umbraco Backoffice.
  • Context Management: Easily consume and provide contexts using consumeContext() and provideContext().
  • State Observation: Observe and react to changes in observable state with the observe() method.
  • Localization: Utilize built-in localization for multi-language support.
  • Use Case: Develop a custom dashboard widget that displays user-specific information by consuming the UMB_CURRENT_USER_CONTEXT and displaying the user's name.

Quick Start

Generate a new Umbraco element using UmbLitElement that displays a localized term for 'myKey' and consumes the MY_CONTEXT.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: umbraco-umbraco-element
Download link: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/archive/main.zip#umbraco-umbraco-element

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.