skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-header-apps

Implement Umbraco Backoffice header apps with manifest-driven integration.

4|Updated Mar 6, 2026
Search Tags:#typescript#documentation#umbraco#lit#backoffice#extension manifest#header apps
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-header-apps-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-header-apps
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/extensions/umbraco-header-apps
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-header-apps-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you implement Umbraco Backoffice header apps quickly and correctly by translating the official “Header Apps” documentation into working manifest and (when needed) interactive UI code.

Core Features & Use Cases

  • Single-purpose header apps: Create global top-navigation extensions for quick links or actions.
  • Optional interactive components: Add button behavior that opens modals, triggers services, or performs actions.
  • Documentation-first workflow: Fetch the latest docs, then generate code examples aligned with the current API patterns.
  • Use case: Add a “Tools” header app that opens a custom workflow or launches an external admin resource from the Backoffice navigation.

Quick Start

Implement a simple header link by generating the headerApp manifest for your desired alias, label, icon, and href using the latest Umbraco documentation as the source of truth.

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?▼

You add a custom header app by creating a manifest-driven extension that defines the alias, label, icon, and optional interactive elements, aligning with current Umbraco backoffice extension type documentation.

What is a header app in Umbraco used for?▼

A header app in Umbraco is used to add global top-navigation buttons or actions to the backoffice, such as documentation links, admin tools, or UI elements that trigger custom workflows and modals.

Can I use Lit to build interactive Umbraco backoffice header apps?▼

Yes, you can use Lit to build interactive Umbraco backoffice header apps by wiring custom elements into the manifest to handle button behavior, open modals, or trigger services.

How do I configure an Umbraco extension manifest for a header app?▼

You configure an Umbraco extension manifest for a header app by declaring the header-apps extension type and specifying the desired alias, label, icon, and href properties based on the official documentation.

Do I need TypeScript to create Umbraco header apps?▼

TypeScript is used for creating Umbraco header apps, providing type safety and supporting the web-based tooling required for documentation verification and manifest element wiring.

What is the best way to ensure my header app matches the current Umbraco API?▼

The best way to ensure your header app matches the current Umbraco API is to follow a documentation-first workflow, fetching the latest official header-apps docs before generating the manifest and element code.

Related Skills

Explore More Software Engineering Skills→
albanistrefialbanistrefi
4

umbraco-menu-items

Generate Umbraco backoffice menu item manifests and action code.

Community
Intermediate
1k-off1k-off
1

umbraco-header-apps

Implement Umbraco Backoffice header apps with manifests and Lit elements.

Community
Intermediate
albanistalbanist
4

umbraco-current-user-action

Create custom current user actions for the Umbraco backoffice.

Community
Intermediate
1k-off1k-off
1

umbraco-icons

Register custom SVG icons for the Umbraco backoffice via extension manifest.

Community
Intermediate