Why is the index.ts file required in my extension folder?

The index.ts file acts as the entry point; it must export a 'manifests' array so the Umbraco extension registry can automatically discover and load your custom components.

Do I need a running Umbraco .NET site to use this skill?

No, this skill utilizes the Umbraco source's development infrastructure which includes mocked APIs via MSW, allowing you to develop UI extensions entirely in the frontend.

Can I use this for testing production-ready Umbraco packages?

Yes, it is designed specifically for building and validating the frontend portions of Umbraco packages, ensuring your manifests and elements work correctly before integration.

How does the external extension loading work?

It uses the 'npm run dev:external' command alongside a path variable to create a Vite alias that points to your local folder, injecting your code directly into the backoffice UI.

Umbraco Example Generator

Name: Umbraco Example Generator
Author: umbraco

byumbraco

•

内容管理

Generates and executes testable Umbraco backoffice extensions using a mocked development environment and hot-reload infrastructure.

This skill streamlines the development of Umbraco backoffice extensions by leveraging the core CMS development infrastructure to run frontend code in isolation. It allows developers to create, preview, and test custom dashboards, views, and elements without requiring a functional .NET backend. By utilizing Vite's external extension loading and Mock Service Worker (MSW) for APIs, it provides a high-fidelity environment for rapid prototyping, building package demonstrations, and validating extension manifests before deployment.

主要功能

01Mocked API integration for testing extensions without a live database

02External directory mapping via VITE_EXTERNAL_EXTENSION environment variables

03Standardized patterns for Lit-based components and Umbraco contexts

04Automated boilerplate generation for Umbraco backoffice manifests

051 GitHub stars

06Hot-reload support for real-time frontend extension development

使用场景

01Building standalone, testable examples for Umbraco package documentation

02Prototyping new Umbraco backoffice UI components and dashboards

03Debugging complex extension registration logic in an isolated environment

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-example-generator

For use in Claude.ai and ChatGPT

Download Skill