frontend-design-review

SKILL.md

This skill provides expert guidance for conducting thorough frontend design reviews, covering UI/UX design quality, design system consistency, accessibility compliance, and responsive design patterns. The skill helps identify design issues early in the development lifecycle, ensuring designs meet quality standards, accessibility requirements, and business objectives before implementation.

2. Create Detailed Findings Report See design-review-report-template.md for comprehensive report structure

Be Specific: Don't say "improve contrast". Say "Body text on blue background has 3.8:1 contrast, needs 4.5:1. Darken text to #1a1a1a or lighten background."

Führt umfassende Überprüfungen des Frontend-Designs durch, die die Qualität des UI/UX-Designs, die Validierung des Designsystems, die Einhaltung der Barrierefreiheit, responsive Designmuster, die Architektur der Komponentenbibliothek und die Konsistenz des visuellen Designs umfassen. Bewertet Designspezifikationen, Figma/Sketch-Dateien, Design-Tokens, Interaktionsmuster und Benutzererfahrungsabläufe. Identifiziert Usability-Probleme, Verstöße gegen die Barrierefreiheit, Designsystemabweichungen und gibt umsetzbare Verbesserungsempfehlungen. Erstellt detaillierte Design-Review-Berichte mit nach Schweregrad bewerteten Ergebnissen, visuellen Beispielen und Implementierungsrichtlinien. Verwenden Sie diese Option, wenn Sie Frontend-Designs überprüfen, Designsysteme validieren, die Einhaltung der Barrierefreiheit sicherstellen, Komponentenbibliotheken bewerten, responsive Designs bewerten oder wenn Benutzer Designüberprüfung, UI/UX-Überprüfung, Figma-Überprüfung, Designsystemvalidierung, Barrierefreiheitsprüfung oder Frontend-Designqualität erwähnen. Quelle: dauquangthanh/hanoi-rainbow.

Original anzeigen