bricks

Bricks Skills

Bricks Skills are optional guidance files for MCP-compatible clients that use Bricks abilities through the WordPress MCP Adapter.

Bricks provides structured abilities that can read and change a Bricks site: inspect the design system, create templates, update elements, use dynamic data, render proposed element trees, manage media, and more.

Skills are the operating manual for those abilities. They tell the client which ability to call first, when to inspect the existing design system, how to avoid duplicate classes, how Bricks dynamic data is shaped, and when to fetch exact element/control schemas before writing.

The Bricks Abilities API is experimental. Test on local or staging sites first, and keep it off on sites that do not need it. Enable it under Bricks Settings > AI > Abilities API.

Requirements

• Bricks 2.4+
• MCP Adapter plugin installed and active
• Bricks Abilities API enabled
• An MCP-compatible client that can load skills or plugin-style guidance

Install

Claude Code, self-updating install

Use this if you want the Bricks skills pack to check for updates itself instead of relying on Claude Code marketplace auto-updates.

git clone https://github.com/codeerhq/bricks-skills.git ~/.bricks/skills/bricks-skills
~/.bricks/skills/bricks-skills/scripts/bricks-skills-upgrade

Then add that local checkout as a Claude Code plugin marketplace:

/plugin marketplace add ~/.bricks/skills/bricks-skills
/plugin install bricks@bricks-skills

The upgrade script pins the checkout to the latest published GitHub Release. Each skill runs a small update check when filesystem tools are available. If a newer version is available, it tells the client to load bricks-skills-update. That skill updates the git checkout and tells you when to reload the plugin.

Updates follow the latest published GitHub Release tag, not main.

Claude Code, quick install

/plugin marketplace add codeerhq/bricks-skills
/plugin install bricks@bricks-skills

This is shorter, but the installed plugin is managed by Claude Code. To update this install, run /plugin marketplace update bricks-skills.

Manual install

git clone https://github.com/codeerhq/bricks-skills.git
# Symlink or copy the skill folders you want into your client's skills directory:
#   Cursor: .cursor/skills/
#   Claude Code project: .claude/skills/
#   Claude Code global: ~/.claude/skills/

Use symlinks if you want bricks-skills-update to update the source checkout and have the client pick up the changed skill files without copying them again.

Why these skills exist

Bricks exposes a lot of site behavior through structured data, and many mistakes look successful at first.

Each skill covers one Bricks area and focuses on the rules that are easiest to miss.

Skills

Skill	What it covers
start-here	Session setup, design-context reads, write verification, duplicate handling.
bricks-skills-update	Bricks-owned update checks and git-based skill pack upgrades.
naming-conventions	Existing class, variable, and component naming patterns.
plan-from-brief	Turning a brief into an MCP write plan without guessing site state.
design-systems	Global classes, variables, palettes, theme styles, and components.
seed-design-system	Creating a design system on a new Bricks site.
audit-design-system	Read-only checks for unused tokens, dead styles, and design drift.
site-audit	Site-wide read-only checks across templates, dynamic data, revisions, and Bricks abilities availability.
query-loops	Query loop setup, layout traps, pagination, custom queries, and empty renders.
components	Slots, nested components, property binding, extraction, and reuse.
custom-code	Custom CSS, JS, PHP, code signatures, and safe extension points.
hooks-reference	Bricks hooks by use case, with scope and safety notes.
forms	Fields, actions, submissions, spam checks, SMTP, and webhooks.
query-filters	Filter elements, target query binding, indexing, and AJAX behavior.
popups	Popup templates, triggers, display rules, close behavior, and debugging.
interactions	Interaction triggers, actions, animation cost, and frontend verification.
element-conditions	Element display conditions, OR/AND grouping, and render debugging.
mega-menus	Bricks-native Nav Nested mega menus and WordPress menu-backed mega menu setup.
nestable-elements	Accordion, tabs, slider, dropdown, offcanvas, and nested structure rules.
templates-conditions	Template types, display conditions, scoring, and winner selection.
dynamic-data	Dynamic tags, providers, modifiers, preview checks, and empty output.
woocommerce	Woo setup abilities, product loops, templates, cart, checkout, and account surfaces.