.agents/skills/core-guardrails/references/boundaries-ui.md

# UI Boundaries (MUST / MUST NOT)

## Listen-Standard

1. MUST Listen über `initStandardListPage(...)` initialisieren.
2. MUST Filter-Toolbar über zentrale Helper/Partials rendern.
3. MUST aktive Chips/Drawer-Verhalten über Standard-Contracts laufen lassen.
4. MUST NOT direkt `gridFiltersFromSchema(...)` oder `initListFilterExperience(...)` in Listen-Templates verwenden.
5. MUST NOT Legacy-Filter-Toggle-Markup (`data-toolbar-toggle`, `data-filter-overflow`, `data-filter-toggle`) neu einbauen.
6. MUST rowInteraction-Standard für Listen mit Row-Navigation beibehalten (sichtbare Action-Spalte + Enter + Doppelklick-Fallback).
7. MUST pageSize-Standard beibehalten (10/25/50/100, Toolbar rechts, URL > localStorage > default).

## Detailseiten-Standard

1. MUST Hauptformular mit `data-standard-detail-form="1"` markieren.
2. MUST Unsaved/Shortcut/Dirty-State über `initStandardDetailPage(...)` nutzen.
3. MUST Detail-Aktionen über Action-Policy-Contract (`data-detail-action-policy`, `data-detail-action-kind`, `data-detail-confirm-message`) steuern.
4. MUST NOT inline `confirm(...)` (`onclick` / `onsubmit`) auf standardisierten Detailseiten nutzen.

## Confirm + Telemetry Standard

1. MUST Confirm-Dialoge zentral über den globalen Confirm-Service abwickeln.
2. MUST NOT `window.confirm(...)` in App-JS oder inline HTML-Handlern verwenden.
3. MUST relevante Frontend-Warnpfade zentral über Frontend-Telemetrie erfassen.
4. MUST NOT relevante UX-/Fehlerpfade nur als Console-Warnung implementieren.

## Frontend Page-Module Hard Cut

1. MUST Seiteninitialisierung über dedizierte Module unter `web/js/pages/*` umsetzen.
2. MUST Page-Config über `script[type="application/json"]` + `readPageConfig(...)` bereitstellen/lesen.
3. MUST alle JS-`src` in `pages/**` und `templates/**` über `assetVersion('...js...')` laden.
4. MUST NOT inline `<script type="module">...</script>` in `pages/**` oder `templates/**` verwenden.

## Component Lifecycle Runtime

1. MUST migrierte Komponenten über `init(root, config)` + `destroy()` standardisieren.
2. MUST NOT migrierte Komponenten per `DOMContentLoaded`/Module-Sideeffect selbst auto-initialisieren.
3. MUST Listener, Timer und Observer, die in `init(...)` entstehen, in `destroy()` wieder abbauen.
4. MUST Runtime-Konfiguration über Page-Config (`readPageConfig(...)`) beziehen, keine verteilten Ad-hoc-Globals.
5. MUST host-gebundene UI-Komponenten über explizite `data-app-component`-Hosts im Markup binden.
6. Global-Utilities ohne natürliches Host-Element MAY via Runtime `scope: 'global'` registriert werden, MÜSSEN aber denselben Lifecycle-Contract inkl. `destroy()` einhalten.

## Shared Partials

1. MUST Listen-Titlebar über `templates/partials/app-list-titlebar.phtml` rendern.
2. MUST List-Tabs über `templates/partials/app-list-tabs.phtml` rendern.
3. MUST Purge-Action über `templates/partials/app-list-purge-action.phtml` rendern.
4. MUST Detail-Validation-Summary über `templates/partials/app-details-validation-summary.phtml` rendern.

## RBAC in Templates

1. MUST UI-Capabilities nur über `$viewAuth` lesen.
2. MUST NOT `can('...')` in Templates verwenden.

## CSS Boundaries

1. MUST Styles möglichst lokal in `web/css/components`, `web/css/layout` oder `web/css/pages` halten.
2. MUST NOT globale unscoped Overrides ohne klaren Scope einführen.
3. MUST Vendor-Overrides nur in `web/css/vendor-overrides/**` pflegen.
4. MUST bestehende CSS-Variablen bevorzugen statt neue Inline-Farbwerte zu verteilen.

## Komponenten in Formularen

1. MUST Core-Button-Klassen (`secondary outline small`, `danger outline small`) verwenden statt Custom-Button-CSS. Custom-CSS nur für Layout (z.B. `border-radius: 50%`).
2. MUST `margin-bottom: 0` auf Buttons, Inputs, Selects und Labels innerhalb selbststaendiger Komponenten in Formularen resetten (Core setzt `margin-bottom: var(--app-spacing)` global).
3. MUST Checkboxen in Flex-Containern mit expliziter Groesse (`width: 1.25em; height: 1.25em`) und `flex-shrink: 0` versehen (Core nutzt `appearance: none` mit Custom-Sizing).
4. MUST `position: sticky` mit `top: calc(var(--app-topbar-height) + ...)` verwenden, nicht `top: 0` (Topbar ist sticky).
5. MUST Icon-Only-Buttons mit `data-tooltip` und `aria-label` versehen.
6. MUST bei `grid-template-columns` mit mehr als einer Spalte ein `@media`-Fallback auf Single-Column definieren.
7. MUST bestehende `--app-*` CSS-Variablen für Farben verwenden, nie Farbwerte hardcoden.