Agent skill
umbraco-dynamic-root
Implement dynamic root origins and query steps in Umbraco backoffice using official docs
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/umbraco-dynamic-root
SKILL.md
Umbraco Dynamic Root
What is it?
Dynamic Roots allow content pickers to have a starting point (origin) that is determined dynamically rather than being a fixed node. This includes two extension types:
- Dynamic Root Origin: Defines where the picker starts (e.g., current page, site root, nearest ancestor of type)
- Dynamic Root Query Step: Defines navigation steps from the origin (e.g., find nearest ancestor, get children of type)
These enable flexible content picker configurations that adapt based on context.
Documentation
Always fetch the latest docs before implementing:
- Extension Types: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types
- Content Picker: https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/content-picker
- Foundation: https://docs.umbraco.com/umbraco-cms/customizing/foundation
Workflow
- Fetch docs - Use WebFetch on the URLs above
- Ask questions - What starting point logic? What query steps needed?
- Generate files - Create manifest(s) based on latest docs
- Explain - Show what was created and how to test
Minimal Examples
Dynamic Root Origin Manifest
import type { ManifestDynamicRootOrigin } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestDynamicRootOrigin = {
type: 'dynamicRootOrigin',
alias: 'My.DynamicRootOrigin.SiteRoot',
name: 'Site Root Origin',
meta: {
originAlias: 'SiteRoot',
label: 'Site Root',
description: 'Start from the root of the current site',
icon: 'icon-home',
},
};
export const manifests = [manifest];
Dynamic Root Query Step Manifest
import type { ManifestDynamicRootQueryStep } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestDynamicRootQueryStep = {
type: 'dynamicRootQueryStep',
alias: 'My.DynamicRootQueryStep.NearestBlog',
name: 'Nearest Blog Query Step',
meta: {
queryStepAlias: 'NearestBlog',
label: 'Nearest Blog',
description: 'Find the nearest blog ancestor',
icon: 'icon-article',
},
};
export const manifests = [manifest];
Multiple Origins and Steps
import type { ManifestDynamicRootOrigin, ManifestDynamicRootQueryStep } from '@umbraco-cms/backoffice/extension-registry';
const originManifests: ManifestDynamicRootOrigin[] = [
{
type: 'dynamicRootOrigin',
alias: 'My.DynamicRootOrigin.CurrentPage',
name: 'Current Page Origin',
meta: {
originAlias: 'CurrentPage',
label: 'Current Page',
description: 'Start from the page being edited',
icon: 'icon-document',
},
},
{
type: 'dynamicRootOrigin',
alias: 'My.DynamicRootOrigin.Parent',
name: 'Parent Page Origin',
meta: {
originAlias: 'Parent',
label: 'Parent Page',
description: 'Start from the parent of current page',
icon: 'icon-arrow-up',
},
},
];
const queryStepManifests: ManifestDynamicRootQueryStep[] = [
{
type: 'dynamicRootQueryStep',
alias: 'My.DynamicRootQueryStep.Children',
name: 'Children Query Step',
meta: {
queryStepAlias: 'Children',
label: 'Children',
description: 'Get all child pages',
icon: 'icon-tree',
},
},
{
type: 'dynamicRootQueryStep',
alias: 'My.DynamicRootQueryStep.Ancestors',
name: 'Ancestors Query Step',
meta: {
queryStepAlias: 'Ancestors',
label: 'Ancestors',
description: 'Get ancestor pages',
icon: 'icon-navigation-up',
},
},
];
export const manifests = [...originManifests, ...queryStepManifests];
Backend Implementation Required
Dynamic roots require backend C# implementation to handle the actual query logic:
// Example C# implementation for a custom origin
public class SiteRootDynamicRootOrigin : IDynamicRootOrigin
{
public string OriginAlias => "SiteRoot";
public Task<Guid?> GetOriginAsync(Guid contentKey, string? entityType)
{
// Return the site root GUID based on the content's position
// Implementation depends on your site structure
return Task.FromResult<Guid?>(GetSiteRootForContent(contentKey));
}
}
// Example C# implementation for a custom query step
public class NearestBlogQueryStep : IDynamicRootQueryStep
{
public string QueryStepAlias => "NearestBlog";
public Task<IEnumerable<Guid>> ExecuteAsync(Guid originKey, string? entityType)
{
// Find nearest blog ancestor from the origin
// Return matching content GUIDs
return Task.FromResult(FindNearestBlogAncestors(originKey));
}
}
// Register in Composer
public class DynamicRootComposer : IComposer
{
public void Compose(IUmbracoBuilder builder)
{
builder.DynamicRootSteps()
.AddOrigin<SiteRootDynamicRootOrigin>()
.AddQueryStep<NearestBlogQueryStep>();
}
}
Origin Meta Properties
| Property | Description |
|---|---|
originAlias |
Unique identifier matching backend implementation |
label |
Display name in picker configuration |
description |
Help text explaining the origin |
icon |
Icon shown in configuration UI |
Query Step Meta Properties
| Property | Description |
|---|---|
queryStepAlias |
Unique identifier matching backend implementation |
label |
Display name in picker configuration |
description |
Help text explaining the query step |
icon |
Icon shown in configuration UI |
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?