coastdigitalgroup/coastai-skills

System für die Kanban-Board-Benutzeroberfläche

Zweck

Das System für die Kanban-Board-Benutzeroberfläche bietet ein standardisiertes, hochdichtes und zugängliches Layout-Framework für die Verwaltung von Workflow-Statusspalten, kartenbasierten Aufgabenelementen und Prozesspipelines. Kanban-Boards sind zentrale Interaktionsflächen in modernen SaaS-Anwendungen, Projektmanagement-Tools, Bewerber-Tracking-Systemen (ATS) und CRM-Verkaufspipelines.

Die Gestaltung einer effektiven Kanban-Oberfläche erfordert ein Gleichgewicht zwischen hoher visueller Dichte, unabhängigem Spalten-Scrolling, klarer räumlicher Hierarchie, Echtzeit-Feedback zu Work-in-Progress (WIP)-Limits und fließender Reaktionsfähigkeit über verschiedene Ansichtsfenster hinweg. Darüber hinaus stellen traditionelle, nur auf Zeigegeräte ausgelegte Drag-and-Drop-Implementierungen häufig erhebliche Barrieren für die Barrierefreiheit dar. Dieses Skill überbrückt Design und technische Umsetzung, indem es räumliche Regeln für die Spaltenbegrenzung, den Aufbau von Aufgabenkarten, Touch-Ziele und Tastatur-/Screenreader-Workflows zur Neuanordnung in Übereinstimmung mit den WCAG-AA-Standards festlegt.

Anwendungsfälle

• Projekt- und Aufgabenmanagementsysteme: Strukturierung von Sprint-Boards, Backlog-Spalten (z. B. Backlog, In Bearbeitung, Code-Review, Erledigt) und Issue-Tracking-Boards.
• Bewerber-Tracking-Systeme (ATS): Visualisierung von Kandidaten-Rekrutierungsphasen (z. B. Beworben, Screening, Interview, Angebot, Eingestellt).
• Verkaufs- und CRM-Deal-Pipelines: Verwaltung von Verkaufslead-Phasen mit aggregierten Deal-Werten und Phasenwahrscheinlichkeiten pro Spalte.
• Redaktionelle Inhaltskalender: Verfolgung von Artikel- und Medienproduktions-Workflows von der Ideenfindung über das Verfassen und Review bis zur Veröffentlichung.
• Arbeitsbereiche für die Auftragsabwicklung: Überwachung der mehrstufigen Auftragsverarbeitung in Logistik- oder Küchenanzeigeschnittstellen.

Wann NICHT zu verwenden

• Datenraster und tabellarische Finanzlisten: Verwenden Sie für dichte, mehrspaltige Zeilendaten, die Sortierung, Filterung und Stapelbearbeitung von Zellen erfordern, data-table-ui-system.
• Hierarchische Dokumentation oder Dateibäume: Verwenden Sie für tief verschachtelte Dateistrukturen und Dokumentgliederungen tree-view-navigation-system.
• Ansichtsfenster-gesperrte SaaS-Shell-Layouts: Verwenden Sie für die übergeordnete Anwendungsshell (Navigationsleisten, Topbars, einklappbare Panels) dashboard-layout-system.
• Einspaltige Aktivitätsfeeds: Verwenden Sie für chronologische Stream-Feeds oder einfache vertikale Aufgabenlisten timeline-activity-system oder card-ui-system.

Eingaben

1. Workflow-Phasen und Spaltentaxonomie: Die geordnete Liste der Workflow-Status (z. B. Zu Erledigen, In Bearbeitung, Review, Erledigt) und deren Spaltenmetadaten (WIP-Limits, Status-Akzentfarben, Deal-Summen).
2. Kartendaten-Dichtematrix: Attribute, die pro Aufgabenkarte angezeigt werden sollen (z. B. Aufgaben-ID, Titel, Prioritäts-Tag, Fälligkeitsdatum, Bearbeiter-Avatare, Unteraufgaben-Fortschritt, Anhanganzahl).
3. Ansichtsfenster- und Shell-Kontext: Layout-Grenzen, die von der übergeordneten Anwendungsshell bereitgestellt werden (von dashboard-layout-system).
4. Design-Tokens: Farbpaletten, Oberflächenhöhen, Abstandsskalen und Typografie-Tokens (von accessible-color-system, elevation-and-depth-system und fluid-spacing-system).

