Does this skill help with the new Umbraco Backoffice?

Yes, it is specifically designed for the modern Umbraco Backoffice (v14+) which uses Web Components and the Extension Registry.

How does this skill handle Umbraco documentation updates?

The skill includes a mandatory workflow step to fetch the latest official Umbraco foundation and extension docs before generating code.

Can I build a mobile simulator using this skill?

Absolutely. The skill includes specific implementation patterns for resizing the preview iframe to simulate various device widths.

What is a Preview App Provider in Umbraco?

A Preview App Provider is an extension that adds custom items or tools to the Umbraco preview window, enabling features like device simulation or SEO analysis.

Umbraco Preview App Provider

Name: Umbraco Preview App Provider
Author: umbraco

byumbraco

•

Content Management

Extends the Umbraco CMS backoffice by implementing custom preview applications for device simulation and content analysis.

The Umbraco Preview App Provider skill empowers developers to build and integrate custom preview tools directly into the modern Umbraco CMS backoffice. By leveraging the Umbraco Extension Registry and Lit-based web components, this skill facilitates the creation of interactive preview features—such as responsive device simulators, SEO analysis overlays, and accessibility validators—allowing content editors to visualize and verify their work across various contexts before publishing.

Key Features

01Automated manifest generation for preview app extensions

021 GitHub stars

03Custom Lit-based element implementation for backoffice UI

04Seamless integration with the Umbraco Extension Registry

05Pre-configured patterns for device simulation and preview resizing

06Dynamic documentation fetching for up-to-date Umbraco standards

Use Cases

01Building a multi-device simulator to preview content on mobile and tablet screens

02Adding an SEO analysis panel within the preview interface for real-time optimization

03Implementing accessibility auditing tools to highlight WCAG issues during the preview stage

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-preview-app-provider

For use in Claude.ai and ChatGPT

Download Skill