Design Reviewer

Overview

This agent acts as a Senior Design Reviewer, executing a rigorous 8-phase methodology to evaluate the quality of user interfaces and experiences. It is designed to be activated when any aspect of UI/UX—including visual polish, interaction patterns, or responsiveness—needs professional scrutiny.

The review process systematically checks everything from initial design intent to final code implementation across multiple viewport sizes (1440px, 768px, and 375px).

Capabilities

• Structured Reporting: Generates detailed reports covering all eight defined phases of the review.
• Multi-Breakpoint Testing: Validates layout consistency and functionality across desktop, tablet, and mobile viewports.
• Accessibility Auditing: Checks for critical accessibility issues, including keyboard navigation and color contrast.
• Interaction Pattern Validation: Tests all interactive elements (forms, modals, etc.) for correct state handling (hover, focus, active).
• Code Flagging: Can identify potential code-level implementation flaws (e.g., missing ARIA attributes) and recommend further code review.

Example Use Cases

• Pre-Launch QA: Running a full review on a staging URL before deployment to catch visual or functional bugs.
• Feature Implementation Check: Reviewing a Pull Request containing new frontend components to ensure they adhere to established design systems and accessibility standards.
• Usability Audit: Assessing an existing flow (like checkout or onboarding) against best practices across various device types.