mcpField
U
umbraco-bundle

umbraco-bundle

github.com/umbracoDevelopment27388 installsUpdated 6w ago
Repository

About umbraco-bundle

umbraco-bundle is a skill for creating Umbraco backoffice extension bundles. It guides developers through gathering requirements, checking current documentation, and generating manifest and JavaScript or TypeScript bundle files.

Key features

  1. 01Groups extension manifests in one bundle
  2. 02Supports JavaScript and TypeScript manifests
  3. 03Re-exports manifests from multiple files
  4. 04Guides documentation lookup and code generation

Use cases

  1. 01Organizing related backoffice extensions
  2. 02Generating a bundle and package manifest
  3. 03Splitting manifests across feature files

Install

Copy the command and run it in a terminal.

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

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

Details

From the project README

Umbraco Bundle

What is it?

A Bundle is an extension type that points to a single JavaScript file that exports or re-exports Extension Manifests written in JavaScript/TypeScript. It serves as a container for grouping multiple extension manifests together, allowing you to declare manifests in code rather than JSON and organize extensions in a modular way.

Documentation

Always fetch the latest docs before implementing:

Workflow

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What extensions to bundle? TypeScript or JavaScript?
  3. Generate files - Create manifest + bundle file based on latest docs
  4. Explain - Show what was created and how to test

Minimal Examples

Manifest (umbraco-package.json)
{
  "name": "My Package",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "bundle",
      "alias": "My.Package.Bundle",
      "name": "My Package Bundle",
      "js": "/App_Plugins/MyPackage/manifests.js"
    }
  ]
}
Bundle File (manifests.ts)
import type { UmbExtensionManifest } from '@umbraco-cms/backoffice/extension-api';

export const manifests: Array<UmbExtensionManifest> = [
  {
    type: 'dashboard',
    name: 'My Dashboard',
    alias: 'My.Dashboard',
    element: () => import('./dashboard.js'),
    weight: 900,
    meta: {
      label: 'My Dashboard',
      pathname: 'my-dashboard',
    },
    conditions: [
      {
        alias: 'Umb.Condition.SectionAlias',
        match: 'Umb.Section.Content',
      },
    ],
  },
  {
    type: 'headerApp',
    name: 'My Header App',
    alias: 'My.HeaderApp',
    element: () => import('./header-app.js'),
    meta: {
      label: 'My App',
      icon: 'icon-heart',
    },
  },
];
Re-exporting from Multiple Files
// manifests.ts
export * from './dashboards/manifests.js';
export * from './header-apps/manifests.js';
export * from './sections/manifests.js';

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

Comments

Markdown supported