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."

Realiza revisiones integrales del diseño frontend que cubren la calidad del diseño UI/UX, la validación del sistema de diseño, el cumplimiento de la accesibilidad, los patrones de diseño responsivos, la arquitectura de la biblioteca de componentes y la coherencia del diseño visual. Evalúa especificaciones de diseño, archivos Figma/Sketch, tokens de diseño, patrones de interacción y flujos de experiencia del usuario. Identifica problemas de usabilidad, infracciones de accesibilidad, desviaciones del sistema de diseño y proporciona recomendaciones prácticas para mejorar. Produce informes detallados de revisión de diseño con hallazgos clasificados por gravedad, ejemplos visuales y pautas de implementación. Úselo al revisar diseños de interfaz, validar sistemas de diseño, garantizar el cumplimiento de la accesibilidad, evaluar bibliotecas de componentes, evaluar diseños responsivos o cuando los usuarios mencionen revisión de diseño, revisión de UI/UX, revisión de Figma, validación del sistema de diseño, auditoría de accesibilidad o calidad del diseño de interfaz. Fuente: dauquangthanh/hanoi-rainbow.

Ver original