Skills
.Work. You
Rest

umbraco-block-editor-custom-view

Official

Customize Umbraco block previews

Software Engineering#typescript#umbraco#backoffice#custom view#block editor#web component
Authorumbraco
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers create custom visual representations for blocks within Umbraco's Block List, Block Grid, or Block RTE editors, enhancing the editing experience and providing tailored previews.

Core Features & Use Cases

  • Custom Visual Previews: Define unique web components to display block content visually.
  • Themed Previews: Match block previews to specific website themes or branding.
  • Enhanced Editing: Offer specialized visualizations for complex block data.
  • Use Case: Implement a custom view for a "Hero" block that shows a background image preview and styled headline directly in the backoffice.

Quick Start

Use the umbraco-block-editor-custom-view skill to generate a manifest and a basic TypeScript element for a custom view for the 'heroBlock' content type in the block-list editor.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: umbraco-block-editor-custom-view
Download link: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/archive/main.zip#umbraco-block-editor-custom-view

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.