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.

About

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

Automated manifest generation for preview app extensions
1 GitHub stars
Custom Lit-based element implementation for backoffice UI
Seamless integration with the Umbraco Extension Registry
Pre-configured patterns for device simulation and preview resizing
Dynamic documentation fetching for up-to-date Umbraco standards

Use Cases

Building a multi-device simulator to preview content on mobile and tablet screens
Adding an SEO analysis panel within the preview interface for real-time optimization
Implementing 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

GitHub