bricks-skills

Bricks Builder Skill

An AI skill for one-shotting Bricks Builder designs as JSON — hero sections, full landing pages, headers/footers, query loops with faceted filters, ACF-driven layouts, conditions, animations, and popups. Every settings key and value shape is verified against the Bricks 2.3.6 theme source, not guessed.

Want the agent to edit the live site, not just hand you JSON? Pair this skill with Site Agent, my free WordPress MCP plugin that runs Bricks' own abilities on Bricks 2.4+. How it works.

What's inside

bricks-skills/            ← the repo is the skill
├── SKILL.md              ← start here: workflow, rules, routing table
├── references/           ← 20 focused references (loaded on demand)
│   ├── json-formats.md       clipboard / template / postmeta formats + validation
│   ├── style-settings.md     every _setting + exact JSON value shapes
│   ├── elements.md           full element catalog + nestable structures
│   ├── layout-recipes.md     grids, heroes, cards, overlap, sticky, full pages
│   ├── query-loops.md        hasLoop + query JSON for posts/terms/users
│   ├── query-filters.md      live search, facets, sort, AJAX pagination
│   ├── dynamic-data.md       {tags}, filters, args, {echo:}
│   ├── acf-providers.md      ACF deep dive (repeaters, groups, flexible) + Meta Box etc.
│   ├── conditions.md         _conditions JSON (incl. dynamic data conditions)
│   ├── interactions.md       _interactions, full animation list, recipes
│   ├── popups.md             popup settings, triggers, limits, AJAX context
│   ├── templates.md          template types, conditions, header behaviors
│   ├── components-classes.md components, global classes/variables, palettes
│   ├── theme-styles.md       theme styles, breakpoints, CSS pipeline
│   ├── external-assets.md   reference remote images/video/SVG/icons by URL
│   └── forms / woocommerce / hooks / custom-elements / assets-permissions
└── patterns/              ← 17 validated, paste-ready JSON files (see INDEX.md)

Install & use

The repo is the skill: a SKILL.md router → on-demand references/ → paste-ready patterns/. Give it to any AI tool two ways:

• Point at it — clone the repo, then aim your tool's instruction/rules file at SKILL.md (it routes to the right reference on demand).
• Paste it — drop SKILL.md + the one reference your task needs into the chat. The references are self-contained.

Grab the files once:

git clone https://github.com/wpgaurav/bricks-skills.git

Claude Code

Install as a global skill (available in every project):

git clone https://github.com/wpgaurav/bricks-skills.git ~/.claude/skills/bricks

Claude auto-loads it whenever your request looks like a Bricks task — just ask. Update later with git -C ~/.claude/skills/bricks pull. For one project only, clone into .claude/skills/bricks/ inside that project — or simply run claude inside the repo (its CLAUDE.md routes automatically).

Claude.ai (web & desktop)

As a Skill — Pro/Max/Team/Enterprise with code execution enabled:

1. Zip the folder: zip -r bricks.zip bricks-skills -x '*.git*'
2. Settings → Capabilities → Skills → Upload skill, choose bricks.zip.
3. Start a chat and ask for a layout.

