/migrate-beaver-builder-to-bricks

name: migrate-beaver-builder-to-bricks
description: "Use when the user says 'migrate beaver builder to bricks', 'convert bb to bricks', or 'replace beaver builder with bricks'. Reads the Beaver Builder flat node map, maps each module to its Bricks element, and creates draft duplicates for review."
license: MIT
metadata:
  author: Respira for WordPress
  author_url: https://respira.press
  version: 2.2.0
  mcp-server: respira-wordpress
  category: migration

Migrate Beaver Builder to Bricks

**Version:** 2.2.0 **Updated:** 2026-09-13 **Freshly updated:** v2.1.0 adds design-token awareness: conversion writes now register the colors and typography they carry as named design tokens in Bricks' own global styles, and converted pages reference those tokens instead of carrying value copies. Reuse registered tokens instead of re-inlining raw values, and report the registration in the migration summary.

Full-site migration from Beaver Builder to Bricks Builder. Audits every Beaver Builder page, maps modules to their Bricks equivalents, builds a migration plan for approval, and executes page-by-page conversion into Bricks' JSON format — all through duplicates so your live site stays untouched. Use this skill whenever someone mentions migrating from Beaver Builder to Bricks, switching from BB to Bricks, converting Beaver Builder pages to Bricks, or replacing Beaver Builder with Bricks.

What This Skill Does

Beaver Builder and Bricks are both visual page builders, but they differ significantly in architecture. Beaver Builder uses a module-based system with rows, columns, and modules stored in `_fl_builder_data`. Bricks uses a more modern, flexbox-first approach with sections, containers, and elements stored as a JSON array in `_bricks_page_content_2`. The migration requires translating BB's row/column grid into Bricks' container model and mapping each module to its Bricks element equivalent.

This skill reads every Beaver Builder page, extracts the module structure, translates each row/column/module to its Bricks equivalent, and writes the result to duplicate pages in Bricks format — giving you a complete parallel version of your site to review before going live.

**Handles:**

• Row → Bricks Section mapping
• Column structures → Bricks Container with flex layout
• Text Editor module → Bricks Text / Heading elements
• Photo module → Bricks Image element
• Button module → Bricks Button element
• Video module → Bricks Video element
• HTML module → Bricks Code element
• Heading module → Bricks Heading element
• Separator module → Bricks Divider element
• Icon module → Bricks Icon element
• Call to Action module → Bricks Container + child elements
• Custom CSS classes and inline styles

What This Skill Does NOT Do

• Migrate Beaver Builder's saved rows/modules library — these must be recreated in Bricks
• Convert Beaver Themer layouts (headers, footers, archives) — Bricks templates must be built separately
• Replicate exact Beaver Builder animations/effects — Bricks has its own interaction system
• Migrate third-party Beaver Builder add-on modules (PowerPack, UABB, etc.) — flagged for manual handling
• Convert BB's global rows to Bricks' template system — different architectural concept
• Guarantee pixel-perfect visual parity — different rendering engines produce different output

Requirements

• Respira for WordPress plugin installed and connected
• MCP connection active (desktop or WebMCP)
• Beaver Builder active on the source site
• Bricks Builder installed on the target site (can be the same site)
• Read access to scan Beaver Builder content
• Write access to create duplicates with Bricks content

Trigger Phrase

• "migrate beaver builder to bricks"

Alternative Triggers

• "convert beaver builder to bricks"
• "switch from bb to bricks"
• "move beaver builder pages to bricks"
• "replace beaver builder with bricks"
• "beaver builder to bricks migration"
• "migrate bb to bricks"

Builder Technical Context

**Source: Beaver Builder**

• Content stored in post_meta keys `_fl_builder_data` and `_fl_builder_data_settings`
• Module-based structure with rows → columns → modules hierarchy
• Read via `respira_extract_builder_content` with `builder=beaver` or `builder=beaver-builder`
• Module types: `rich-text`, `photo`, `button`, `heading`, `html`, `video`, `icon`, `separator`, `callout`, `cta`, `numbers`, `content-slider`, etc.

**Target: Bricks Builder**

• Content stored in post_meta key `_bricks_page_content_2` as a JSON array
• Each element is an object with `id`, `name`, `parent`, `settings`, `children`
• Write via `respira_inject_builder_content` with `builder=bricks`
• Elements: `section`, `container`, `heading`, `text`, `image`, `button`, `video`, `code`, `divider`, `icon`, etc.

Execution Workflow

Phase 1: Pre-Migration Audit

1. Verify Respira + MCP connection via `respira_get_site_context`. If unavailable, stop and show setup guidance. 2. Detect Beaver Builder presence via `respira_get_builder_info` or `respira_list_plugins`. 3. Inventory and scope the source pages first:

• `respira_find_builder_targets` with `builder=beaver` — a fast, ranked list of every BB-managed page/post before you touch anything
• Fall back to `respira_list_pages` / `respira_list_posts` + `respira_get_builder_info` to confirm builder per item where needed

4. For each BB page, extract content:

• `respira_extract_builder_content` with `builder=beaver`
• Catalog: module types used, row/column structures, custom CSS, third-party modules, saved rows/modules

5. Produce an **Audit Report**:

• Total pages/posts using Beaver Builder
• Module type frequency (how many text editors, photos, buttons, etc.)
• Column layout patterns (common row structures)
• Complexity flags (third-party modules, Beaver Themer, custom CSS, animations)
• Estimated migration difficulty per page (simple / moderate / complex)

Phase 2: Migration Plan

Present a structured migration plan:

##