https://github.com/beenacle/bricks-builder-skill
Code-first website building for Bricks Builder (WordPress) — a Claude Code skill
https://github.com/beenacle/bricks-builder-skill
bricksbuilder claude-code claude-skill wordpress
Last synced: 9 days ago
JSON representation
Code-first website building for Bricks Builder (WordPress) — a Claude Code skill
- Host: GitHub
- URL: https://github.com/beenacle/bricks-builder-skill
- Owner: beenacle
- License: other
- Created: 2026-06-02T08:31:59.000Z (18 days ago)
- Default Branch: main
- Last Pushed: 2026-06-02T09:34:32.000Z (18 days ago)
- Last Synced: 2026-06-02T10:24:18.528Z (18 days ago)
- Topics: bricksbuilder, claude-code, claude-skill, wordpress
- Language: PHP
- Size: 58.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bricks Builder — code-first skill for Claude Code
A [Claude Code](https://claude.com/claude-code) **skill** for building and editing
[Bricks Builder](https://bricksbuilder.io/) (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//SKILL.md`. Clone, then symlink (or copy)
this repo in as `bricks-builder` (the skill's internal name):
```bash
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`](SKILL.md) for the full workflow and principles.
## Contents
- [`SKILL.md`](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](LICENSE) for the documentation and example assets in this repository.