Agent Skillsumbraco/Umbraco-CMS › general-create-extension-type

general-create-extension-type

GitHub

为Umbraco后台注册中心创建新的扩展类型,支持仪表盘、侧边栏等自定义扩展的注册与配置。

src/Umbraco.Web.UI.Client/.claude/skills/general-create-extension-type/SKILL.md umbraco/Umbraco-CMS

Trigger Scenarios

需要定义新的Umbraco扩展类型 添加支持条件加载或API/UI混合的新扩展

Install

npx skills add umbraco/Umbraco-CMS --skill general-create-extension-type -g -y
More Options

Non-standard path

npx skills add https://github.com/umbraco/Umbraco-CMS/tree/main/src/Umbraco.Web.UI.Client/.claude/skills/general-create-extension-type -g -y

Use without installing

npx skills use umbraco/Umbraco-CMS@general-create-extension-type

指定 Agent (Claude Code)

npx skills add umbraco/Umbraco-CMS --skill general-create-extension-type -a claude-code -g -y

安装 repo 全部 skill

npx skills add umbraco/Umbraco-CMS --all -g -y

预览 repo 内 skill

npx skills add umbraco/Umbraco-CMS --list

SKILL.md

Frontmatter
{
    "name": "general-create-extension-type",
    "description": "Create a new extension type for the Umbraco backoffice extension registry. Use when adding a new type of extension that can be registered via manifests (e.g., a new dashboard type, a new sidebar app type, a new toolbar extension type). Any package can define extension types.",
    "allowed-tools": "Read, Write, Edit, Grep, Glob"
}

Create Extension Type

Create a new extension type for the Umbraco backoffice extension registry.

What you need from the user

  1. Type name — The type string used in manifests (e.g., 'dashboard', 'searchProvider')
  2. Purpose — What this extension type does (determines which base interface to extend)
  3. Meta shape — What configuration the extension needs from consumers
  4. Whether it needs conditions — Should extensions of this type support conditional loading?
  5. Whether it has an element, API, or both — Does it render UI, provide logic, or both?

Files to create

All files go in the relevant feature directory (e.g., src/packages/my-package/my-feature/).

my-feature/
├── my-feature.extension.ts     # Type definition + global declaration
├── my-feature-element.interface.ts  # Element interface (if element-based)
└── types.ts                    # Meta interface (if needed)

Step 1: Choose the base manifest interface

Your extension... Extend from Import
Renders a custom element ManifestElement<T> @umbraco-cms/backoffice/extension-api
Provides an API class (no UI) ManifestApi<T> @umbraco-cms/backoffice/extension-api
Has both element and API ManifestElementAndApi<E, A> @umbraco-cms/backoffice/extension-api
Needs conditional loading Also extend ManifestWithDynamicConditions<UmbExtensionConditionConfig> @umbraco-cms/backoffice/extension-api

Step 2: Define the manifest interface

// my-feature.extension.ts
import type { ManifestElement, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';

export interface MetaMyFeature {
	label?: string;
	// ... properties consumers configure via meta
}

export interface ManifestMyFeature
	extends ManifestElement<UmbMyFeatureElement>,
		ManifestWithDynamicConditions<UmbExtensionConditionConfig> {
	type: 'myFeature';
	meta: MetaMyFeature;
}

declare global {
	interface UmbExtensionManifestMap {
		umbMyFeature: ManifestMyFeature;
	}
}

Key rules

  • The type property must be a string literal type (not string)
  • The key in UmbExtensionManifestMap must be unique across the entire codebase
  • The declare global block is what makes the registry type-aware — without it, the type won't be recognized

Step 3: Define the element/API interface (if needed)

// my-feature-element.interface.ts
import type { UmbElement } from '@umbraco-cms/backoffice/element-api';

export interface UmbMyFeatureElement extends UmbElement {
	// Properties/methods that implementations must provide
}

Step 4: If the type supports kinds

Add a union type for the base manifest plus kind-specific variants:

export interface ManifestMyFeatureButtonKind extends ManifestMyFeature {
	type: 'myFeature';
	kind: 'button';
	meta: MetaMyFeatureButtonKind;
}

export interface MetaMyFeatureButtonKind extends MetaMyFeature {
	icon: string;
}

// Union all variants in the global declaration
declare global {
	interface UmbExtensionManifestMap {
		umbMyFeature: ManifestMyFeature | ManifestMyFeatureButtonKind;
	}
}

Step 5: Export from the package barrel

Add the type export to the package's index.ts:

export type * from './my-feature/my-feature.extension.js';

Use export type * since these are type-only exports.

Step 6: Register manifests that use this type

Verify the type works by creating a test manifest:

const manifest: UmbExtensionManifest = {
	type: 'myFeature',
	alias: 'Umb.MyFeature.Test',
	name: 'Test My Feature',
	element: () => import('./my-feature-test.element.js'),
	meta: {
		label: 'Test',
	},
};

TypeScript should provide autocomplete for type and validate meta against MetaMyFeature.

Checklist

  • Manifest interface extends the correct base (ManifestElement, ManifestApi, or ManifestElementAndApi)
  • type property is a string literal, not string
  • declare global block adds to UmbExtensionManifestMap with a unique key
  • Meta interface is defined separately and exported
  • Element/API interface is defined if the type renders UI or provides logic
  • If kinds are supported: kind-specific interfaces extend the base with literal kind property
  • Type is exported from the package's index.ts
  • Compiles: npm run compile

Version History

  • c1fa32e Current 2026-08-20 13:48

Same Skill Collection

.claude/skills/umb-bump-version/SKILL.md
.claude/skills/umb-release-notes/SKILL.md
src/Umbraco.Web.UI.Client/.claude/skills/core-add-module/SKILL.md
src/Umbraco.Web.UI.Client/.claude/skills/general-add-localization/SKILL.md
src/Umbraco.Web.UI.Client/.claude/skills/general-add-value-type/SKILL.md
src/Umbraco.Web.UI.Client/.claude/skills/general-create-condition/SKILL.md
src/Umbraco.Web.UI.Client/.claude/skills/general-create-kind/SKILL.md
src/Umbraco.Web.UI.Client/.claude/skills/general-create-package/SKILL.md
src/Umbraco.Web.UI.Client/.claude/skills/general-create-repository/SKILL.md
src/Umbraco.Web.UI.Client/.claude/skills/general-create-workspace/SKILL.md
src/Umbraco.Web.UI.Client/.claude/skills/general-deprecate-api/SKILL.md
.claude/skills/umb-review/SKILL.md
.claude/skills/umb-update-openapi/SKILL.md
.claude/skills/umb-update-server-dependencies-for-minor/SKILL.md

Metadata

Files
0
Version
c1fa32e
Hash
8fedee1c
Indexed
2026-08-20 13:48

- 위키
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-25 08:54
浙ICP备14020137号-1 $방문자$