Skills
.Work. You
Rest

theme-live-preview

Community

Debug live theme previews in Payload CMS.

Software Engineering#debugging#integration#payload-cms#live-preview#theme-management#css-sync#preview-panel
Authorvitakili
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Wire up and debug live theme preview for Payload CMS theme-management — the native Payload Live Preview iframe (with mobile/tablet/desktop breakpoints), the in-admin device + light/dark preview panels, and the ThemeLivePreviewSync client component that applies theme CSS live without a full save.

Core Features & Use Cases

  • In-admin preview panels with a device switcher (mobile/tablet/desktop) and a light/dark toggle, enabling instant visual feedback.
  • Native Payload Live Preview iframe with configurable breakpoints and URL resolver to preview theme changes in real time.
  • Live CSS synchronization via ThemeLivePreviewSync that applies style updates without requiring a page refresh or save.
  • Debug guidance for common issues (missing breakpoints, non-responsive panels, broken CSS sync) across admin and preview iframe.

Quick Start

Open the Theme Management plugin in Payload, enable live preview, and test both the in-admin panels and the preview iframe to verify live theme updates.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: theme-live-preview
Download link: https://github.com/vitakili/payload-plugins/archive/main.zip#theme-live-preview

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 510,000+ vetted skills library on demand.