umbraco-extension-template

Scaffold Umbraco backoffice extension projects with TypeScript/Vite tooling.

26|13|Updated Nov 30, 2025
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-extension-template
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-extension-template
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-extension-template
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-extension-template

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of new Umbraco backoffice extensions by providing a pre-configured project structure and essential tooling, streamlining the development process.

Core Features & Use Cases

  • Project Scaffolding: Generates a new Umbraco extension project with a recommended folder structure and necessary configuration files.
  • Development Tooling: Includes TypeScript/Vite for efficient front-end development with hot reloading.
  • Use Case: You need to build a custom dashboard for the Umbraco backoffice. Use this Skill to quickly set up the project structure, allowing you to focus on writing the dashboard's UI and logic.

Quick Start

Use the umbraco-extension-template skill to create a new Umbraco extension named 'MyFirstExtension'.

Frequently Asked Questions about umbraco-extension-template

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

FAQPage Schema
How do I scaffold a new Umbraco backoffice extension?

To scaffold an Umbraco backoffice extension, use the official dotnet template to generate a pre-configured project structure with TypeScript and Vite tooling. This provides the necessary foundation for building custom dashboards, sections, menus, and workspaces.

What do I need to create a custom Umbraco dashboard?

Creating a custom Umbraco dashboard requires the .NET SDK and Node.js installed. The scaffolding template generates the recommended folder structure and configuration files, allowing you to focus on writing the dashboard UI and logic.

Can I use TypeScript and Vite for Umbraco extension development?

Yes, the Umbraco extension template includes TypeScript and Vite for front-end development. This provides efficient tooling with hot reloading, streamlining the development of custom backoffice extensions.

What is the best way to set up a project structure for Umbraco menus and workspaces?

The best way to set up a project for Umbraco menus and workspaces is using the official scaffolding template. It automates project creation with a recommended folder structure and essential configuration files for backoffice development.

Does the Umbraco extension template support hot reloading during development?

Yes, the template supports hot reloading through the included Vite development tooling. This allows for efficient front-end development when building custom sections, dashboards, and workspaces within the Umbraco backoffice.

Why do I need Node.js and the .NET SDK for Umbraco extension scaffolding?

Node.js and the .NET SDK are required for Umbraco extension scaffolding because the template relies on dotnet for project generation and Node.js for the TypeScript and Vite front-end development workflows.