umbraco-ufm-component

Implement custom Umbraco Flavored Markdown components with custom syntax markers.

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-ufm-component-kraftvaerk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-ufm-component
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-ufm-component
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-ufm-component-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers implement custom Umbraco Flavored Markdown (UFM) components, enabling dynamic content rendering within Umbraco's backoffice.

Core Features & Use Cases

  • Custom Syntax: Define unique markers and their corresponding HTML output for dynamic content.
  • Dynamic Content: Integrate localized strings, property values, or custom UI elements directly into markdown.
  • Use Case: Create a UFM component to display the current date and time, or to render a link to a specific content item based on an ID.

Quick Start

Use the umbraco-ufm-component skill to create a new UFM component that renders a highlighted text.

Frequently Asked Questions about umbraco-ufm-component

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

FAQPage Schema
How do I create custom Umbraco Flavored Markdown components in the backoffice?

To create custom Umbraco Flavored Markdown components, you define unique syntax markers that transform into HTML during rendering. This integrates with Umbraco's extension registry to enable dynamic content generation within the backoffice.

Can I inject dynamic content like localized strings into Umbraco markdown?

Yes, you can inject dynamic content like localized strings and property values directly into markdown. Custom UFM components leverage Umbraco foundation APIs to render dynamic UI elements within the backoffice.

How does Umbraco Flavored Markdown syntax transform into HTML?

Umbraco Flavored Markdown syntax transforms into HTML through custom markers defined in your component. When the markdown renders, the extension registry identifies these markers and converts them into the specified HTML output.

What are some use cases for custom UFM components in Umbraco?

Common use cases for custom UFM components include rendering the current date and time dynamically or generating links to specific content items based on an ID directly within your markdown fields.

Do I need Umbraco foundation APIs to build custom markdown extensions?

Yes, building custom markdown extensions relies on Umbraco foundation APIs. These APIs provide the necessary hooks into the extension registry to support localized strings, property values, and custom UI elements.

Are there limitations when defining custom syntax markers for Umbraco markdown?

Custom syntax markers for Umbraco markdown must integrate with the Umbraco extension registry and foundation APIs. You must ensure your custom markers do not conflict with existing markdown syntax to render HTML correctly.