How does this skill ensure code accuracy?

The skill is configured to use WebFetch to retrieve the latest official Umbraco documentation before generating code, ensuring compliance with the most recent CMS updates.

What is an Umbraco Element?

An Umbraco Element is a Web Component enhanced with the UmbElementMixin, designed to integrate seamlessly with the Umbraco Backoffice framework for features like context sharing and localization.

Should I use UmbLitElement or UmbElementMixin?

Use UmbLitElement for components based on the Lit library. Use UmbElementMixin when you need to apply Umbraco features to a different base class or an existing UI library component.

Does this skill support state management?

Yes, it provides implementation patterns for the Umbraco observe method, allowing your components to reactively update when state changes occur in consumed contexts.

Umbraco Backoffice Element Creator

Name: Umbraco Backoffice Element Creator
Author: umbraco

byumbraco

•

内容管理

Streamlines the development of custom Umbraco Backoffice UI components using Web Components and the Umbraco Element API.

This skill assists developers in creating specialized components for the Umbraco CMS Backoffice. It simplifies the implementation of the UmbElementMixin and UmbLitElement, allowing for seamless integration with Umbraco's Context API, localization features, and controller lifecycle. By automatically fetching the most recent documentation, the skill ensures that all generated elements follow official best practices for state management and UI consistency within the Umbraco ecosystem, making it ideal for building custom dashboards, property editors, and management tools.

主要功能

01Seamless Context API integration for consuming and providing data

02Integrated localization support for multi-language backoffice tools

03Automated UmbElementMixin and UmbLitElement implementation

04Real-time documentation fetching to ensure modern API compliance

051 GitHub stars

06Reactive state observation using the built-in observe method

使用场景

01Extending third-party UI libraries with Umbraco-specific capabilities and controllers

02Creating UI components that interact with Umbraco global notification contexts

03Developing custom dashboards or property editors for Umbraco CMS

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-umbraco-element

For use in Claude.ai and ChatGPT

Download Skill