Umbraco Quickstart

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

Usage

bash

# Full setup with custom credentials
/umbraco-quickstart MyUmbracoSite MyExtension --email a@a.co.uk --password Admin123456

# With default credentials (admin@test.com / SecurePass1234)
/umbraco-quickstart MyUmbracoSite MyExtension

# Just Umbraco instance name (will prompt for extension name)
/umbraco-quickstart MyUmbracoSite

# No arguments (will detect existing or prompt for names)
/umbraco-quickstart

Workflow

1. Parse arguments

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.

2. Check what exists

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

3. Take action

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]

4. Warn about optional resources

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

5. MANDATORY: Enter Plan Mode

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

## Pre-Build Setup
- [ ] Load `/umbraco-backoffice` skill for best practices and examples

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

## Post-Build Validation (REQUIRED - DO NOT SKIP)

### Step 1: Initial Build
- [ ] Run `npm run build` in extension directory
- [ ] Verify build completes without errors

### Step 2: Code Review
- [ ] Spawn `umbraco-extension-reviewer` agent
- [ ] Fix all Critical/High severity issues

### Step 3: Rebuild (if fixes were made)
- [ ] Run `npm run build` again
- [ ] Verify build still succeeds

### Step 4: Restart Umbraco
- [ ] Stop the running Umbraco instance
- [ ] Run `dotnet run` to restart
- [ ] Wait for startup to complete

### Step 5: Browser Validation
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.

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.

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.

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

umbraco-quickstart

NPX Install

Tags

SKILL.md Content

Umbraco Quickstart

Usage

Workflow

1. Parse arguments

2. Check what exists

3. Take action

4. Warn about optional resources

5. MANDATORY: Enter Plan Mode

Goal

Default Credentials

Example