Bricks Builder — code-first skill for Claude Code

A Claude Code skill for building and editing Bricks Builder (WordPress) websites by generating valid Bricks element JSON and importing it — without operating the visual builder.

Claude Code can't drag-and-drop in a canvas. This skill is the schema and workflow for producing correct Bricks data: the postmeta data model, the element/control schema, JSON import/export, query loops, dynamic data, conditions, components, global classes / theme styles, responsive behavior, the Code element's security model, Advanced Themer interop, and a headless screenshot → compare → fix verification loop for pixel matching.

Targets Bricks 2.3.x and Advanced Themer 3.3.x. Bricks evolves between versions — when your install differs, treat anything version-specific as a starting point and confirm against the running site.

Install

Skills load from ~/.claude/skills/<name>/SKILL.md. Clone, then symlink (or copy) this repo in as bricks-builder (the skill's internal name):

git clone https://github.com/beenacle/bricks-builder-skill.git
mkdir -p ~/.claude/skills
ln -s "$(pwd)/bricks-builder-skill" ~/.claude/skills/bricks-builder

Reload Claude Code; type / and look for bricks-builder, or just ask for Bricks work and it auto-loads from the skill description.

The workflow

1. Model the design as a Bricks element tree using native elements.
2. Style with global classes (BEM); never by id.
3. Emit import JSON in the exact page/template shape.
4. Import to staging — assets/php-importer.php via wp eval-file, or the Bricks admin importer; then wp bricks regenerate_assets if CSS loading is "External files".
5. Verify by headless screenshot, diff against the design, fix, re-import.

See SKILL.md for the full workflow and principles.

Contents

• SKILL.md — workflow, principles, and the reference map.
• references/01–14 — data model, import/export, element catalog, pages & templates, components, query loops, dynamic data, conditions, styling, responsive, the Code element, Advanced Themer, verification, and a catalog of silent rendering gotchas.
• assets/ — real-shape example JSON (page, component, query loop) and a headless php-importer.php that mirrors how Bricks imports templates.

Disclaimer

Independent, unofficial documentation. Not affiliated with, authorized by, or endorsed by Bricks (Bricks Technology Ltd.) or Advanced Themer. "Bricks", "Bricks Builder", and "Advanced Themer" are trademarks of their respective owners.

This repository contains no Bricks or Advanced Themer source code — only original documentation and example assets. Those plugins are commercial, GPL-licensed products you must license and obtain from their vendors.

License

MIT for the documentation and example assets in this repository.