用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-umbraco-element命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Run tests from skill examples and generate a report (project)
Validate links and references in SKILL.md files using deterministic scripts
Umbraco backoffice extension customisation - complete working examples showing how extension types combine
正在显示 SKILL.md
基于 SOC 职业分类
| name | umbraco-umbraco-element |
| description | Implement Umbraco elements in Umbraco backoffice using official docs |
| version | 1.0.0 |
| location | managed |
| allowed-tools | Read, Write, Edit, WebFetch |
An Umbraco Element is a Web Component enhancement that simplifies integration with the Umbraco Backoffice through the UmbElementMixin. It provides methods to consume/provide contexts, observe states, handle localization, and host controllers. UmbElementMixin can be applied to any Web Component-compatible base class, while UmbLitElement is a convenience wrapper combining the mixin with Lit.
Always fetch the latest docs before implementing:
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('my-element')
export class MyElement extends UmbLitElement {
constructor() {
super();
// Access built-in features
this.consumeContext(MY_CONTEXT, (context) => {
console.log('Context consumed:', context);
});
}
render() {
return html`
<div>
<h3>${this.localize.term('myKey')}</h3>
<p>My custom element</p>
</div>
`;
}
}
export default MyElement;
import { customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
@customElement('my-element')
export class MyElement extends UmbElementMixin(HTMLElement) {
constructor() {
super();
this.consumeContext(MY_CONTEXT, (context) => {
// Use context
});
}
connectedCallback() {
this.innerHTML = `
<div>
<h3>My Element</h3>
</div>
`;
}
}
export default MyElement;
import { customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UUIButtonElement } from '@umbraco-cms/backoffice/external/uui';
@customElement('my-custom-button')
export class MyCustomButton extends UmbElementMixin(UUIButtonElement) {
constructor() {
super();
// Now has access to Umbraco contexts and controllers
}
}
export default MyCustomButton;
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
export class MyElement extends UmbLitElement {
#notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;
constructor() {
super();
this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
this.#notificationContext = context;
});
}
showNotification() {
this.#notificationContext?.peek('positive', {
data: { headline: 'Success!', message: 'Operation completed' }
});
}
}
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
export class MyElement extends UmbLitElement {
@state()
private _userName?: string;
constructor() {
super();
this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
this.observe(
context.currentUser,
(user) => {
this._userName = user?.name;
},
'_userName'
);
});
}
}
| Feature | UmbLitElement | UmbElementMixin |
|---|---|---|
| Base | Pre-configured with Lit | Apply to any base class |
| Usage | extends UmbLitElement | extends UmbElementMixin(BaseClass) |
| Best for | Lit-based components | Custom base classes or UI library components |
| Features | Same features | Same features |
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.