
Umbraco Ufm Component
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-codeInstalls 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:
- Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
- Extension Registry: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
- UFM: https://docs.umbraco.com/umbraco-cms/model-your-content/property-editors/umbraco-flavored-markdown
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- Umbraco Validation Context381
- Umbraco E2e Testing380
- Umbraco Msw Testing379
- Umbraco Unit Testing374
- Umbraco Test Builders370
- Umbraco Testing368
- Umbraco Backoffice447
- Umbraco Controllers418
- Umbraco Dashboard418
- Umbraco Extension Template413
- Umbraco Quickstart406
- Umbraco Openapi Client405
- Umbraco Property Editor Ui405
- Umbraco Extension Registry403
- Umbraco Notifications403
- Umbraco Add Extension Reference402
- Umbraco Context Api402
- Umbraco Routing401
- Umbraco Entity Create Option Action400
- Umbraco Menu Items400
- Umbraco Mfa Login Provider400
- Umbraco Repository Pattern400
- Umbraco Auth Provider399
- Umbraco Dynamic Root399