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

umbraco-controllers

Create and manage Umbraco backoffice controllers with TypeScript lifecycle methods.

Updated Mar 6, 2026
Search Tags:#typescript#controllers#lifecycle management#umbraco#backoffice#component logic
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-controllers-kraftvaerk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-controllers
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-controllers
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-controllers-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers understand and implement controllers within the Umbraco backoffice, enabling better organization and reuse of logic across different UI elements.

Core Features & Use Cases

  • Lifecycle Management: Controllers manage side effects, subscriptions, and cleanup using hostConnected, hostDisconnected, and destroy methods.
  • Composition and Reuse: Controllers can host other controllers, promoting modularity.
  • Context Awareness: Controllers can access and consume Umbraco contexts (e.g., notifications).
  • Use Case: Create a controller to manage a timer that updates a UI element every second, ensuring the timer is properly cleaned up when the element is removed from the DOM.

Quick Start

Generate a basic custom controller that logs messages when it connects and disconnects from its host.

Frequently Asked Questions about umbraco-controllers

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

FAQPage Schema
How do I manage side effects and cleanup for custom Umbraco backoffice elements?▼

Umbraco backoffice controllers manage side effects and cleanup using lifecycle methods like hostConnected, hostDisconnected, and destroy to handle subscriptions and resource disposal properly.

What is the best way to reuse component logic across different Umbraco backoffice UI elements?▼

Reusing component logic in the Umbraco backoffice is best achieved by creating controllers that can host other controllers, promoting modularity and enabling logic composition across UI elements.

Can I access Umbraco contexts and notifications from a custom backoffice controller?▼

Custom backoffice controllers can access and consume Umbraco contexts, such as notifications, allowing your custom elements to interact with the broader backoffice environment effectively.

Do I need TypeScript to create custom controllers for the Umbraco backoffice?▼

Creating custom controllers for the Umbraco backoffice requires a solid understanding of TypeScript and the Umbraco class-api to implement foundational concepts like host connection and context access.

How do I create a controller in Umbraco that starts and stops a timer when an element is added or removed from the DOM?▼

You create a controller that initializes a timer within the hostConnected method and ensures proper cleanup using hostDisconnected and destroy methods when the element is removed from the DOM.

Why does my Umbraco controller logic not clean up when the backoffice element is removed from the DOM?▼

If controller logic does not clean up, it is likely because the hostDisconnected and destroy lifecycle methods are not properly implemented to handle the necessary side effect and subscription disposal.

Related Skills

Explore More Software Engineering Skills→
umbracoumbraco
26

umbraco-controllers

Create Umbraco backoffice controllers extending UmbControllerBase with lifecycle methods.

Official
Intermediate
1k-off1k-off
1

umbraco-umbraco-element

Generate TypeScript Umbraco Elements using UmbElementMixin or UmbLitElement.

Community
Intermediate
albanistalbanist
4

umbraco-umbraco-element

Create Umbraco backoffice web components using UmbElementMixin and UmbLitElement.

Community
Intermediate
albanistalbanist
4

umbraco-controllers

Create and manage Umbraco backoffice controllers with code examples.

Community
Intermediate