umbraco-quickstart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Umbraco Quickstart

Umbraco快速启动

Sets up everything needed for Umbraco extension development in one command.

通过一条命令完成Umbraco扩展开发所需的全部设置。

Usage

使用方法

bash

undefined

bash

undefined

Full setup with custom credentials

自定义凭据的完整设置

/umbraco-quickstart MyUmbracoSite MyExtension --email a@a.co.uk --password Admin123456

With default credentials (admin@test.com / SecurePass1234)

使用默认凭据（admin@test.com / SecurePass1234）

/umbraco-quickstart MyUmbracoSite MyExtension

Just Umbraco instance name (will prompt for extension name)

仅指定Umbraco实例名称（将提示输入扩展名称）

/umbraco-quickstart MyUmbracoSite

No arguments (will detect existing or prompt for names)

无参数（将检测现有项目或提示输入名称）

/umbraco-quickstart

undefined

/umbraco-quickstart

undefined

Workflow

工作流程

1. Parse arguments

1. 解析参数

First argument: Umbraco project name (e.g., "MyUmbracoSite")
Second argument: Extension name (e.g., "MyExtension")
--email
(optional): Admin email (default:
```
admin@test.com
```
)
--password
(optional): Admin password (default:
```
SecurePass1234
```
)

If arguments not provided, check what exists and prompt for missing names.

第一个参数：Umbraco项目名称（例如："MyUmbracoSite"）
第二个参数：扩展名称（例如："MyExtension"）
--email
（可选）：管理员邮箱（默认值：
```
admin@test.com
```
）
--password
（可选）：管理员密码（默认值：
```
SecurePass1234
```
）

如果未提供参数，将检查现有项目并提示输入缺失的名称。

2. Check what exists

2. 检查现有资源

Check for Umbraco instance:

bash

find . -name "*.csproj" -exec grep -l "Umbraco.Cms" {} \; 2>/dev/null | head -5

Check for extension projects:

bash

find . -name "umbraco-package.json" 2>/dev/null | head -10

检查Umbraco实例：

bash

find . -name "*.csproj" -exec grep -l "Umbraco.Cms" {} \; 2>/dev/null | head -5

检查扩展项目：

bash

find . -name "umbraco-package.json" 2>/dev/null | head -10

3. Take action

3. 执行操作

If no Umbraco instance:

Use the provided name (first argument) or prompt for one
Create with
```
/package-script-writer [ProjectName]
```

If no extension:

Use the provided name (second argument) or prompt for one

Create with

/umbraco-extension-template [ExtensionName]

If extension not registered:

/umbraco-add-extension-reference [ExtensionName]

如果不存在Umbraco实例：

使用提供的名称（第一个参数）或提示用户输入
通过
```
/package-script-writer [ProjectName]
```
创建实例

如果不存在扩展：

使用提供的名称（第二个参数）或提示用户输入

通过

/umbraco-extension-template [ExtensionName]

创建扩展

如果扩展未注册：

通过

/umbraco-add-extension-reference [ExtensionName]

完成注册

4. Warn about optional resources

4. 警告缺失的可选资源

Check extended workspace (including

/add-dir

directories) and warn if missing:

If CMS source not found:

⚠ Umbraco CMS source not found in extended workspace.
  For better code generation, add it:
  git clone https://github.com/umbraco/Umbraco-CMS.git
  /add-dir /path/to/Umbraco-CMS/src/Umbraco.Web.UI.Client

If UUI source not found:

⚠ UUI library source not found in extended workspace.
  For UI component reference, add it:
  git clone https://github.com/umbraco/Umbraco.UI.git
  /add-dir /path/to/Umbraco.UI/packages/uui

If testing skills not installed:

⚠ Testing skills not installed.
  To add testing capabilities:
  /plugin install umbraco-cms-backoffice-testing-skills@umbraco-backoffice-marketplace

检查扩展工作区（包括

/add-dir

目录），如果缺失则发出警告：

如果未找到CMS源码：

⚠ 扩展工作区中未找到Umbraco CMS源码。
  为了获得更好的代码生成体验，请添加源码：
  git clone https://github.com/umbraco/Umbraco-CMS.git
  /add-dir /path/to/Umbraco-CMS/src/Umbraco.Web.UI.Client

如果未找到UUI源码：

⚠ 扩展工作区中未找到UUI库源码。
  如需参考UI组件，请添加源码：
  git clone https://github.com/umbraco/Umbraco.UI.git
  /add-dir /path/to/Umbraco.UI/packages/uui

如果未安装测试技能：

⚠ 未安装测试技能。
  如需添加测试功能：
  /plugin install umbraco-cms-backoffice-testing-skills@umbraco-backoffice-marketplace

5. MANDATORY: Enter Plan Mode

5. 强制步骤：进入规划模式

Do NOT proceed to building until this step is complete.

Tell the user setup is complete and show the login credentials
Read
```
PRE-BUILD-PLANNING.md
```
from the
```
umbraco-backoffice
```
skill
Ask the user what they want to build

✅ Setup complete! Your extension is ready.

Login: admin@test.com / SecurePass1234

What would you like to build? Describe your idea and I'll help you plan the implementation.

Examples:
- "A dashboard that shows recent content changes"
- "A property editor for picking colours"
- "A tree in Settings for managing custom data"

When the user describes what they want:

Enter plan mode with
/plan
Follow the PRE-BUILD-PLANNING.md workflow:
- Draw ASCII wireframe of the UI
- Label extension types needed (section, dashboard, workspace, etc.)
- Identify UUI components
- Map data flow (contexts, APIs)
Identify which sub-skills to invoke
Include these MANDATORY sections in the plan document (they will be actioned after plan approval):

