Umbraco Preview App Provider

This lets Claude build custom preview apps for Umbraco's backoffice, the tools that show up in the content preview menu when editors are checking their work. Think device simulators, accessibility checkers, or SEO analyzers. The skill fetches current docs from docs.umbraco.com and generates the TypeScript manifest plus Lit element needed to hook into the preview system. It's narrow in scope but useful if you're extending Umbraco's editing experience. The examples show how to toggle preview modes and resize iframes, which covers most preview app patterns. One caution: you need to understand the preview iframe context to do anything meaningful beyond basic UI.

skills.sh installs: 393
GitHub stars: 27
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-preview-app-provider --agent claude-code

Installs into .claude/skills of the current project.

Files

Umbraco Preview App Provider

What is it?

Preview App Providers add custom items to the preview window menu in Umbraco. When content editors preview their content, these apps appear in the preview menu allowing additional functionality like device simulation, accessibility checks, SEO analysis, or other preview-related tools.

Documentation

Always fetch the latest docs before implementing:

Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
Extension Registry: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
Umbraco Element: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/umbraco-element

Related Foundation Skills

Umbraco Element: Base class for creating UI components
- Reference skill: umbraco-umbraco-element
Context API: When accessing preview state
- Reference skill: umbraco-context-api