Bricks Builder Skills for AI Tools (Free, MIT, 35+ Stars)

A free, MIT-licensed skill pack that teaches AI assistants how to produce valid Bricks Builder JSON structures — pricing tables, card grids, hero sections, custom elements, templates, and hook-based integrations. Paste the skill link into any AI chat and start generating layouts.

Bricks Builder outputs JSON when you copy an element — a deeply-nested structure with elements, settings, globalClasses, themeStyles. Plain LLMs consistently get this wrong: missing required fields, wrong element names, invalid CSS class references. The skill files in this repo fix that by including the real element schemas, the Core Framework utility classes, and 35+ worked examples organised by section. The result: AI-generated JSON you can right-click-paste directly into the Bricks structure panel.

What the skills pack does

  • Teaches AI tools the Bricks JSON format — element structure, required fields, global classes, theme styles, responsive values
  • Ready-to-paste sections — hero, features, pricing, testimonials, FAQs, CTAs — copy the JSON, paste into Bricks structure panel, done
  • Core Framework CSS reference — the actual utility classes Bricks ships (grid, flex, spacing, typography) so AI uses real classes, not invented ones
  • Custom element development — teaches the model how to build your own Bricks elements with controls and render logic
  • Template programmatic creation — skill file for generating headers, footers, archive templates via JSON import
  • Hooks reference — complete filter + action map so AI-suggested customisations use the right hook names

How to use

Three paths. (a) Point any AI at the repo URL — “Read https://github.com/wpgaurav/bricks-skills skill files and create a 3-tier pricing table”. The AI clones or reads via GitHub browser tools. (b) Copy-paste the skill file content into Claude.ai, ChatGPT, or Gemini chat. (c) Clone and open in Claude Code or Cursor — the CLAUDE.md auto-loads as project context.

# Path A: point an AI at the repo
# Works with Claude Code, Cursor, Windsurf, Copilot agent mode
# Just tell the AI:
#   "Read https://github.com/wpgaurav/bricks-skills and build a hero section with Bricks"

# Path B: clone and use locally
git clone https://github.com/wpgaurav/bricks-skills.git
cd bricks-skills
claude   # Claude Code auto-reads CLAUDE.md for context

# Path C: copy a specific skill file into a web-AI chat
# Open bricks-layouts.md, copy contents, paste into Claude.ai
# Then ask:
#   "Using this format, create a comparison table with 4 features"

# After AI produces JSON:
# 1. Copy the JSON output
# 2. In Bricks Builder, right-click in the structure panel
# 3. Select Paste (or Ctrl+V / Cmd+V)
# 4. Elements + global classes paste together

How the skill files are structured

The repo contains five top-level skill files: bricks-layouts.md (sections and JSON format), bricks-elements.md (custom element development with controls), bricks-templates.md (programmatic template creation), bricks-hooks.md (filter/action reference), and core-framework.css (utility-first CSS the model can reference). A CLAUDE.md at the root orchestrates them — when an AI opens the project, it reads CLAUDE.md first and delegates to the specialised skills based on the task. For best results, the repo recommends dropping your licensed Bricks source into a bricks/ folder (gitignored) so the AI can read real element implementations when needed.

Download and source

FAQs

Do I need to own Bricks Builder for this?

To USE the generated JSON, yes — Bricks is a paid theme. The skills themselves are free and work without a license, but pasting into Bricks requires an active installation.

Does it work with Bricks Academy?

Yes, and there is a companion repo bricks-academy-preview-skill that teaches AI assistants the local Bricks Academy preview docs format. Use both together for the fullest Bricks context.

Can the AI customise existing Bricks templates?

Yes. The skills include patterns for analysing existing Bricks JSON, modifying element properties, and re-emitting valid structure. Paste an existing template, describe the change, receive modified JSON.

Will this work for Bricks Builder 2.0?

Yes. The skills track the current Bricks JSON schema. When Bricks v2.0 shipped the responsive value updates in 2025, the skill files were updated within a week. Pull the repo to get latest.

What about ACSS or Core Framework compatibility?

The core-framework.css skill reference documents the free Core Framework utility classes. For ACSS (paid), treat it as a separate system — the skills include an ACSS-aware variant file for users who have both.

Can AI build custom Bricks elements with this?

Yes — bricks-elements.md covers controls, render functions, and nestable-element patterns. The AI produces PHP element class files that register correctly via bricks/elements/register.