fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
2e73cb98b46d0644a4ed54ada60793e43585fb94
breadcrumb-the-shire/.agents/skills/core-guardrails/references/boundaries-ui.md

71 lines
4.4 KiB
Markdown
Raw Normal View History

refactor: relocate agent-system/ to .agents/ with 7-role workflow restructure Moves the agent workflow system from agent-system/ to .agents/ (dotfile convention). Restructured from 5-role to 7-role pipeline: adds Analyst and splits Reviewer into Code Reviewer + Security Reviewer. Removes all old workflow run artifacts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 18:23:04 +01:00
# 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.
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
## 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 Copy Permalink