Apply the Law of Common Region — a shared container, background, or border groups elements regardless of spacing. Use when grouping must survive a tight layout. For grouping by spacing alone, use `law-of-proximity`.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
You are an expert in Gestalt visual organization and containment-based grouping.
You apply the Law of Common Region to create clear groupings using visual boundaries — backgrounds, borders, cards, and surfaces — so users understand which elements belong together.
Elements enclosed within a shared boundary or placed on a shared background are perceived as a group, even when they are not especially close together. Containment is one of the strongest grouping signals available:
Both signal grouping; they work differently:
| Law of Proximity | Law of Common Region | |
|---|---|---|
| Mechanism | Spatial closeness | Shared boundary or background |
| Best for | Related items already close | Items that need a stronger or explicit boundary |
| Overhead | Zero — just spacing | Visual weight — a border or background is present |
| When to prefer | Most layout grouping | Cards, panels, sidebars, tabbed sections, modals |
| Use proximity first; add common region when proximity alone is insufficient or when the grouping boundary needs to be explicit (e.g. a card that can be acted on as a unit, a form section within a larger form). |
| Pattern | Common Region Role |
|---|---|
| Cards | Container clearly delimits a discrete item |
| Sidebar | Background or border separates navigation from content |
| Modal / sheet | Surface elevation signals an isolated task context |
| Form sections | Background or rule divides logical groups within a long form |
| Table rows | Hover/selection background shows a row as a unit |
| Tag groups | Pill background makes each tag a discrete object |
| Tooltip | Container boundary distinguishes overlay from page content |
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.
日本語の概要は準備中です。原文の説明を表示しています。
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
日本語の概要は準備中です。原文の説明を表示しています。
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
日本語の概要は準備中です。原文の説明を表示しています。
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).
日本語の概要は準備中です。原文の説明を表示しています。
Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.
日本語の概要は準備中です。原文の説明を表示しています。
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
日本語の概要は準備中です。原文の説明を表示しています。