umbraco-collection-view

Create custom Umbraco backoffice collection views with Lit elements.

1|Updated May 21, 2026
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-collection-view-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-collection-view
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-collection-view
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-collection-view-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps Umbraco developers replace default collection list rendering with a purpose-built UI (for example tables, grids, or cards) tailored to how users need to browse and understand entities.

Core Features & Use Cases

  • Implements Collection Views: Define how collection items are displayed inside Umbraco backoffice.
  • Supports Dynamic Rendering: Use collection context and observe items/properties to render real data in a custom Lit-based element.
  • Adds Conditional Availability: Make the view appear only for specific collection aliases (e.g., documents, media) and support deep-linking via pathName.

Quick Start

Ask the skill to implement a “Cards” collection view for your chosen collection alias with the required manifest and a Lit view element that renders item fields from collection context.

Frequently Asked Questions about umbraco-collection-view

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom collection view in the Umbraco backoffice?▼

To create a custom Umbraco collection view, you generate a collectionView manifest with matching conditions and implement a Lit-based view element that consumes UMB_COLLECTION_CONTEXT to observe items and properties for reactive UI output.

Can I display Umbraco collection items as cards instead of a default list?▼

Yes, you can replace default collection list rendering with purpose-built UI layouts like tables, grids, or cards by defining a custom view element that renders item fields dynamically from the collection context.

How do I make a custom Umbraco collection view appear only for specific collection aliases?▼

You add conditional availability to your collection view manifest by specifying matching conditions for collection aliases, such as documents or media, and support deep-linking through a defined pathName.

What is UMB_COLLECTION_CONTEXT used for in Umbraco extension development?▼

UMB_COLLECTION_CONTEXT is the context consumed by your custom Lit view element to observe collection items and properties, enabling dynamic and reactive rendering of entity data in the Umbraco backoffice.

Does building an Umbraco collection view require registering it in the extension registry?▼

Yes, generating a correct collectionView manifest and registering it in the Umbraco extension registry is required to define how collection items are displayed and to apply the view to specific collection aliases.