メニュー
Use before creating or renaming any global class, variable, component, or template. Detect the site's existing naming convention and match it: never fragment by creating a parallel one.
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-naming-conventions |
| description | Use before creating or renaming any global class, variable, component, or template. Detect the site's existing naming convention and match it: never fragment by creating a parallel one. |
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.
Every Bricks site settles into naming patterns. Detect them before you write, and match them: don't impose generic defaults.
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.
Call bricks/get-design-context. Scan the returned names for:
Global classes
lowercase / kebab-case / PascalCase / camelCase. Most Bricks sites use kebab-case.is-*, has-*, u-* (utilities), c-* (components), no prefix at all..button--primary (BEM) / .button-primary (flat) / .button.primary (class combos: Bricks supports these natively).Global variables
--space-md vs --spacing-md vs --spacer-4.xs sm md lg xl), numeric (1 2 3 4 5 6), custom.md (t-shirt), 4 (numeric), something else.--color-primary-500, --brand-primary, --c-primary. All valid; pick the one already on the site.Components
Hero Section) vs kebab-case (hero-section) vs space-separated lowercase (hero section).label vs title vs heading. Inside the component, property ids usually match the builder's auto-generated pattern.Templates
Header, Footer, Single Post, Archive: Products. Em-dash or hyphen? Capitalization? Match what exists.Never create a parallel convention. If all classes are kebab-case and you're asked to create BrandHero, convert to brand-hero (or hero-brand if the site uses a component-prefix).
Flag the inconsistency, don't silently fix it. If you detect mixed conventions (half kebab-case, half camelCase), say so and ask the user which should win: don't unilaterally rename existing tokens.
One pattern, one scale. If a t-shirt spacing scale already exists, don't add a numeric one alongside. Extend the t-shirt scale (2xs, 3xl) if needed.
Component labels are human-facing. The builder's component panel shows the label. Keep it readable: Hero: Dark Variant, not hero_dark_v2.
When in doubt, read a few existing names and mirror the pattern. Confidence in detection > imposing a "correct" convention.
--color-* variables to a site that already uses --brand-*: use the existing prefix..btn class on a site that already has .button: that's the same resource spelled differently; reuse, don't add.