菜单
Umbraco backoffice extension customisation - complete working examples showing how extension types combine
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-backoffice命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | umbraco-backoffice |
| description | Umbraco backoffice extension customisation - complete working examples showing how extension types combine |
| version | 1.3.0 |
| location | managed |
| allowed-tools | Read, Write, Edit, WebFetch |
Backoffice customisations are combinations of extension types working together:
This skill provides complete working blueprints. The source code is in ./examples/ - copy and adapt for your needs.
For details on individual extension types, invoke the referenced sub-skills.
TIP: If the Umbraco CMS source code is available in your workspace, use it as a reference and for inspiration. The backoffice client code in
src/Umbraco.Web.UI.Client/src/packages/shows production implementations of all extension types - study how the core team structures sections, workspaces, trees, and other patterns.
CRITICAL: This workflow is MANDATORY for ALL extension development.
Step 0 — Version guard: Before planning, invoke umbraco-version-guard to confirm
the site's Umbraco major matches the major these skills target. Stop on a mismatch — the
backoffice API differs between Umbraco majors and these skills will produce wrong code.
1. PLAN ──► Read PRE-BUILD-PLANNING.md FIRST
│ Draw wireframe, label extension types, identify UUI components
│ ⚠️ DO NOT write code until wireframe is approved
↓
2. BUILD ──► Use examples and sub-skills to create extension
│
│ ⛔ STOP - Do not skip validation
↓
3. VALIDATE ──► MANDATORY post-build steps:
• npm run build (must pass)
• Spawn umbraco-extension-reviewer agent
• Fix High/Medium issues without asking
• Browser test per POST-BUILD-VALIDATION.md
If you skip planning: You WILL build the wrong extension type. If you skip validation: Bugs WILL reach the user.
/umbraco-quickstart or directly.CRITICAL: Follow this workflow for ALL extension development:
1. PLAN ──► Read PRE-BUILD-PLANNING.md, draw wireframes, identify extension types
↓
2. BUILD ──► Use examples and sub-skills to create extension
↓
3. VALIDATE ──► Read POST-BUILD-VALIDATION.md, run umbraco-extension-reviewer
Each example has a detailed README.md with full documentation. See the examples/ folder.
| Example | Complexity | What It Shows |
|---|---|---|
| Blueprint | Starter | Section + Menu + Dashboard + Workspace - the fundamental pattern |
| tree-example | Intermediate | Tree navigation in Settings section with Workspace |
| TimeDashboard | Advanced | 13+ extension types including Header Apps, Modals, Property Editors |
| notes-wiki | Full-stack | Complete C# backend with CRUD, hierarchical tree, multiple workspaces |
Blueprinttree-exampleTimeDashboard for examplesnotes-wikiexamples/ folder and read the README.md for each exampleBlueprint.* to MyApp.*)entityType values to match your domainumbraco-package.jsonumbraco-add-extension-referenceDetailed reference material is available in separate files for on-demand loading:
| Reference | When to Read |
|---|---|
| PRE-BUILD-PLANNING.md | Before building any extension - visual planning, wireframes, UUI components |
| EXTENSION-MAP.md | "Where does extension type X appear in the UI?" - ASCII diagram showing all extension locations |
| SUB-SKILLS-REFERENCE.md | "What skill do I need for X?" - Complete index of all sub-skills by category |
| POST-BUILD-VALIDATION.md | After building - complete validation workflow, browser testing, debugging |
Run tests from skill examples and generate a report (project)
Validate links and references in SKILL.md files using deterministic scripts
Create new Umbraco backoffice extensions using the official dotnet template