Ausgaben

1. Spezifikation für die horizontale Spaltenfläche: Räumliche Layout-Definitionen für ansichtsfenster-gesperrte horizontale Scroll-Container, feste Spaltenbreiten und Spaltenabstände.
2. Spaltenkopf- und WIP-Limit-Anatomie: Visuelle Designs für Spaltenköpfe, Badge-Zähler, WIP-Limit-Warnschwellen (normal, erreicht, überschritten) und Trigger zum schnellen Hinzufügen von Aktionen.
3. Komponentenspezifikationen für Aufgabenkarten: Strukturierte Layout-Blaupausen für Standard-, Kompakt- und erweiterte Aufgabenkarten, einschließlich Drag-Handle-Zielen, Metadatenrastern und Hover-/Fokus-/Gegriffen-Interaktionszuständen.
4. Zugängliches Tastatur- und Drag-and-Drop-Modell: ARIA-Rollen-Zuordnungen (role="region", role="list", role="listitem"), Fokusverwaltungsrouten, Tastaturkürzel zum Neuanordnen und aria-live-Ansagemuster.
5. Responsive Mobile-Pivot-Strategie: Layout-Anpassungsrichtlinien, die mehrspaltige horizontale Layouts auf kleinen Bildschirmen in segmentierte Registerkartenansichten oder gestapelte Akkordeon-Panels umwandeln.

---

Workflow

1. Die horizontale Spaltenflächenstruktur einrichten

Strukturieren Sie den Haupt-Board-Arbeitsbereich innerhalb einer ansichtsfenster-gesperrten Shell (dashboard-layout-system):

• Containergröße: Setzen Sie den Board-Wrapper auf display: flex; flex-direction: row; height: 100%; overflow-x: auto; overflow-y: hidden;, um horizontales Scrollen über Spalten hinweg zu ermöglichen, während der Board-Header fixiert bleibt.
• Spaltenabmessungen: Definieren Sie feste oder flex-schrumpfende Spaltenbreiten (min-width: 280px; max-width: 340px; width: 300px;). Vermeiden Sie, dass Spalten unter 280px schrumpfen, um Textabschneidungen und zu kleine Touch-Ziele zu verhindern.
• Abstände und Innenabstände: Legen Sie einen konsistenten Spaltenabstand (z. B. gap: var(--space-m, 16px)) und horizontalen Innenabstand (z. B. padding: 16px 24px) fest.
• Spaltencontainer-Shell: Gestalten Sie jede Spalte als unabhängigen Flex-Container (display: flex; flex-direction: column; max-height: 100%; background: var(--surface-neutral-subtle); border-radius: 8px; border: 1px solid var(--border-subtle);).

2. Den Spaltenkopf und die WIP-Signalisierung entwerfen

Jeder Spaltenkopf fungiert als klebrige Steuerleiste am oberen Ende des Spaltenstapels:

• Klebriger Spaltenkopf: Positionieren Sie den Header oben im Spalten-Flex-Stapel (flex-shrink: 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;).
• Header-Elemente:
  1. Status-Akzent-Indikator: Ein farbiger 10x10px-Pill oder ein linker Rand, der der Phase entspricht (z. B. Blau = In Bearbeitung, Lila = Review, Grün = Erledigt).
  2. Spaltentitel: Abgeschnittener Text (font-weight: 600; font-size: 0.9375rem; color: var(--text-primary)).
  3. Kartenzähler und WIP-Limit-Badge: Anzeige der Elementanzahl zusammen mit dem WIP-Limit (z. B. "3/5").
  4. Spaltenaktionsmenü: Ein 32x32px-Symbolbutton (...), der Zugriff auf Spalteneinstellungen, Sortierung oder Einklappoptionen bietet.
