page-builder-blocks

What problem does it solve?

This Skill provides a standardized framework and tooling for creating, managing, and integrating reusable content blocks within a Next.js page builder, ensuring consistency and efficiency in web development.

Core Features & Use Cases

• Standardized Block Structure: Defines a clear 5-file structure (config.ts, schema.ts, fields.ts, component.tsx, index.ts) for all blocks.
• Schema Definition & Validation: Uses Zod for defining block data schemas, extending a base schema for common properties.
• Admin UI Field Definitions: Specifies how block fields are presented in an admin interface.
• Component Rendering: Provides the React component for each block.
• Use Case: When developing a new feature section for a website, use this Skill to scaffold a new block, define its editable fields (like title, description, images), and implement its visual representation, ensuring it integrates seamlessly with the existing page builder.

Quick Start

Use the page-builder-blocks skill to scaffold a new block with the slug 'my-new-block'.