fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
63be2def762f5a972a04da183b76700e95f40e86
breadcrumb-the-shire/.agents/skills/core-guardrails/references/boundaries-ui.md
fs 63be2def76 docs: add UI/UX component guidelines and improve breadcrumb/tab-panel styling 
Add "Komponenten in Formularen" section to boundaries-ui.md with rules
for core button classes, margin resets, checkbox sizing, sticky positioning,
icon-only buttons, responsive grids, and CSS variables. Add matching
quick-reference bullets to CLAUDE.md UI Patterns section.

Fix breadcrumb wrapping: nowrap + overflow hidden + flex-shrink for
single-line behavior. Add data-tab-panel-wide opt-out for full-width
tab panels (default 70ch).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-15 18:44:29 +02:00

4.4 KiB
Raw Blame History

UI Boundaries (MUST / MUST NOT)

Listen-Standard

  1. MUST Listen ueber initStandardListPage(...) initialisieren.
  2. MUST Filter-Toolbar ueber zentrale Helper/Partials rendern.
  3. MUST aktive Chips/Drawer-Verhalten ueber 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 fuer 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 ueber initStandardDetailPage(...) nutzen.
  3. MUST Detail-Aktionen ueber 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 ueber den globalen Confirm-Service abwickeln.
  2. MUST NOT window.confirm(...) in App-JS oder inline HTML-Handlern verwenden.
  3. MUST relevante Frontend-Warnpfade zentral ueber Frontend-Telemetrie erfassen.
  4. MUST NOT relevante UX-/Fehlerpfade nur als Console-Warnung implementieren.

Frontend Page-Module Hard Cut

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

Component Lifecycle Runtime

  1. MUST migrierte Komponenten ueber 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 ueber Page-Config (readPageConfig(...)) beziehen, keine verteilten Ad-hoc-Globals.
  5. MUST host-gebundene UI-Komponenten ueber explizite data-app-component-Hosts im Markup binden.
  6. Global-Utilities ohne natuerliches Host-Element MAY via Runtime scope: 'global' registriert werden, MUESSEN aber denselben Lifecycle-Contract inkl. destroy() einhalten.

Shared Partials

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

RBAC in Templates

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

CSS Boundaries

  1. MUST Styles moeglichst lokal in web/css/components, web/css/layout oder web/css/pages halten.
  2. MUST NOT globale unscoped Overrides ohne klaren Scope einfuehren.
  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 fuer 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 fuer Farben verwenden, nie Farbwerte hardcoden.
Reference in New Issue View Git Blame Copy Permalink