Agent skill

umbraco-package-view

Implement package views in Umbraco backoffice using official docs

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/umbraco-package-view

SKILL.md

Umbraco Package View

What is it?

Package Views provide custom UI panels for installed packages in Umbraco. They appear in the Packages section and allow package developers to create dedicated configuration or information pages for their packages. When a user clicks on an installed package, the package view is displayed as a modal or panel.

Documentation

Always fetch the latest docs before implementing:

Related Foundation Skills

  • Umbraco Element: Base class for creating UI components

    • Reference skill: umbraco-umbraco-element

  • Modals: Package views are displayed in modal context

    • Reference skill: umbraco-modals

Workflow

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What package? What configuration options?
  3. Generate files - Create manifest + element based on latest docs
  4. Explain - Show what was created and how to test

Minimal Examples

Manifest (manifests.ts)

typescript
import type { ManifestPackageView } from '@umbraco-cms/backoffice/packages';

export const manifests: Array<ManifestPackageView> = [
  {
    type: 'packageView',
    alias: 'My.PackageView',
    name: 'My Package View',
    element: () => import('./my-package-view.element.js'),
    meta: {
      packageName: 'My Package',
    },
  },
];

Element Implementation with Lit (my-package-view.element.ts)

typescript
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';

@customElement('my-package-view')
export class MyPackageViewElement extends UmbModalBaseElement {
  override render() {
    return html`
      <umb-body-layout headline="My Package">
        <uui-box>
          <h2>Package Configuration</h2>
          <p>Configure your package settings here.</p>

          <uui-form>
            <uui-form-layout-item>
              <uui-label slot="label">Setting 1</uui-label>
              <uui-input></uui-input>
            </uui-form-layout-item>
          </uui-form>
        </uui-box>

        <div slot="actions">
          <uui-button @click=${this.#onClose} label="Close"></uui-button>
          <uui-button look="primary" @click=${this.#onSave} label="Save"></uui-button>
        </div>
      </umb-body-layout>
    `;
  }

  #onClose() {
    this.modalContext?.reject();
  }

  #onSave() {
    // Save logic here
    this.modalContext?.submit();
  }
}

export default MyPackageViewElement;

Vanilla JS Element (my-package-view.js)

javascript
const template = document.createElement('template');
template.innerHTML = `
  <umb-body-layout>
    <h1 slot="header">My Package</h1>

    <uui-box>
      <p>Package information and settings</p>
    </uui-box>

    <uui-action-bar slot="footer-info">
      <uui-button look="primary" type="button">Close</uui-button>
    </uui-action-bar>
  </umb-body-layout>
`;

export default class MyPackageViewElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.shadowRoot.querySelector('uui-button').addEventListener('click', this.onClick.bind(this));
  }

  onClick() {
    this.modalContext.close();
  }
}

customElements.define('my-package-view', MyPackageViewElement);

Interface Reference

typescript
interface ManifestPackageView extends ManifestElement {
  type: 'packageView';
  meta: MetaPackageView;
}

interface MetaPackageView {
  packageName: string;  // Must match the package name in umbraco-package.json
}

Package Integration

The package view is linked by matching meta.packageName with your package's name in umbraco-package.json:

json
{
  "$schema": "../../umbraco-package-schema.json",
  "name": "My Package",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "packageView",
      "alias": "My.PackageView",
      "name": "My Package View",
      "element": "/App_Plugins/MyPackage/my-package-view.js",
      "meta": {
        "packageName": "My Package"
      }
    }
  ]
}

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.

majiayu000/claude-skill-registry

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.

163 31
Explore
majiayu000/claude-skill-registry

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.

163 31
Explore
majiayu000/claude-skill-registry

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.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

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.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results