Frontend UI Mastery

## Übersicht

Frontend UI Mastery bündelt drei produktionsreife Frontend-Skills — **frontend-accessibility**, **frontend-components** und **frontend-responsive** — in einem Plugin. Zusammen decken sie den gesamten UI-Lebenszyklus ab: komponierbare Komponenten erstellen, sie für alle Nutzer barrierefrei machen und sie nahtlos über verschiedene Geräte hinweg anpassen. Ein Autor, konsistente Konventionen über React, Vue und Svelte hinweg.

## Schnellstart

1. Installiere das Plugin in deinem OpenClaw Workspace.
2. Rufe beim Erstellen einer neuen UI **frontend-components** auf, um wiederverwendbare Komponenten mit klarer Zuständigkeit, sauberen Props und minimalem lokalen State zu definieren.
3. Ergänze **frontend-accessibility** für semantisches HTML, ARIA, Tastaturnavigation, Fokus-Management und Farbkontraste — führe dann einen Screenreader-Test durch, um die WCAG-Konformität zu bestätigen.
4. Schließe mit **frontend-responsive** ab, um Mobile-First-Breakpoints, flexible Container und touch-freundliche Größen anzuwenden, sodass sich dieselben Komponenten vom Smartphone bis zum Desktop anpassen.

## Wichtige Befehle

- `frontend-components` — Entwirf komponierbare React/Vue/Svelte-Komponenten mit klaren Schnittstellen und proper Encapsulation.
- `frontend-accessibility` — Prüfe und behebe Probleme bei semantischem HTML, ARIA, Tastaturnavigation und Screenreader-Kompatibilität für WCAG-Konformität.
- `frontend-responsive` — Erstelle Mobile-First Responsive-Layouts mit Media Queries, relativen Einheiten und Standard-Breakpoints.

## Tipps

- Erstelle zuerst die Komponentenstruktur (`frontend-components`), dann führe unmittelbar einen Barrierefreiheits-Check (`frontend-accessibility`) durch, bevor du responsive Styles hinzufügst — nachträgliche a11y-Anpassungen sind deutlich aufwändiger, als sie von Anfang an zu integrieren.
- Kombiniere `frontend-responsive` mit einem Test auf einem echten Gerät (oder der DevTools-Geräteemulation bei `375px`, `768px`, `1280px`), um Probleme mit Touch-Zielen und Reflow zu erkennen, die Desktop-First-Layouts übersehen.
- Kombiniere das Plugin mit einem Backend- oder Datenbank-Plugin, um einen vollständigen Vertical Slice auszuliefern: Das UI-Plugin behandelt die nutzerzugewandte Schicht durchgängig.