markdown

undefined

在完成此步骤前，请勿进行构建操作。

告知用户设置已完成，并显示登录凭据
读取
```
umbraco-backoffice
```
技能中的
```
PRE-BUILD-PLANNING.md
```
文件
询问用户想要构建的功能

✅ 设置完成！你的扩展已准备就绪。

登录凭据：admin@test.com / SecurePass1234

你想要构建什么？描述你的需求，我将帮助你规划实现方案。

示例：
- "显示近期内容变更的仪表盘"
- "用于选择颜色的属性编辑器"
- "设置菜单中用于管理自定义数据的树形结构"

当用户描述需求后：

通过
/plan
命令进入规划模式
遵循PRE-BUILD-PLANNING.md中的工作流：
- 绘制UI的ASCII线框图
- 标记所需的扩展类型（板块、仪表盘、工作区等）
- 确定要使用的UUI组件
- 梳理数据流（上下文、API）
确定要调用的子技能
在规划文档中必须包含以下部分（规划获批后将执行这些步骤）：

markdown

undefined

Pre-Build Setup

预构建设置

Load
```
/umbraco-backoffice
```
skill for best practices and examples

加载
```
/umbraco-backoffice
```
技能以获取最佳实践和示例

Implementation

实现步骤

[Your implementation steps here - skills to invoke, files to create]

[在此处填写你的实现步骤 - 要调用的技能、要创建的文件]

Post-Build Validation (REQUIRED - DO NOT SKIP)

构建后验证（必填 - 请勿跳过）

Step 1: Initial Build

步骤1：初始构建

Run
```
npm run build
```
in extension directory
Verify build completes without errors

在扩展目录中运行
```
npm run build
```
验证构建过程无错误完成

Step 2: Code Review

步骤2：代码审查

Spawn
```
umbraco-extension-reviewer
```
agent
Fix all Critical/High severity issues

启动
```
umbraco-extension-reviewer
```
代理
修复所有严重/高优先级问题

Step 3: Rebuild (if fixes were made)

步骤3：重新构建（若进行了修复）

Run
```
npm run build
```
again
Verify build still succeeds

再次运行
```
npm run build
```
验证构建仍能成功完成

Step 4: Restart Umbraco

步骤4：重启Umbraco

Step 5: Browser Validation

步骤5：浏览器验证

Check if browser automation is available (any of:

dev-browser

skill, Playwright MCP, Claude computer use).

If browser automation IS available:

Navigate to backoffice login (http://localhost:5000/umbraco)
Login with credentials
Navigate to extension location
Verify: no console errors, UI renders, interactions work
Take screenshot of working extension

If NO browser automation available, output manual testing steps for user.


5. Exit plan mode only when wireframe AND all validation sections are in the plan

**⚠️ Do NOT generate code until planning is complete and approved by the user.**

检查是否有浏览器自动化工具可用（以下任意一种：

dev-browser

技能、Playwright MCP、Claude计算机功能）。

如果有浏览器自动化工具可用：

导航到后台登录页面（http://localhost:5000/umbraco）
使用凭据登录
导航到扩展所在位置
验证：无控制台错误、UI正常渲染、交互功能可用
对正常运行的扩展截图

如果没有浏览器自动化工具可用，输出供用户执行的手动测试步骤。


5. 仅当线框图和所有验证部分都已包含在规划文档中时，才可退出规划模式

**⚠️ 在规划完成并获得用户批准前，请勿生成代码。**

Goal

目标

Get the user to a working, validated extension. Follow the workflow: PLAN → BUILD → VALIDATE. Don't just report - take action.

帮助用户获得可正常运行且经过验证的扩展。遵循工作流：规划 → 构建 → 验证。不要仅报告信息，要主动执行操作。

Default Credentials

默认凭据

When creating an Umbraco instance, these defaults are used:

Email:
```
admin@test.com
```
Password:
```
SecurePass1234
```

These are safe for local development and don't contain special characters that cause escaping issues.

创建Umbraco实例时，将使用以下默认凭据：

邮箱：
```
admin@test.com
```
密码：
```
SecurePass1234
```

这些凭据适用于本地开发，且不包含会导致转义问题的特殊字符。

Example

示例

bash

/umbraco-quickstart MyUmbracoSite MyDashboard

This will:

Create Umbraco instance (e.g. "MyUmbracoSite") if not exists
Create extension (e.g. "MyDashboard")
Register the extension with the Umbraco project
Warn about missing CMS/UUI source if applicable
Enter plan mode to design the extension (wireframe, extension types, validation steps)
Build using identified sub-skills
Run
```
npm run build
```
Run
```
umbraco-extension-reviewer
```
and fix issues
Rebuild if fixes were made
Restart Umbraco
Browser validation (automatic if browser automation available, manual steps otherwise)

Login with:

admin@test.com

SecurePass1234

bash

/umbraco-quickstart MyUmbracoSite MyDashboard

此命令将：

若不存在则创建Umbraco实例（例如"MyUmbracoSite"）
创建扩展（例如"MyDashboard"）
将扩展注册到Umbraco项目中
若缺失CMS/UUI源码则发出警告
进入规划模式以设计扩展（线框图、扩展类型、验证步骤）
使用确定的子技能进行构建
运行
```
npm run build
```
启动
```
umbraco-extension-reviewer
```
并修复问题
若进行了修复则重新构建
重启Umbraco
浏览器验证（若有浏览器自动化工具则自动执行，否则提供手动步骤）

登录凭据：

admin@test.com

SecurePass1234