• Visuelle WIP-Limit-Zustände:
  • Normal (Unter Limit): Dezenter neutraler Badge-Hintergrund (background: var(--surface-neutral-muted); color: var(--text-secondary)).
  • Warnung (Am Limit): Amber Badge-Hintergrund (background: var(--surface-warning-subtle); color: var(--text-warning-bold)).
  • Überschritten (Über Limit): Durchgehend roter Badge oder hervorgehobener Header-Rand (background: var(--surface-danger-subtle); border-color: var(--border-danger); color: var(--text-danger)) mit einem zugänglichen Warnsymbol und Tooltip, der den Workflow-Engpass erklärt.

3. Den unabhängigen Spalten-Scrollbereich konstruieren

Verhindern Sie, dass das gesamte Board oder die Seite vertikal scrollt, wenn eine lange Liste von Karten in einer einzelnen Spalte inspiziert wird:

• Kartenlisten-Container: Wenden Sie flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px 12px; display: flex; flex-direction: column; gap: 8px; auf den Listencontainer an (role="list").
• Trägheit und weiches Scrollen: Aktivieren Sie -webkit-overflow-scrolling: touch; und benutzerdefinierte Scrollleisten (dezente 6px-Scrollleisten), sodass einzelne Spalten sanft scrollen, ohne eine globale Seitenbewegung auszulösen.
• Leerzustands-Container: Wenn eine Spalte 0 Karten enthält, zeigen Sie eine gestrichelte Drop-Zone-Umrandung (border: 2px dashed var(--border-muted); border-radius: 6px; padding: 24px; text-align: center;) mit einem dezenten Label ("Keine Aufgaben in dieser Phase") und einem "Karte hinzufügen"-Button an.

4. Die Aufgabenkarten-Komponentenhierarchie aufbauen

Entwerfen Sie Aufgabenkarten mit einer klaren visuellen Scan-Reihenfolge unter Verwendung von visual-hierarchy-system:

• Kartenbasistruktur: Rendern Sie jede Karte als eigenständiges Listenelement (role="listitem" / article) mit background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: grab;.
• Kartenbereichsaufteilung:
  1. Obere Reihe (Tags und Aktionen): Prioritäts-Badge (z. B. "Hoch", "Dringend" in kontrastreichen Pills) und Aufgabenreferenz-ID (z. B. "PROJ-1042"). Enthält einen 24x24px-Drag-Handle-Button (aria-label="Karte PROJ-1042 neu anordnen").
  2. Mittlerer Bereich (Titel und Beschreibung): Hauptaufgabentitel (font-weight: 600; font-size: 0.875rem; line-clamp: 2; margin-bottom: 8px;). Optionale einzeilige, abgeschwächte Textzusammenfassung.
  3. Untere Metazeile (Fortschritt und Bearbeiter): Linke Seite zeigt Fälligkeitsindikator (rot hervorgehoben, falls überfällig) und Unteraufgaben-Checklistenfortschritt (z. B. "3/5 ✓"). Rechte Seite zeigt gestapelte Bearbeiter-Avatare an (user-avatar-system).
• Karteninteraktionszustände:
  • Hover: Leichte Erhöhung des Schattens (box-shadow: var(--shadow-md); border-color: var(--border-hover)).
  • Fokus: Gut sichtbarer 2px-offset Fokusring (outline: 2px solid var(--focus-ring); outline-offset: 2px).
  • Ziehen / Gegriffen-Zustand: opacity: 0.6; transform: scale(1.02) rotate(1deg); cursor: grabbing; box-shadow: var(--shadow-xl); z-index: 1000;.
  • Drop-Ziel-Hinweis: Wenn eine Karte über eine Spalten-Drop-Zone schwebt, zeigen Sie einen animierten Einfügeplatzhalter an (height: 60px; border: 2px dashed var(--brand-primary); border-radius: 6px; background: var(--brand-subtle);).

