菜单
Use when reading, adding, removing, or reordering Bricks responsive breakpoints. Covers `bricks/list-breakpoints` / `bricks/set-breakpoints`, mobile-first vs desktop-first semantics, and how breakpoint writes interact with the generated CSS.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when writing custom-element controls or debugging control behavior: "what control type for a color?", "conditional control visibility", "dynamic data on a custom control". Covers the ~40 control types, the `required` syntax, CSS-binding via `css` key, dynamic-data support, and default-value gotchas.
Use before writing or editing Bricks element JSON, settings, controls, globals, page settings, or template settings. Gives the runtime lookup order plus bundled full resolved schemas so you can check exact control keys and value shapes instead of guessing.
Use after every write through the Bricks MCP: set-page-elements, update-element, update-element-conditions, update-element-interactions, batch-update-elements, set-template-conditions, set-global-variables, create-theme-style, etc. Defines the verify-after-write loop: read back the change, render the affected post, check for silent failures (empty render, unknown tags, unbalanced braces, query:null). Catches the "tool returned success but the page broke" class of bugs.
Use when the Bricks skills update check reports BRICKS_SKILLS_UPDATE_AVAILABLE, or when the user asks to update the Bricks skills pack.
Use at the start of every Bricks session. Orientation rules: call get-design-context before any design-system write, verify mutations with get-page-elements / list-revisions, and never force same-named globals to duplicate.
Use when creating or updating design tokens: global classes, variables, color palettes, theme styles, components. Enforces uniqueness, scale-generator usage, and conditions on theme styles. Prevents system fragmentation.
| name | bricks-breakpoints |
| description | Use when reading, adding, removing, or reordering Bricks responsive breakpoints. Covers `bricks/list-breakpoints` / `bricks/set-breakpoints`, mobile-first vs desktop-first semantics, and how breakpoint writes interact with the generated CSS. |
Requires: Bricks 2.4+ with the Abilities API enabled
Run first when filesystem tools are available:
_BS_UPDATE_CHECK=""
for _CAND in "$HOME/.bricks/skills/bricks-skills/scripts/bricks-skills-update-check" "$PWD/scripts/bricks-skills-update-check" "$HOME/.claude/skills/bricks-skills/scripts/bricks-skills-update-check" "$HOME/.codex/skills/bricks-skills/scripts/bricks-skills-update-check"; do
[ -f "$_CAND" ] && _BS_UPDATE_CHECK="$_CAND" && break
done
[ -n "$_BS_UPDATE_CHECK" ] && sh "$_BS_UPDATE_CHECK" || true
If it prints BRICKS_SKILLS_UPDATE_AVAILABLE <old> <new> <tag>, load bricks-skills-update before continuing. If it prints BRICKS_SKILLS_JUST_UPDATED <old> <new>, mention the new version and continue.
Bricks ships default breakpoints (desktop, tablet_portrait, mobile_landscape, mobile_portrait) and lets you add custom ones. The full set lives in the bricks_breakpoints option and drives both the builder device-switcher and the generated responsive CSS.
Two tools:
bricks/list-breakpoints: returns { customEnabled, isMobileFirst, baseKey, baseWidth, breakpoints, defaults }. baseKey / baseWidth identify the base row; isMobileFirst is derived by core Bricks from the stored breakpoint list before it sorts the list for output (includes/breakpoints.php:433-444).bricks/set-breakpoints: write the full list. Accepts { breakpoints: [ ... ], customEnabled?: boolean } and replaces the existing set atomically. customEnabled flips the global custom-breakpoints master toggle.Each breakpoint is an object:
{
key: "tablet_portrait", // machine key, unique: /^[a-z0-9_-]+$/i
label: "Tablet portrait", // shown in builder, required non-empty
width: 991, // integer >= 0: see paradigm below
icon: "bricks-icon-device-tablet", // optional
base: true // omit or false on all other rows
}
One and only one row must have base: true. The base is the fallback: every other breakpoint is a media query relative to it. base is a boolean on the row itself, not a type enum.
Bricks derives the paradigm from which row is the base, not from a separate setting:
@media (max-width: Npx).0 upward; wider breakpoints layer on as @media (min-width: Npx).list-breakpoints exposes the derived result as isMobileFirst: boolean. There is no cssBreakpointType global setting. If you change the base row, call list-breakpoints after saving and verify isMobileFirst before continuing.
Caution: use bricks/set-breakpoints for reading, restoring, adding, removing, or width changes when you can verify the result immediately. For a desktop-first to mobile-first paradigm switch, stop unless list-breakpoints confirms isMobileFirst: true after the write. Core Bricks derives the paradigm from stored base-row position, and the ability writer also sorts the replacement list before saving (includes/abilities/breakpoints.php:242-249), so the readback is the contract.
A master "use custom breakpoints" toggle (customBreakpoints) in bricks_global_settings controls whether your custom set is applied at all: Bricks falls back to the built-in defaults when it's off. That key is not in the bricks/set-global-settings registry. Use bricks/set-breakpoints with customEnabled: true or customEnabled: false, then verify with list-breakpoints.customEnabled.
Switching paradigm rewrites every rendered stylesheet. Regenerate CSS files (bricks/regenerate-css-files) after the write when cssLoading=file: otherwise cached files lag the new media-query semantics. set-breakpoints returns a note field prompting the regen when the flag is set.
set-breakpoints sorts rows by width before saving. Submit a clear complete list, then read back with list-breakpoints and use the returned order and isMobileFirst value as truth for generated CSS.
If a
bricks/*ability is not available as a direct tool: first check whether it is outside the fast path and call it throughmcp-adapter-execute-abilitywithability_name: "bricks/<name>". If the dispatcher also rejects it, callbricks-list-ability-statusto check whether a site admin disabled it under Bricks > AI.
bricks/list-breakpoints
-> current: [desktop (base, 1279), tablet_portrait (991), mobile_landscape (767), mobile_portrait (478)]
bricks/set-breakpoints
customEnabled: true
breakpoints:
- { key: "mobile_portrait", label: "Mobile portrait", width: 478 }
- { key: "mobile_landscape", label: "Mobile landscape", width: 767 }
- { key: "tablet_portrait", label: "Tablet portrait", width: 991 }
- { key: "desktop", label: "Desktop", width: 1279, base: true }
- { key: "large_desktop", label: "Large desktop", width: 1600 }
bricks/regenerate-css-files
The explicit base: true stays on desktop; the new large_desktop stacks above it.
base: true: the write is rejected with bricks_invalid_param (param breakpoints).key for a new breakpoint: Bricks stores per-breakpoint settings under that key and you'll silently merge with the old data.