ui-design-review

The ui-design-review skill enables software agents to perform rigorous visual and functional design inspections using Gemini's multimodal vision capabilities. Designed for front-end developers, UI designers, and quality assurance engineers, this skill automates the tedious aspects of UI verification, ensuring that implementations strictly adhere to design mockups and industry standards. By leveraging deep visual analysis, it identifies discrepancies in layout, typography, color fidelity, and component consistency, making it an essential asset for maintaining design system integrity throughout the software development lifecycle.

• Advanced UI analysis: Automatically compares implementation screenshots against design mockups or Figma references.

• WCAG 2.1 AA Compliance: Executes comprehensive accessibility audits, including contrast ratio checks, touch target sizing, and semantic structural verification.

• Design System Validation: Validates spacing, typography scales, border radii, and color usage against design tokens.

• Multi-format support: Processes images via file paths, Base64 encoding, or URL references to integrate seamlessly into existing CI/CD or developer workflows.

• Adaptive Model Routing: Includes intelligent routing logic for both direct Gemini API access and OpenRouter integration, optimizing performance and cost.

• When executing a review, ensure images are clear and correctly mapped to the analysis prompt for optimal results.

• Use the provided prompting patterns to structure output for specific tasks such as usability, accessibility, or comparative consistency checks.

• Always define the design reference (tokens or mockups) when running consistency or comparative checks to get actionable deviation reports.

• The skill relies on the claudish CLI; ensure environment variables like GEMINI_API_KEY or OPENROUTER_API_KEY are properly configured before execution.

• Expected inputs include UI screenshots, wireframes, or high-fidelity mockups, with outputs delivered as structured Markdown tables or detailed usability reports identifying locations, severity levels (CRITICAL to LOW), and remediation recommendations.