umbraco-ufm-component

Implement Umbraco Flavored Markdown components with custom markers for dynamic content.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill allows developers to extend Umbraco's markdown rendering capabilities with custom syntax, enabling dynamic content insertion and dynamic UI elements directly within markdown text.

Core Features & Use Cases

  • Custom Syntax: Define and implement custom markdown markers (e.g., {#key}, {%value}) that transform into HTML.
  • Dynamic Content: Integrate localized strings, property values, or custom UI elements into markdown.
  • Use Case: Create a UFM component to display a user's profile picture directly in a markdown description by using a marker like {@user-avatar:userId}.

Quick Start

Use the umbraco-ufm-component skill to create a new UFM component for displaying highlighted text within Umbraco markdown.

Frequently Asked Questions about umbraco-ufm-component

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

FAQPage Schema
How do I add custom UI elements to Umbraco markdown?

To add custom UI elements to Umbraco markdown, you implement Umbraco Flavored Markdown (UFM) components using special markers like `{#key}` that transform into HTML during rendering.

What is Umbraco Flavored Markdown and when do I need it?

Umbraco Flavored Markdown (UFM) extends standard markdown with custom syntax for dynamic content. You need it when inserting localized strings, property values, or custom UI elements directly into markdown text in the backoffice.

How do I create a custom UFM component in Umbraco?

Creating a custom UFM component involves fetching official Umbraco documentation, then generating a TypeScript manifest and the component implementation to define and render your custom markdown markers.

Can I insert localized strings into markdown in the Umbraco backoffice?

Yes, you can insert localized strings into markdown in the Umbraco backoffice by defining custom UFM markers that map to your localization files, rendering dynamic text based on user locale.

Does extending markdown with custom components require TypeScript?

Yes, extending markdown with custom components requires TypeScript to generate the component manifests and implementations needed to define the custom syntax and dynamic rendering behavior in Umbraco.

What are the limitations of using custom UFM components for dynamic content?

Limitations of custom UFM components include relying on fetching external Umbraco documentation for accurate syntax and managing TypeScript manifests, which adds complexity to maintaining dynamic markdown rendering.