skills.rest
webdevarif
webdevarifCOMMUNITY
Explore all skills by this author →
Website𝕏@webdevarifGitHub

neuro-theme-engine

Builds section-based theme systems with live preview, CSS variables, and React component registries.

Updated Apr 18, 2026
Search Tags:#react#css variables#cms#page builder#live preview#theme engine#section schema
One-click install
npx skills add https://github.com/webdevarif/claude-skills --skill neuro-theme-engine-webdevarif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neuro-theme-engine
Source: https://github.com/webdevarif/claude-skills/tree/main/neuro-theme-engine
Command: npx skills add https://github.com/webdevarif/claude-skills --skill neuro-theme-engine-webdevarif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a customizable theme system for a CMS or website builder requires coordinating section schemas, template rendering, live preview, and a settings editor. This Skill provides the architecture and code patterns to implement a Shopify-style theme engine in React without designing each subsystem from scratch. ## Core Features & Use Cases - Section/Block Architecture: Define sections with JSON schemas (settings, blocks, presets) and render them through a React component registry with error boundaries. - Live Preview System: Synchronize a theme editor UI with an iframe preview via postMessage for real-time setting updates, section reordering, and device-width toggling. - CSS Variable Theming: Generate CSS custom properties from a theme.json file covering colors, typography, spacing, and border radii. - Use Case: You are adding a visual page builder to a multi-tenant e-commerce platform. Use this Skill to scaffold the section registry, dynamic settings panel, Monaco code editor integration, and drag-and-drop section management. ## Quick Start Use the theme engine skill to scaffold a section-based theme system with a hero section, live iframe preview, and CSS variable theming for my React CMS project.

Frequently Asked Questions about neuro-theme-engine

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a Shopify-style section system in React?▼

Define each section with a JSON schema declaring settings, blocks, and presets, then map section types to React components in a registry. A PageRenderer iterates template sections, looks up components by type, and wraps each in an error boundary.

How to implement live preview in a theme editor with iframes?▼

Use postMessage between the editor window and the preview iframe. The editor sends messages like setting:update and sections:reorder, while the preview listens, updates React state, and posts back section:click events for selection sync.

How do I generate CSS variables from a theme.json file?▼

Write a generator function that maps theme.json settings for colors, typography, spacing, and borders into :root CSS custom properties. For live updates, call document.documentElement.style.setProperty with the variable name and new value.

Should I build a page builder from scratch or use Puck or Craft.js?▼

The Skill explicitly warns against building from scratch when libraries like Puck, Craft.js, or GrapesJS exist. Analyze the existing project first and extend established patterns rather than replacing them with a custom implementation.

What are common mistakes when building a theme engine?▼

Common mistakes include storing the theme as one giant JSON blob, rendering unsanitized user HTML, skipping postMessage origin checks, eager-loading all sections instead of code splitting, and re-rendering the entire preview on every setting change.

Related Skills

Explore More Software Engineering Skills→
blink-newblink-new
1

kanban-dnd

Implements kanban board drag-and-drop with @dndkit collision detection and snapping modifiers.

Official
Advanced
lynxmarkolynxmarko

shopify-liquid

Render dynamic Shopify storefront content using Liquid templates.

Community
Intermediate
DevelopersGlobalDevelopersGlobal
65

ai-output-validation

Validate and sanitize AI-generated outputs against JSON Schema.

Official
Advanced
littleCarelesslittleCareless

grapesjs

Scaffold GrapesJS editor modules, components, and plugins with React integration patterns.

Community
Advanced