umbraco-header-apps

Generate manifest and element files for Umbraco backoffice header apps.

4|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-header-apps-albanist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-header-apps
Source: https://github.com/albanist/umbraco_CLI/tree/main/skills/extensions/umbraco-header-apps
Command: npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-header-apps-albanist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation and implementation of custom header applications within the Umbraco backoffice, enhancing user experience and providing quick access to global functionalities.

Core Features & Use Cases

  • Header App Creation: Generate manifests and elements for both simple link-based and interactive header apps.
  • Documentation Integration: Provides direct links to official Umbraco documentation for header app development.
  • Use Case: Add a "Help" button to the Umbraco header that links directly to the Umbraco documentation, or create an interactive app that opens a modal for quick content searching.

Quick Start

Use the umbraco-header-apps skill to create a simple link-based header app that points 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 add a custom header app to the Umbraco backoffice, you generate the necessary manifest and element files using TypeScript and web components. This supports creating simple link-based apps or interactive components with custom elements.

What is an Umbraco header app and when do I need one?

An Umbraco header app is a backoffice extension that provides quick access to global functionalities. You need one when enhancing the user experience by adding global features like a Help button or an interactive quick content search modal.

Can I build interactive web components for the Umbraco header?

Yes, you can build interactive web components for the Umbraco header. The Skill generates custom element files using TypeScript, supporting interactive implementations that utilize Umbraco extension types, foundation concepts, and context APIs.

Do I need TypeScript to create Umbraco backoffice header extensions?

TypeScript is used to implement header applications in the Umbraco backoffice by generating the necessary manifest and element files. It supports creating both simple link-based and interactive custom element components.

How do I create a simple link-based header app in Umbraco?

You create a simple link-based header app in Umbraco by generating the required manifest file that defines the extension. This allows you to add elements like a direct link to the Umbraco documentation directly in the backoffice header.

What are the limitations of building Umbraco header apps?

Simple header apps are straightforward, but advanced interactive implementations require a solid understanding of Umbraco extension types, foundation concepts, and context APIs to generate the necessary manifest and custom element files correctly.