5. Barrierefreies Tastatur- und Screenreader-Drag-and-Drop implementieren

Standard-Drag-and-Drop-Frameworks (HTML5 Drag and Drop API) sind für reine Tastatur- und Screenreader-Benutzer oft unzugänglich. Implementieren Sie einen expliziten alternativen Tastaturnavigationsmodus:

• Tastatur-Neuanordnungstrigger: Erlauben Sie Benutzern, den Drag-Handle oder die Karte zu fokussieren und Leertaste oder Eingabetaste zu drücken, um den "Bewegungsmodus" zu aktivieren.
• Fokus und Ansage bei Auswahl: Wenn der Bewegungsmodus aktiviert ist, setzen Sie aria-grabbed="true" (oder aria-pressed="true" auf dem Bewegungstrigger), zeigen Sie einen visuellen "Gegriffen"-Lichthof um die Karte und geben Sie über einen unsichtbaren aria-live="polite"-Bereich bekannt: "Karte PROJ-1042 gegriffen. Derzeit in Spalte 'In Bearbeitung', Position 2 von 5. Verwenden Sie Pfeiltasten oder Alt+Pfeiltasten zum Verschieben, Leertaste zum Ablegen, Escape zum Abbrechen."
• Bewegen zwischen und innerhalb von Spalten:
  • Pfeiltaste Nach Oben / Unten: Ordnet die Karte innerhalb der aktuellen Spaltenliste neu.
  • Pfeiltaste Nach Links / Rechts: Verschiebt die Karte in die angrenzende linke oder rechte Spalte und hängt sie an die Liste dieser Spalte an.
• Ablege- und Abbruchbestätigung:
  • Leertaste / Eingabetaste: Bestätigt die Platzierung. Aktualisiert die DOM-Position, gibt den Greifzustand frei, setzt den Fokus auf die abgelegte Karte und gibt bekannt: "Karte PROJ-1042 in Spalte 'Review', Position 1 von 3 abgelegt."
  • Escape: Bricht die Bewegung ab. Bringt die Karte an ihre ursprüngliche Position zurück und gibt bekannt: "Bewegung abgebrochen. Karte zurück in 'In Bearbeitung', Position 2."

6. Mobile Ansichtsfensteranpassung

Mehrspaltiges horizontales Scrollen auf kleinen mobilen Bildschirmen (<768px) führt zu starker horizontaler Wisch-Ermüdung und umständlichem Karten-Ablegen. Implementieren Sie eine responsive Transformationsstrategie:

• Segmentierte Spaltenregisterkarten (Empfohlenes mobiles Muster): Verstecken Sie auf Bildschirmen unter 768px die horizontale Scrollfläche. Rendern Sie eine klebrige, segmentierte Registerkartensteuerung am oberen Rand des Boards (segmented-control-system), die Spaltentitel mit Elementanzahl-Badges anzeigt (z. B. [ Zu Erledigen (4) ] [ In Bearbeitung (3) ] [ Erledigt (8) ]).
• Einspaltige aktive Ansicht: Zeigen Sie nur die aktive Spaltenliste in voller Breite an (width: 100%).
• Kontextueller "Verschieben nach"-Modal / Action Sheet: Wenn auf Mobilgeräten auf eine Karte getippt wird, bieten Sie einen expliziten "Verschieben nach..."-Button im Kartenmenü an. Durch Tippen darauf öffnet sich ein unteres Blatt (accessible-bottom-sheet-implementation), das Zielspalten für die 1-Tipp-Neupositionierung auflistet und so Touch-Drag-Gesten auf Mobilbildschirmen vollständig eliminiert.

