umbraco-user-profile-app

Create custom user profile tabs in the Umbraco backoffice using TypeScript and LitElement.

26|13|Updated Nov 30, 2025
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-user-profile-app
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-user-profile-app
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-user-profile-app
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-user-profile-app

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill allows developers to add custom functionality and views directly within the Umbraco backoffice user profile section, enabling personalized user experiences and settings management.

Core Features & Use Cases

  • Custom Profile Tabs: Create new tabs within the user profile to display specific information or controls.
  • User-Specific Settings: Implement interfaces for users to manage their own preferences, activity logs, or connected accounts.
  • Use Case: Add a "Preferences" tab to the user profile where users can toggle dark mode or manage notification settings for their Umbraco account.

Quick Start

Use the umbraco-user-profile-app skill to create a new user profile app for managing user preferences.

Frequently Asked Questions about umbraco-user-profile-app

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

FAQPage Schema
How do I add custom tabs to the Umbraco backoffice user profile?

You add custom tabs to the Umbraco user profile by implementing custom applications using TypeScript and LitElement. This approach facilitates creating new tabs within the backoffice user profile section for displaying user-specific data and controls.

Can I use TypeScript and LitElement to extend Umbraco user profile settings?

Yes, you can extend Umbraco user profile settings using TypeScript and LitElement. This method enables the creation of custom interfaces for users to manage their own preferences, activity logs, or connected accounts directly within the backoffice.

What is the process for defining a custom user profile app in Umbraco?

Defining a custom user profile app in Umbraco requires adherence to the extension registry and foundation APIs. You must use these APIs for manifest and element definitions to successfully register and display your custom profile views.

How do I create a user interface for managing Umbraco account preferences?

You create an interface for managing Umbraco account preferences by building a custom profile tab. This allows users to toggle settings like dark mode or manage notification settings specifically for their own Umbraco account.

Do I need the Umbraco extension registry to build backoffice user profile extensions?

Yes, using the Umbraco extension registry is required to build backoffice user profile extensions. The extension registry and foundation APIs are necessary for defining the manifests and elements that integrate your custom views into the backoffice.

Does this approach support displaying user-specific data logs in Umbraco?

Yes, this approach supports displaying user-specific data logs in Umbraco. By creating custom profile tabs, developers can implement interfaces that display specific information such as activity logs or connected accounts for individual users.