메뉴
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 페이지를 검토하고 설치를 진행할 수 있습니다.
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.
SOC 직업 분류 기준
| 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.