Design System Quality

Checklisten-gestützte Design-Token- und A11y-Prüfung für UI/Frontend-PRs.

Getestet · Funktioniert ★ 9.2/10

Was es kann

Bietet eine strukturierte Qualitätscheckliste (Design-Token, zugängliche Komponenten, WCAG-Kontrast, Typografie, Animationszeiten) plus zwei grep-basierte Verifikationsbefehle zum Erfassen von hartcodierten Farben und verbotenen Tailwind-Klassen. Löst aus bei UI/Frontend-Code-Reviews, PR-Reviews von Komponenten oder Design-System-Compliance-Prüfungen.

Testbericht

Die eigenen grep-Befehle des Skills für hartcodierte Farben und verbotene Klassen wurden gegen ein wegwerfbares ProductCard.tsx ausgeführt und beide erfassten echte Verstöße (#191919 Inline-Farbe, bg-white/bg-black/text-white); der Skill organisiert dann die Ergebnisse in einer nach Schweregrad geordneten Checkliste mit exakten CSS-Variablen-Ersetzungen, die eine generische Überprüfung nicht liefern würde.

Getestet am: 2026-07-15 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/opensesh/DESIGN-OPS
mkdir -p ~/.claude/skills
cp -r DESIGN-OPS/skills/design-system-quality ~/.claude/skills/design-system-quality

Befehle & Beispiel-Prompts

/design-system-qualityChecklisten-gestützte Design-Token- und A11y-Prüfung für UI/Frontend-PRs.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

Review this ProductCard component for hardcoded colors and a11y issues
Check this PR for design-token violations before I merge it
Does this Tailwind component use any forbidden classes or bad contrast?

Vollständiger Testbericht (Englisch) →