Any plan — create a Project, upload SKILL.md and the references/*.md you need as project knowledge, then add "Follow SKILL.md for all Bricks tasks" to the project instructions.

ChatGPT

Custom GPT — Create a GPT → Configure → Knowledge → Upload files and add SKILL.md plus the reference files (upload bricks.zip if you hit the file limit). In Instructions paste: "You author Bricks Builder JSON. Always follow SKILL.md and the matching file in references/."

Project / single chat — attach SKILL.md plus the reference for your task (e.g. references/query-loops.md) and ask.

OpenAI Codex

Codex reads AGENTS.md. Clone the repo, then add a pointer (don't paste the whole skill — AGENTS.md is size-capped):

# Bricks Builder
For any Bricks Builder task, follow the skill at ./bricks-skills/SKILL.md and its references/.

Put that in your project's AGENTS.md, or in ~/.codex/AGENTS.md (with an absolute path to the clone) to make it global.

Cursor

Clone the repo into your project, then add .cursor/rules/bricks.mdc:

---
description: Bricks Builder JSON authoring
alwaysApply: false
---
For any Bricks Builder task, follow ./bricks-skills/SKILL.md and the files in ./bricks-skills/references/.
Output paste-ready JSON using the verified value shapes from those docs.

Cursor attaches it automatically when relevant, or type @bricks to force it. You can also @-mention SKILL.md directly in chat. (Cursor reads AGENTS.md too.)

GitHub Copilot

Clone the repo into your project, then create .github/copilot-instructions.md:

For any Bricks Builder (WordPress) work, follow ./bricks-skills/SKILL.md and the matching file
in ./bricks-skills/references/. Always output paste-ready JSON with verified value shapes.

Copilot picks it up automatically across VS Code, JetBrains, GitHub.com, and the CLI. For file-scoped rules, use .github/instructions/bricks.instructions.md with an applyTo: glob. In chat you can also attach #file:SKILL.md.

VS Code

Open the repo (or your project with the clone inside) as a workspace, then use whichever assistant you have:

• Copilot Chat — set up .github/copilot-instructions.md (above) and/or attach #file:SKILL.md.
• Claude Code / Continue / Cline / other extensions — @-mention or attach SKILL.md in the chat, or use the skill / AGENTS.md / rules files from the other sections.

Tip: keeping SKILL.md open in a tab gives most assistants the context for free.

OpenCode

Clone the repo, then either reuse the AGENTS.md pointer (project, or global ~/.config/opencode/AGENTS.md) — or list the files in opencode.json (globs and remote URLs both work):

{
  "$schema": "https://opencode.ai/config.json",
  "instructions": ["./bricks-skills/SKILL.md", "./bricks-skills/references/*.md"]
}

Any other AI tool

It's all plain Markdown, so it works anywhere — Gemini, Windsurf, Aider, Zed, JetBrains AI, and more:

• Reads AGENTS.md? (Zed, Aider, Gemini CLI, Jules, Windsurf…) Drop in the one-line pointer to bricks-skills/SKILL.md.
• Otherwise paste SKILL.md into the system prompt / custom instructions, plus the single reference your task needs — the routing table in SKILL.md tells you which. Self-contained, no internet required.

What to ask

"Build a SaaS landing page: split hero, logo strip, 3-col features, pricing, FAQ, CTA. Brand color #6d28d9."

"Create a filterable course archive — search, category filter, price sort, AJAX pagination — as paste-ready JSON."

"Team section from my ACF repeater team_members (photo, name, role, linkedin_url)."

You get a .json file: paste it into the builder (clipboard format) or import it via Bricks → Templates (template format).

Push it into a live Bricks site

Pasting works for one section. When you want the agent to read the page, change it and check the result itself, connect it to the site with Site Agent, my free WordPress MCP plugin. It's the first route I'd pick for Bricks, for three reasons:

• It uses Bricks' own tools. On Bricks 2.4 and later, switch on Bricks tools and the agent gets Bricks' abilities next to Site Agent's: page summaries, page edits, imports, revisions and CSS regeneration, with Bricks' own permission and input checks in charge.
• It won't corrupt layout data. Bricks stores element arrays in post meta. Site Agent's content writes refuse raw Bricks data, so changes go through Bricks' save path and the CSS doesn't go stale.
• Big pages still fit. A summary read returns element counts, headings and structure, so the agent can understand a long layout before it touches it.

{
  "name": "site-agent-run-bricks-ability",
  "arguments": {
    "ability_name": "bricks/get-page-elements",
    "parameters": { "postId": 42, "responseFormat": "summary" }
  }
}

Clients sign in through WordPress with OAuth (Claude, ChatGPT, Claude Code, Codex, Cursor, VS Code, Gemini, Zed). Tools that change things stay off until you switch them on. On Bricks 2.3.x, generate the JSON with this skill and paste or import it by hand. Staging first, always.

Tools that pair well with this skill

The skill is free and works without any of this. These are products I build, and each one covers something a layout skill can't.

More open-source skills