umbraco-example-generator

Generate Umbraco backoffice extension examples with mocked dev sessions.

1|Updated May 21, 2026

Search Tags:#typescript #umbraco #workspace context #backoffice extensions #dashboard manifests #lit elements #mocked backoffice

Ready to run

npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-example-generator-1k-off

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: umbraco-example-generator
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-example-generator
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-example-generator-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you quickly create complete, testable Umbraco backoffice extension examples and run them locally using Umbraco’s dev infrastructure, so you can validate UI and context behavior without building a full .NET backend.

Core Features & Use Cases

Create ready-to-run extensions: Generate dashboards, views, actions, and context tokens with minimal boilerplate so they appear in the Umbraco backoffice.
Run in mocked backoffice mode: Use Vite external extension loading to run examples with mocked APIs for fast iteration.
Validate with tests: Add unit tests and Playwright E2E tests against the mocked backoffice to ensure extension behavior stays correct.

Use case example: You want to demonstrate a “workspace feature toggle” extension in a workshop—generate the context, view, action, and footer app, then run it and verify it with automated tests.

Quick Start

Use the umbraco-example-generator skill to create an external Umbraco backoffice extension that exports a manifests array from index.ts and then run it locally in mocked backoffice mode.

Frequently Asked Questions about umbraco-example-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create Umbraco backoffice extensions without a .NET backend?▼

Umbraco backoffice extensions can be generated as ready-to-run dashboards, views, and actions with minimal boilerplate, then executed locally using mocked APIs and Vite external extension loading to validate UI and context behavior without a full backend.

What is a mocked backoffice session for Umbraco development?▼

A mocked backoffice session uses Vite external extension loading to run generated Umbraco extension examples with mocked APIs, enabling fast local iteration and validation of UI and state management without requiring a live server.

How do I set up an index.ts file to export Umbraco extension manifests?▼

To export Umbraco extension manifests, generate an index.ts file that exports a manifests array alongside compatible element and context modules, allowing the extensions to be hot-reloadable via the VITE_EXTERNAL_EXTENSION dev:external flow.

Can I test Umbraco dashboard extensions with Playwright?▼

Yes, you can add Playwright E2E tests against the mocked backoffice to ensure your generated Umbraco dashboard extensions behave correctly, alongside unit tests for validating individual UI and state management logic.

Does Umbraco example generation support workspace context patterns and Lit elements?▼

Yes, the generation process supports creating workspace context patterns, actions, and Lit elements for the Umbraco backoffice, producing compatible context tokens and views that integrate with the mocked dev infrastructure.

Do I need a full Umbraco environment to validate backoffice views and actions?▼

No, you do not need a full environment; you can generate and validate backoffice views, actions, and workspace context patterns locally using deterministic mocked backoffice sessions and Vite hot-reloading.