umbraco-block-editor-custom-view

Add the marketplace:

```bash

/plugin marketplace add umbraco/Umbraco-CMS-Backoffice-Skills

```

Install the plugins:

```bash

# Backoffice extension skills (58 skills)

/plugin install umbraco-cms-backoffice-skills@umbraco-backoffice-marketplace

# Testing skills (8 skills) - optional but recommended

/plugin install umbraco-cms-backoffice-testing-skills@umbraco-backoffice-marketplace

```

---

These skills are your entry points for Umbraco backoffice extension development. Start here.

`umbraco-quickstart` - Quick Setup

Start here if you're new. Sets up everything in one command and guides you through planning, building, and validating your extension.

```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 instance name - will prompt for extension name

/umbraco-quickstart MyUmbracoSite

# No arguments - detects existing or prompts for names

/umbraco-quickstart

```

This skill follows a PLAN → BUILD → VALIDATE workflow:

1. Setup - Create Umbraco instance and extension (if needed), register extension
2. Plan - Enter plan mode with ASCII wireframes, identify extension types, map data flow
3. Build - Generate code using identified sub-skills
4. Review - Auto-run umbraco-extension-reviewer to catch and fix issues
5. Validate - Auto-validate in browser (if Playwright MCP or browser automation available) or provide manual test steps

---

Manual Setup

If you prefer to set things up step by step:

#### 1. Create an Umbraco Instance

Use the package-script-writer skill to create an Umbraco instance using the [PSW CLI](https://github.com/prjseal/Package-Script-Writer-CLI).

```bash

/package-script-writer MyProject

```

Thanks to Paul Seal ([@prjseal](https://github.com/prjseal)) for his hard work on the PSW CLI.

#### 2. Create an Extension

Use umbraco-extension-template to create a new extension project:

```bash

/umbraco-extension-template MyFeature

```

Or manually:

```bash

dotnet new install Umbraco.Templates

dotnet new umbraco-extension -n MyExtension -ex

cd MyExtension/Client && npm install && npm run watch

```

#### 3. Register the Extension

Use umbraco-add-extension-reference to register your extension with the Umbraco project:

```bash

/umbraco-add-extension-reference MyExtension

```

This adds a to your Umbraco .csproj file so the extension loads.

---

`umbraco-backoffice` - The Backbone Skill

This is the most important skill. It provides:

• Complete Extension Map - Visual diagram showing where ALL 57 extension types appear in the backoffice UI
• Working Blueprints - Copy-and-adapt examples for common patterns
• Sub-Skill Reference - Links to all other skills organised by category

Use this skill when:

• Starting a new backoffice customisation project
• Understanding how extension types connect together
• Finding the right skill for a specific UI location

Blueprints included:

| Blueprint | Description | Skills Used |

|-----------|-------------|-------------|

| Blueprint 1 | Section + Menu + Dashboard + Workspace | 6 skills |

| TimeDashboard | 13 extension types working together | 13 skills |

| tree-example | Settings tree with workspace | 7 skills |

| notes-wiki | Full-stack with C# backend | 27 skills |

```bash

/umbraco-backoffice

```

---

These skills work best when Claude has access to the Umbraco source code. This allows Claude to:

• Reference actual Umbraco implementations and patterns
• Understand types, interfaces, and base classes
• Follow existing code conventions accurately

Recommended setup:

1. Clone the repositories alongside your project:

```bash

git clone https://github.com/umbraco/Umbraco-CMS.git

git clone https://github.com/umbraco/Umbraco.UI.git

```

1. Add them as working directories in Claude Code:

```bash

/add-dir /path/to/Umbraco-CMS/src/Umbraco.Web.UI.Client

/add-dir /path/to/Umbraco.UI/packages/uui

```

This gives Claude direct access to:

• Umbraco.Web.UI.Client - Backoffice TypeScript source code
• UUI - Umbraco UI component library

---

Foundation (10 skills)

Core architectural concepts used across all extensions:

| Skill | Description |

|-------|-------------|

| umbraco-context-api | Provider-consumer pattern for data sharing |

| umbraco-repository-pattern | Data access layer abstraction |

| umbraco-extension-registry | Dynamic extension registration |

| umbraco-conditions | Control where extensions appear |

| umbraco-state-management | Reactive UI with @state |

| umbraco-localization | Multi-language support |

| umbraco-routing | URL structure and navigation |

| umbraco-notifications | Toast messages and events |

| umbraco-umbraco-element | Base class for components |

| umbraco-controllers | C# API endpoints |

Extension Types (30 skills)

UI extensions for the backoffice:

Navigation & Sections

• umbraco-sections - Top-level navigation
• umbraco-menu / umbraco-menu-items - Sidebar menus
• umbraco-header-apps - Header bar apps

Content Areas

• umbraco-dashboard - Welcome panels
• umbraco-workspace - Entity editing views
• umbraco-tree / umbraco-tree-item - Hierarchical navigation
• umbraco-collection / umbraco-collection-view / umbraco-collection-action - List/grid views

Actions

• umbraco-entity-actions - Context menu actions
• umbraco-entity-bulk-actions - Multi-select operations
• umbraco-entity-create-option-action - Create menu options
• umbraco-current-user-action - User profile actions

UI Components

• umbraco-modals - Dialogs and sidebars
• umbraco-icons - Custom icon sets
• umbraco-theme - Backoffice themes
• umbraco-ufm-component - Umbraco Flavored Markdown

Search & Preview

• umbraco-search-provider - Global search
• umbraco-search-result-item - Custom result rendering
• umbraco-preview-app-provider - Content preview apps

Advanced

• umbraco-global-context - App-wide shared state
• umbraco-kinds - Reusable manifest templates
• umbraco-dynamic-root - Content picker configuration
• umbraco-user-profile-app - User profile tabs
• umbraco-health-check - System health checks
• umbraco-package-view - Package configuration UI
• umbraco-entry-point / umbraco-bundle - Extension lifecycle

Property Editors (6 skills)

Custom data type editors:

| Skill | Description |

|-------|-------------|

| umbraco-property-editor-ui | Visual editor component |

| umbraco-property-editor-schema | Data validation |

| umbraco-property-action | Property buttons |

| umbraco-property-value-preset | Default value templates |

| umbraco-file-upload-preview | Upload previews |

| umbraco-block-editor-custom-view | Block rendering |

Rich Text (4 skills)

Tiptap editor customization:

| Skill | Description |

|-------|-------------|

| umbraco-tiptap-extension | Core editor behavior |

| umbraco-tiptap-toolbar-extension | Toolbar buttons |

| umbraco-tiptap-statusbar-extension | Status bar items |

| umbraco-monaco-markdown-editor-action | Markdown buttons |

Backend (4 skills)

Authentication and API integration:

| Skill | Description |

|-------|-------------|