Agent SkillsAgent Skills
umbraco

umbraco-entry-point

@umbraco/umbraco-entry-point
umbraco
18
5 forks
Updated 3/31/2026
View on GitHub

Implement entry points in Umbraco backoffice using official docs

Installation

$npx agent-skills-cli install @umbraco/umbraco-entry-point
Claude Code
Cursor
Copilot
Codex
Antigravity

Details

Pathplugins/umbraco-backoffice-skills/skills/umbraco-entry-point/SKILL.md
Branchmain
Scoped Name@umbraco/umbraco-entry-point

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

npx agent-skills-cli list

Skill Instructions


name: umbraco-entry-point description: Implement entry points in Umbraco backoffice using official docs version: 1.0.0 location: managed allowed-tools: Read, Write, Edit, WebFetch

Umbraco Entry Point

What is it?

Entry Points are extensions that execute JavaScript code when the Umbraco backoffice starts up. The Backoffice Entry Point runs after user authentication and is used for initialization logic, loading external libraries, registering UI extensions dynamically, or including global CSS. An optional onUnload function handles cleanup.

Documentation

Always fetch the latest docs before implementing:

Workflow

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What initialization is needed? Any external libraries? Cleanup required?
  3. Generate files - Create manifest + entry point based on latest docs
  4. Explain - Show what was created and how to test

Minimal Examples

Manifest (umbraco-package.json)

{
  "name": "My Package",
  "extensions": [
    {
      "type": "backofficeEntryPoint",
      "alias": "My.EntryPoint",
      "name": "My Entry Point",
      "js": "/App_Plugins/MyPackage/index.js"
    }
  ]
}

Implementation (index.ts)

import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';

export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
  console.log('My package initialized');

  // Register extensions dynamically
  extensionRegistry.register({
    type: 'dashboard',
    alias: 'My.Dashboard',
    name: 'My Dashboard',
    element: () => import('./dashboard.js'),
    meta: {
      label: 'My Dashboard',
      pathname: 'my-dashboard'
    }
  });
};

// Optional cleanup
export const onUnload = () => {
  console.log('My package unloaded');
};

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