mcpField
U
umbraco-kinds

umbraco-kinds

github.com/umbracoDevelopment27387 installsUpdated 6w ago
Repository

About umbraco-kinds

umbraco-kinds is a skill for building Umbraco backoffice extensions that use Kind presets. It guides developers through checking current documentation and generating kind manifests and extensions that inherit shared defaults.

Key features

  1. 01Guidance for Umbraco Kind presets
  2. 02Fetch current extension documentation
  3. 03Create kind manifests and consuming extensions
  4. 04Share default properties across extensions

Use cases

  1. 01Standardize properties across related extensions
  2. 02Generate a Kind and extensions that use it

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-kinds

After installing, type/umbraco-kindsin Claude Code to confirm it loaded.

Details

From the project README

Umbraco Kinds

What is it?

A Kind is a preset configuration that extensions inherit for consistency. It reduces redundancy by defining default properties that multiple extensions can share. Kinds ensure standardized structures across extensions and simplify definitions by providing predefined properties that extensions automatically inherit.

Documentation

Always fetch the latest docs before implementing:

Workflow

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What extension type? What default properties to share?
  3. Generate files - Create kind manifest + consuming extensions based on latest docs
  4. Explain - Show what was created and how to test

Minimal Examples

Registering a Kind
import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-api';

export const customButtonKind: UmbExtensionManifestKind = {
  type: 'kind',
  alias: 'My.Kind.HeaderAppButton',
  matchType: 'headerApp',
  matchKind: 'button',
  manifest: {
    elementName: 'umb-header-app-button',
  },
};
Using a Kind in an Extension
const manifest = {
  type: 'headerApp',
  kind: 'button',  // Uses the 'button' kind
  name: 'My Header App',
  alias: 'My.HeaderApp',
  meta: {
    label: 'My App',
    icon: 'icon-heart',
    href: '/my-app',
  },
};
Kind with Default Meta Properties
export const cardKind: UmbExtensionManifestKind = {
  type: 'kind',
  alias: 'My.Kind.DashboardCard',
  matchType: 'dashboard',
  matchKind: 'card',
  manifest: {
    elementName: 'my-dashboard-card',
    meta: {
      // Default meta properties
      size: 'medium',
      color: 'default',
    },
  },
};

// Extension inherits defaults, can override
const dashboard = {
  type: 'dashboard',
  kind: 'card',
  alias: 'My.Dashboard',
  name: 'My Dashboard',
  meta: {
    label: 'Stats',
    pathname: 'stats',
    // size and color inherited from kind
  },
};

That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.

Comments

Markdown supported