umbraco-umbraco-element

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

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-umbraco-element-kraftvaerk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-umbraco-element
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-umbraco-element
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-umbraco-element-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation and integration of custom Web Components within the Umbraco Backoffice, enabling developers to build richer, more interactive user interfaces.

Core Features & Use Cases

  • Web Component Integration: Easily create custom elements using LitElement or standard HTMLElements.
  • Context API: Seamlessly consume and provide Umbraco contexts for state management and data sharing.
  • Localization: Integrate built-in localization features for multi-language support.
  • Use Case: Develop a custom dashboard widget that displays real-time Umbraco content statistics, leveraging context to fetch data and localization for labels.

Quick Start

Use the umbraco-umbraco-element skill to create a new LitElement that consumes the UMB_NOTIFICATION_CONTEXT.

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?

This Skill generates Umbraco Elements using LitElement and the UmbElementMixin, enabling custom web components to seamlessly integrate into the Umbraco Backoffice with context consumption, state observation, and localization support.

What is the best way to consume Umbraco contexts in a LitElement?

The best way to consume Umbraco contexts in a LitElement is by using the provided UmbElementMixin, which facilitates seamless context consumption and state observation for data sharing within your custom backoffice components.

How do I add localization to custom Umbraco Backoffice elements?

You can add localization to custom Umbraco Backoffice elements by utilizing the built-in localization features provided through the UmbElementMixin, ensuring your web components support multi-language labels and content.

Can I use standard HTMLElements instead of LitElement to extend Umbraco?

Yes, you can extend Umbraco using standard HTMLElements, as the Skill supports creating custom elements using either LitElement or standard HTMLElements to build custom UI components for the backoffice.

Does Umbraco Backoffice customization require specific state observation techniques?

Umbraco Backoffice customization benefits from specific state observation techniques facilitated by the UmbElementMixin, allowing your custom web components to dynamically track and respond to context data changes.