Files
breadcrumb-the-shire/.agents/skills/core-guardrails/references/boundaries-ui.md
fs 545bcc789b docs: replace ASCII umlaut fallbacks with proper äöüß across all .md
Most German docs were written with `ue`/`ae`/`oe`/`ss` ASCII fallbacks
(`fuer`, `aenderung`, `koennen`, `gemaess`) — relic from older toolchain
constraints. Replaced 237 occurrences across 38 .md files with proper
umlauts and ß so the docs read naturally.

Substitutions are constrained to plain prose: fenced code blocks
(```...```), inline code spans (`...`), markdown link targets `[..](..)`,
and HTML comments are preserved verbatim. Path references like
`docs/howto-erste-aenderung.md` keep their original (umlaut-replaced)
filenames — only the surrounding prose is normalised.

Tool: bin/fix-md-umlauts.py (idempotent — no-op on already-clean files).
Re-runnable if ASCII fallbacks creep back in via copy-paste.

Doc-link-check + doc-drift-check stay green.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-29 09:57:22 +02:00

4.4 KiB

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.