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

umbraco-header-apps

Create custom header applications in the Umbraco backoffice using extension points and LitElement.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers implement custom header applications within the Umbraco backoffice, providing globally accessible functionality and quick links.

Core Features & Use Cases

  • Header App Implementation: Create both simple link-based and interactive custom header apps.
  • Documentation Integration: Provides direct links to official Umbraco documentation for header apps and related concepts.
  • Use Case: Add a "Help" button to the Umbraco header that links directly to the relevant section of the official documentation, or create a custom tool that opens a modal for quick content searching.

Quick Start

Use the umbraco-header-apps skill to create a simple link header app pointing to the Umbraco documentation.

Frequently Asked Questions about umbraco-header-apps

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

FAQPage Schema
How do I add a custom header app to the Umbraco backoffice?▼

To create a custom header app in Umbraco, you leverage the extension system and frontend foundation to register manifest files and build interactive components using LitElement for seamless backoffice integration.

What are Umbraco header apps used for?▼

Umbraco header apps provide globally accessible functionality within the backoffice, allowing developers to implement simple static links like help documentation or interactive custom tools for quick content searching.

Do I need LitElement to build interactive Umbraco header apps?▼

Yes, building interactive custom header apps requires an understanding of LitElement to create custom components, while simple link-based apps rely primarily on manifest files within the Umbraco extension system.

Can I create a help link in the Umbraco backoffice header?▼

Yes, you can implement a simple link-based header app that adds a button to the Umbraco header, pointing users directly to relevant sections of official documentation or any external URL.

What is the best way to extend the Umbraco backoffice with a custom tool?▼

The best way to extend the backoffice with a custom tool is using header apps, which support both link-based extensions and interactive modals through the official Umbraco extension points and frontend foundation.

Related Skills

Explore More Software Engineering Skills→
albanistalbanist
4

umbraco-package-view

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

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-modals

Create custom modals and sidebars in the Umbraco backoffice.

Official
Intermediate
albanistalbanist
4

umbraco-header-apps

Generate manifest and element files for Umbraco backoffice header apps.

Community
Intermediate
albanistrefialbanistrefi
4

umbraco-header-apps

Implement Umbraco Backoffice header apps with manifest-driven integration.

Community
Intermediate