Umbraco Example Generator

This generates complete, runnable Umbraco backoffice extensions and spins them up using the official Umbraco source's dev infrastructure with hot reload. You point it at any folder with an index.ts that exports manifests, run npm run dev:external with VITE_EXTERNAL_EXTENSION set, and your dashboard or custom element appears at localhost:5173 with mocked APIs. It's built around the actual extension loading mechanism in Umbraco CMS, so you're developing against the real backoffice code without needing a .NET backend. Good for prototyping extensions, creating demos, or testing UI components in isolation before wiring them into a full CMS instance.

skills.sh installs: 383
GitHub stars: 27
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-example-generator --agent claude-code

Installs into .claude/skills of the current project.

Files

Umbraco Example Generator

Generate complete, testable example extensions for the Umbraco backoffice and run them using the Umbraco source's dev infrastructure.

When to Use

Creating demonstration extensions
Building testable extension examples
Rapid development with hot reload
Testing extensions without .NET backend

Related Skills

umbraco-unit-testing - Add unit tests to examples
umbraco-mocked-backoffice - E2E testing patterns
umbraco-backoffice - Extension type blueprints

Quick Start

1. Clone Umbraco source (one-time setup)

git clone https://github.com/umbraco/Umbraco-CMS
cd Umbraco-CMS/src/Umbraco.Web.UI.Client
npm install

2. Create your extension folder

my-extension/
├── index.ts           # REQUIRED - exports manifests
└── my-element.ts      # Your element(s)

3. Create index.ts (exports manifests)

import './my-element.js';

export const manifests = [
  {
    type: 'dashboard',
    alias: 'My.Dashboard',
    name: 'My Dashboard',
    element: 'my-element',
    meta: { label: 'My Dashboard', pathname: 'my-dashboard' },

SKILL.md on GitHub