Umbraco Quickstart

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

Usage

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:

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

Check for extension projects:

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:

• Register with /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):

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

/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