用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-notifications命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 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
基于 SOC 职业分类
正在显示 SKILL.md
| name | umbraco-notifications |
| description | Understand and use notifications in Umbraco backoffice (foundational concept) |
| version | 1.0.0 |
| location | managed |
| allowed-tools | Read, Write, Edit, WebFetch |
Notifications provide user feedback in the Umbraco backoffice through the UMB_NOTIFICATION_CONTEXT, which is consumed via the Context API. The peek() method displays temporary toast-style notifications with different types (positive, negative, warning). Notifications appear in the UI temporarily and automatically dismiss, making them ideal for action confirmations and error messages.
Always fetch the latest docs before implementing:
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;
});
}
showSuccess() {
this.#notificationContext?.peek('positive', {
data: { message: 'Operation completed successfully!' }
});
}
}
// Success notification
this.#notificationContext?.peek('positive', {
data: { message: 'Saved successfully!' }
});
// Error notification
this.#notificationContext?.peek('danger', {
data: { message: 'Something went wrong!' }
});
// Warning notification
this.#notificationContext?.peek('warning', {
data: { message: 'Please review your changes.' }
});
this.#notificationContext?.peek('positive', {
data: {
headline: 'Success!',
message: 'Your document has been published.'
}
});
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
export class MyController extends UmbControllerBase {
async performAction() {
try {
// Do something
const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);
context?.peek('positive', {
data: { message: 'Action completed!' }
});
} catch (error) {
const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);
context?.peek('danger', {
data: {
headline: 'Error',
message: error.message
}
});
}
}
}
import { html } from '@umbraco-cms/backoffice/external/lit';
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;
});
}
#onClick() {
this.#notificationContext?.peek('positive', {
data: { message: 'Button clicked!' }
});
}
render() {
return html`
<uui-button @click=${this.#onClick}>
Click me
</uui-button>
`;
}
}
async saveData() {
try {
const response = await fetch('/api/save', {
method: 'POST',
body: JSON.stringify(this.data)
});
if (response.ok) {
this.#notificationContext?.peek('positive', {
data: {
headline: 'Saved',
message: 'Your changes have been saved.'
}
});
} else {
this.#notificationContext?.peek('danger', {
data: {
headline: 'Save Failed',
message: 'Could not save your changes.'
}
});
}
} catch (error) {
this.#notificationContext?.peek('danger', {
data: {
headline: 'Error',
message: 'An unexpected error occurred.'
}
});
}
}
import { UmbMenuItemAction } from '@umbraco-cms/backoffice/menu';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
export class MyAction extends UmbMenuItemAction {
async execute() {
const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);
context?.peek('positive', {
data: { message: 'Action executed!' }
});
}
}
validateAndSave() {
if (!this.title) {
this.#notificationContext?.peek('warning', {
data: {
headline: 'Validation Error',
message: 'Title is required.'
}
});
return;
}
if (this.title.length < 3) {
this.#notificationContext?.peek('warning', {
data: {
message: 'Title must be at least 3 characters.'
}
});
return;
}
this.save();
}
positive - Success messages (green)
peek('positive', { data: { message: 'Success!' } })
danger - Error messages (red)
peek('danger', { data: { message: 'Error occurred!' } })
warning - Warning messages (orange/yellow)
peek('warning', { data: { message: 'Please review!' } })
UMB_NOTIFICATION_CONTEXT: Global context for notifications
peek() Method: Display temporary notification
Toast Style: Auto-dismissing UI notifications
Data Structure:
headline (optional) - Bold title textmessage (required) - Notification body textContext Consumption: Use consumeContext() for subscription or getContext() for one-time use
Use Cases:
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.