umbraco-backoffice by umbraco/umbraco-cms-backoffice-skills
npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-backoffice后台自定义是多种扩展类型协同工作的组合:
此技能提供完整可用的蓝图。源代码位于 ./examples/ 目录中 - 可根据需要复制和修改。
有关单个扩展类型的详细信息,请调用引用的子技能。
提示:如果工作区中提供了 Umbraco CMS 源代码,请将其用作参考和灵感来源。
src/Umbraco.Web.UI.Client/src/packages/中的后台客户端代码展示了所有扩展类型的生产实现 - 研究核心团队如何构建区域、工作区、树和其他模式。
关键:此工作流程对于所有扩展开发都是强制性的。
1. 规划 ──► 首先阅读 PRE-BUILD-PLANNING.md
│ 绘制线框图,标记扩展类型,识别 UUI 组件
│ ⚠️ 在获得线框图批准之前,请勿编写代码
↓
2. 构建 ──► 使用示例和子技能创建扩展
│
│ ⛔ 停止 - 不要跳过验证
↓
3. 验证 ──► 构建后强制步骤:
• npm run build (必须通过)
• 启动 umbraco-extension-reviewer 代理
• 无需询问,直接修复高/中级问题
• 根据 POST-BUILD-VALIDATION.md 进行浏览器测试
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
如果跳过规划:您将构建错误的扩展类型。如果跳过验证:错误将到达用户。
/umbraco-quickstart 还是直接调用,此工作流程都适用。关键:所有扩展开发请遵循此工作流程:
1. 规划 ──► 阅读 PRE-BUILD-PLANNING.md,绘制线框图,识别扩展类型
↓
2. 构建 ──► 使用示例和子技能创建扩展
↓
3. 验证 ──► 阅读 POST-BUILD-VALIDATION.md,运行 umbraco-extension-reviewer
每个示例都有一个包含完整文档的详细 README.md 文件。请参阅 examples/ 文件夹。
| 示例 | 复杂度 | 展示内容 |
|---|---|---|
| Blueprint | 入门 | 区域 + 菜单 + 仪表板 + 工作区 - 基础模式 |
| tree-example | 中级 | 设置区域中的树形导航与工作区 |
| TimeDashboard | 高级 | 13+ 种扩展类型,包括头部应用、模态框、属性编辑器 |
| notes-wiki | 全栈 | 完整的 C# 后端,包含 CRUD、分层树、多个工作区 |
Blueprint 开始tree-exampleTimeDashboard 中的示例notes-wikiexamples/ 文件夹并阅读每个示例的 README.mdBlueprint.* 改为 MyApp.*)entityType 值以匹配您的领域umbraco-package.json 向 Umbraco 注册umbraco-add-extension-reference详细的参考资料在单独的文件中提供,可按需加载:
| 参考文档 | 何时阅读 |
|---|---|
| PRE-BUILD-PLANNING.md | 构建任何扩展之前 - 视觉规划、线框图、UUI 组件 |
| EXTENSION-MAP.md | "扩展类型 X 出现在 UI 的哪个位置?" - 显示所有扩展位置的 ASCII 图 |
| SUB-SKILLS-REFERENCE.md | "我需要什么技能来实现 X?" - 按类别分类的所有子技能的完整索引 |
| POST-BUILD-VALIDATION.md | 构建之后 - 完整的验证工作流程、浏览器测试、调试 |
每周安装量
81
代码仓库
GitHub 星标数
14
首次出现
2026年2月4日
安全审计
安装于
github-copilot58
opencode29
codex29
cursor29
gemini-cli27
amp25
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.
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 |
Weekly Installs
81
Repository
GitHub Stars
14
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
github-copilot58
opencode29
codex29
cursor29
gemini-cli27
amp25
Angular Core 核心架构深度解析:Ivy渲染、依赖注入与变更检测机制
481 周安装