---

Entscheidungsregeln

Mobile Spalten-Layout-Strategie

Ansichtsfensterbreite	Empfohlenes UI-Muster	Interaktionsmechanik
Desktop (>1024px)	Mehrspaltiges horizontaler Rasterfläche	Gleichzeitig sichtbare Spalten, Zeiger-Drag-and-Drop + Tastatur-Bewegungsmodus.
Tablet (768px - 1023px)	Kompaktes Spaltenboard (Horizontaler Scroll)	Schmalere Spalten (260px), sanftes Touch-Horizontal-Scroll-Snapping.
Mobil (<768px)	Segmentierte Spaltenregisterkarten + Einzelne aktive Spalte	Obere Status-Registerkarten, einspaltige vollbreite Karten, "Verschieben nach"-unteres Blatt.

Spaltenbreiten-Strategie

• Feste Spaltenbreite (300px): Am besten für Standard-Boards mit 3-6 Spalten. Spalten behalten vorhersagbare Breiten bei, und zusätzliche Spalten fließen sauber in den horizontalen Überlauf.
• Fluide Flex-Spalten (flex: 1; min-width: 280px): Am besten für Boards mit genau 3 Spalten (z. B. Zu Erledigen, In Bearbeitung, Erledigt) auf breiten Bildschirmen, da die Spalten die volle Ansichtsfensterbreite gleichmäßig ausfüllen können, ohne ungenutzten rechten Leerraum.

Behandlung überschrittener WIP-Limits

• Weiches WIP-Limit (Nur Warnung): Heben Sie den Spaltenkopf in Amber/Rot mit einem Über-Limit-Badge hervor, erlauben Sie Benutzern jedoch, Karten in die Spalte zu verschieben. Empfohlen für kreative und agile Team-Workflows, in denen temporäre Engpässe auftreten.
• Hartes WIP-Limit (Blockierend): Verhindern Sie das Ablegen von Karten in die Spalte, wenn das Limit erreicht ist, und zeigen Sie einen Modal oder Inline-Alert an: "WIP-Limit erreicht (5/5). Lösen Sie vorhandene Aufgaben, bevor Sie weitere hinzufügen." Deaktivieren Sie die Tastaturbewegung in diese Spalte. Empfohlen für streng regulierte operative Workflows.

---

Einschränkungen

• Barrierefreiheit (WCAG 2.1 AA):
  • SC 2.1.1 Tastatur: Jede Kartenfunktion (Bearbeiten, Neu anordnen, Löschen, Verschieben) muss nur mit einer Tastatur erreichbar und bedienbar sein.
  • SC 2.4.7 Fokus sichtbar: Fokussierte Karten und Drag-Handles müssen einen nicht abgeschnittenen Fokusring mit einem Mindestkontrastverhältnis von 3:1 zum Hintergrund aufweisen.
  • SC 4.1.3 Statusmeldungen: Kartenverschiebungsaktionen, WIP-Warnungen und Filterergebnisse müssen über einen aria-live="polite"-Bereich bekannt gegeben werden.
  • SC 2.5.8 Zielgröße: Drag-Handles, Kartenmenü-Trigger (...) und Schnellhinzufügen-Buttons müssen ein Mindest-Tippziel von 24x24px bieten (44x44px auf Touch-Geräten bevorzugt).
• Layout-Begrenzung und CLS: Spaltenlisten-Container müssen overflow-y: auto mit fixierten Headern angeben, um ein Zusammenbrechen des Layouts oder Seitensprünge bei dynamischen Kartenaktualisierungen zu verhindern.
• Leistung: Rendern Sie Kartenlisten effizient. Implementieren Sie für Boards mit mehr als 200 Karten ein virtuelles Listen-Scrolling (virtual-list-implementation) pro Spalte, um eine 60fps-Darstellung während Drag-Operationen aufrechtzuerhalten.