skills.rest
kraftvaerk
kraftvaerkOFFICIAL
Explore all skills by this author →
WebsiteGitHub

umbraco-example-generator

Generate and run Umbraco backoffice extensions with Vite and LitElement.

Updated Mar 6, 2026
Search Tags:#testing#development#extension#umbraco#backoffice#lit-element
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-example-generator-kraftvaerk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-example-generator
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-example-generator
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-example-generator-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the development of Umbraco backoffice extensions by providing a rapid way to scaffold, build, and test new components directly within the Umbraco development environment.

Core Features & Use Cases

  • Rapid Prototyping: Quickly create and test new dashboard elements, property editors, or other backoffice components.
  • External Extension Development: Develop and run custom extensions independently of the main Umbraco CMS project.
  • Use Case: You need to build a custom dashboard widget for the Umbraco backoffice. Use this Skill to generate the basic structure, write your LitElement code, and then run it in a live, hot-reloading Umbraco development environment.

Quick Start

Use the umbraco-example-generator skill to create a new extension in the '/path/to/my-new-extension' directory.

Frequently Asked Questions about umbraco-example-generator

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

FAQPage Schema
How do I build and test Umbraco backoffice extensions rapidly?▼

Develop Umbraco backoffice extensions independently by generating external extension projects with Vite and LitElement. This skill scaffolds custom UI components and runs them in a hot-reloading environment isolated from your main Umbraco CMS project.

Can I use LitElement for custom Umbraco dashboard components?▼

Yes, you can use LitElement to create custom Umbraco dashboard components. The skill scaffolds the basic component structure and runs it within a live Umbraco development environment for rapid prototyping and testing.

What is the best way to prototype Umbraco property editors externally?▼

The best way to prototype Umbraco property editors externally is using this skill to scaffold an independent extension project. It leverages Vite to provide hot-reloading, allowing you to develop UI functionalities without modifying the main Umbraco CMS.

Does Umbraco extension development support hot-reloading with Vite?▼

Yes, Umbraco extension development supports hot-reloading with Vite. This skill facilitates rapid iteration by generating and running testable LitElement components in a Vite-powered development environment.

Do I need Vite to develop custom UI functionalities for Umbraco?▼

You need Vite to achieve hot-reloading and rapid development for custom Umbraco UI functionalities. This skill uses Vite alongside LitElement to build, run, and test external backoffice extensions efficiently.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-modals

Create custom modals and sidebars in the Umbraco backoffice.

Official
Intermediate
kraftvaerkkraftvaerk

umbraco-add-extension-reference

Add Umbraco extension project references to .csproj and .sln files.

Official
Intermediate
umbracoumbraco
26

umbraco-collection-view

Generate Umbraco collection view manifests and LitElement components for custom layouts.

Official
Intermediate
albanistalbanist
4

umbraco-package-view

Generate Umbraco package view UI components with manifest files using LitElement or Vanilla JS.

Community
Intermediate