skills.rest
MadAppGang
MadAppGangOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-design-review

Analyze UI screenshots, wireframes, and mockups for usability, accessibility, and consistency.

7|4|Updated Feb 26, 2026
Search Tags:#accessibility#usability#wcag#design review#ui design#gemini vision
One-click install
npx skills add https://github.com/MadAppGang/magus --skill ui-design-review-madappgang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-review
Source: https://github.com/MadAppGang/magus/tree/main/plugins/designer/skills/ui-design-review
Command: npx skills add https://github.com/MadAppGang/magus --skill ui-design-review-madappgang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the process of reviewing UI designs for usability, accessibility, and consistency, reducing manual effort and catching critical issues early.

Core Features & Use Cases

  • Multimodal Analysis: Leverages Gemini's vision capabilities to analyze screenshots, wireframes, and mockups.
  • Targeted Reviews: Provides patterns for general usability, WCAG accessibility audits, design system validation, and comparative reviews.
  • Use Case: Upload a screenshot of a new app feature and ask the skill to perform a WCAG 2.1 AA accessibility audit, identifying contrast issues and missing labels.

Quick Start

Use the ui-design-review skill to analyze the attached screenshot 'dashboard.png' for usability issues.

Frequently Asked Questions about ui-design-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a WCAG accessibility audit on a UI screenshot?▼

To run a WCAG accessibility audit, you upload a UI screenshot and request a review. The skill analyzes the image using Gemini vision models to identify contrast issues and missing labels against WCAG 2.1 AA standards.

Can I use this to check wireframes and mockups for usability issues?▼

Yes, you can check wireframes and mockups for usability issues. The skill performs multimodal analysis on your visual design files to provide targeted feedback on general usability and consistency problems.

What is the best way to validate a UI design against an existing design system?▼

The best way to validate a UI design against an existing design system is to use the targeted design system validation pattern. The skill reviews your mockups to check for consistency and reports actionable deviations.

Does this UI design review tool require any specific dependencies?▼

No specific dependencies are required to use this UI design review tool. It integrates with Gemini vision models via the claudish CLI to perform multimodal analysis directly on your uploaded screenshots.

Can I compare two different UI mockups for consistency checks?▼

Yes, you can compare different UI mockups for consistency checks. The skill supports comparative reviews, allowing you to analyze multiple design iterations against each other and your design standards.

What kind of feedback does the multimodal AI provide for UI designs?▼

The multimodal AI provides detailed feedback and actionable recommendations for UI designs. It identifies usability flaws, accessibility gaps, and consistency issues by analyzing your visual files.

Related Skills

Explore More Design & Creative Skills→
htafollahtafolla
5

multimodal-looker

Analyze diagrams, screenshots, and UI mockups to extract information and assess design.

Community
Advanced
camilooscargbaptistacamilooscargbaptista
7

ux-review

Evaluate UI mockups for usability, accessibility, and interaction issues, producing prioritized recommendations.

Community
Intermediate
SheshiyerSheshiyer
4

nano-banana

Generate Gemini-native images via the inference.sh CLI from text prompts.

Community
Intermediate
Claude-Code-Community-IrelandClaude-Code-Community-Ireland
10

accessibility-compliance-accessibility-audit

Audit digital products against WCAG standards and identify accessibility barriers.

Official
Advanced