umbraco-collection-view

Generate Umbraco collection view manifests and LitElement components for custom layouts.

26|13|Updated Nov 30, 2025
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-collection-view
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-collection-view
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-collection-view
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-collection-view

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill allows developers to create custom ways of displaying lists of data within the Umbraco backoffice, moving beyond the default table view.

Core Features & Use Cases

  • Custom Views: Implement unique visual layouts like cards, grids, or specialized tables for collections.
  • Dynamic Data Display: Adapt how data is presented based on collection type and user-defined properties.
  • Use Case: Create a "card" view for media items in Umbraco, showing image thumbnails and basic metadata, making it easier to visually identify assets.

Quick Start

Generate a new collection view manifest and element for displaying Umbraco media items as cards.

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?

You create a custom collection view by generating a manifest file and a LitElement-based view component. This allows you to define custom layouts like cards or specialized tables for Umbraco collections such as Media, Documents, or Members.

Can I display Umbraco media items as a card grid instead of a default table?

Yes, you can display Umbraco media items as a card grid. By implementing custom LitElement view components, you can present image thumbnails and metadata visually instead of using the default table layout provided by the Umbraco backoffice.

What is a LitElement component used for in Umbraco collection customization?

A LitElement component in Umbraco collection customization is used to implement the visual rendering of custom layouts. It dynamically displays collection data based on the defined properties and specific collection type.

Do I need to understand the Umbraco Context API to build custom backoffice views?

Yes, understanding the Umbraco Context API is required to build custom backoffice views. You need it to retrieve collection data dynamically within your LitElement components for accurate display in the backoffice.

What types of Umbraco collections support custom view layouts?

Umbraco collections that support custom view layouts include Media, Documents, and Members. You can implement specialized layouts for these collections by defining custom manifest files and corresponding view components.