This lets Claude implement UFM (Umbraco Flavored Markdown) components, which are custom markers that transform into HTML when Umbraco renders markdown. You'd use it when you need dynamic content in markdown fields beyond the built-in markers like localization or property values. Think rendering custom icons with {@icon-document}, highlighting text with {!important}, or injecting any HTML through a simple syntax. The skill pulls from official Umbraco docs and includes the important gotcha that custom element tags must start with umb-, ufm-, or uui- or they get stripped by the sanitizer. It's pretty focused on one thing and handles it with working examples.

skills.sh installs
381
GitHub stars
27
last updated
Aug 21, 2026

Install

$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-ufm-component --agent claude-code

Installs into .claude/skills of the current project.

Files

Umbraco UFM Component

What is it?

UFM (Umbraco Flavored Markdown) Components extend Umbraco's markdown rendering with custom syntax. They allow you to create custom markers that transform into HTML when rendered. This is useful for creating dynamic content like localized strings, property values, or custom UI elements within markdown text. UFM components use special syntax markers (like # for localization or = for values) that get processed into HTML.

Documentation

Always fetch the latest docs before implementing:

Reference Example

The Umbraco source includes a working example:

Location: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/ufm-custom-component/

This example demonstrates a custom UFM component with marker syntax. Study this for production patterns.

Sponsors

Details

Repository
github.com/umbraco/umbraco-cms-backoffice-skills
Categories
Frontend Development, Documentation, .NET & C#
First seen
Jun 3, 2026

More from umbraco/umbraco-cms-backoffice-skills

All 76
1sickn33 avatarreact-modernizationsickn33/antigravity-awesome-skillsreact modernization377skills.sh installs
2existential-birds avatarreact-flow-implementationexistential-birds/beagleImplements React Flow node-based UIs correctly using @xyflow/react. Use when building flow charts, diagrams, visual editors, or node-based applications with Rea374skills.sh installs
3sickn33 avatarangularsickn33/antigravity-awesome-skillsangular372skills.sh installs
4igorwarzocha avatarsecurity-nextjsigorwarzocha/opencode-workflowssecurity nextjs370skills.sh installs
5ihlamury avatarfigma-ui-skillsihlamury/design-skillsFigma's UI design system. Use when building interfaces inspired by Figma's aesthetic - light mode, Inter font, 4px grid.363skills.sh installs
6majiayu000 avatarapp-ui-designmajiayu000/claude-arsenalapp ui design353skills.sh installs