Bricks

Author Bricks Builder (WordPress) layouts, templates, and full designs as paste-ready JSON. Use for any Bricks task — sections, pages, headers/footers, query loops, ACF/dynamic data, faceted filters, conditions, interactions/animations, popups, WooCommerce templates, custom elements, or hooks. Verified against Bricks 2.3.6 source.

143 stars 22 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add wpgaurav/bricks-skills --skill bricks

Manual install

git clone --depth 1 https://github.com/wpgaurav/bricks-skills.git /tmp/bricks-skills
mkdir -p ~/.claude/skills
cp -r /tmp/bricks-skills/. ~/.claude/skills/bricks

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Bricks Builder JSON Authoring

Generate complete Bricks designs as JSON that pastes or imports cleanly on the first try.

## Default Deliverable

Produce an actual `.json` file in the workspace (not inline JSON) unless the user asks otherwise. Use the project's folder convention if one exists; otherwise `bricks-json/{type}-{slug}.json`. In the final response state: the file path, which JSON format you used, and the validation checks performed.

## Workflow

0. **Clarify inputs first** — settle two things *before* writing JSON:
   - **rem base** — confirm what `1rem` equals on the target site (1rem = ? px). Ask the user; default to **16px** if unspecified (a `html { font-size: 62.5% }` reset makes it 10px). All `rem`/`clamp()` math and any px→rem conversion from a reference depends on this. → [rem base](references/style-settings.md#root-font-size-rem-base)
   - **reference URL** — if the user provides one (or names asset URLs), fetch it and reference its images/video/SVG/icons by absolute URL. → [references/external-assets.md](references/external-assets.md)
1. **Pick the format** — clipboard paste vs template import vs programmatic insert → [references/json-formats.md](references/json-formats.md)
2. **Plan structure** — semantic section → container → blocks tree; pick elements from the catalog → [references/elements.md](references/elements.md)

Read the full skill on GitHub

Details

Skill name: bricks
Repository: wpgaurav/bricks-skills
Repo updated: 28 October 2026

FAQ

What does the Bricks skill do?

How do I install the Bricks skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add wpgaurav/bricks-skills --skill bricks. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Bricks popular?

It lives in wpgaurav/bricks-skills, which has 143 GitHub stars and 22 forks.

Related skills

HTML Anything

161

clockless-org/html-anything

Turn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).

Frontend & Design

Material Design 3 UI

159

skydashnet/material-design-3-ui-skill

Design, redesign, review, or implement user interfaces using Google Material Design 3 (M3), Material You, and optional Material 3 Expressive principles. Use for UI/UX screens, app flows, design systems, component selection, theming, responsive/adaptive layouts, accessibility audits, Figma-ready specifications, or developer handoff where Material Design 3 is required.

Frontend & Design12

Prototype to Figma

141

alima-max/prototype-to-figma-skill

Converts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype

Frontend & Design15

Aria Icons

103

LeulAria/Aria-Icons

Use when working with icons in any project. Search 1.4M icons, add them as source files (no giant dependency), migrate existing icon libraries, and run as an MCP server. Commands: `aria-icons search`, `aria-icons add`, `aria-icons get`, `aria-icons migrate`, `aria-icons doctor`.

Frontend & DesignIn 2 lists

Persian Motion Director

148

atmirrr/persian-motion-director

Direct and build professional motion design (promo and launch films, kinetic typography, animated explainers, social clips, title sequences) with correct Persian/Farsi and right-to-left typography, in Remotion or plain web code. Use this skill whenever the user wants a video, animation, motion graphics, teaser or animated text that contains Persian, Farsi, Arabic-script or RTL text, and whenever they say a motion piece looks "default", "like a slideshow", "AI-made" or "not pro", or that the Persian looks off, broken or disconnected, even if they never say "motion design". It brings the anti-sl

Frontend & Design

Brand System Builder

168

amirmushichge/brand-system-skill

Guides Lovart Agent from one visual reference to a coherent brand system, campaign assets, and packaging concepts through a gated creative-direction workflow.

Frontend & Design12

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.