What problem does it solve?
Developers building sites with Webiny's Website Builder must correctly wire React components into the iframe-based editor, type input values that are not always primitives, and keep theme files in sync across CSS, Tailwind, and Next.js. This Skill provides the exact patterns, type shapes, and registration APIs to do that without trial and error.
Core Features & Use Cases
- Editor Component Creation: Build React components and register them with createComponent, defining configurable inputs (text, number, boolean, color, select, file, lexical, object, slot, tags) with correct TypeScript prop types.
- Theming System: Configure theme.css custom properties, createTheme registration with colors and typography, and the Tailwind bridge so tokens like bg-primary work in components.
- CMS Data Integration: Build async Server Components that fetch Headless CMS entries via the Webiny SDK at render time.
- Use Case: A developer needs a FeatureCard component with an image picker and rich text. This Skill shows that file inputs are objects with src/width/height (not strings) and lexical inputs are { html, state } objects, preventing runtime crashes.
Quick Start
Ask the assistant to create a Website Builder editor component with a headline text input and an image input, registered with createComponent in the editorComponents index file.
