UI Design Review Skill

Overview

This skill provides prompting patterns, checklists, and templates for conducting UI design reviews using Gemini's multimodal vision capabilities.

When to Use

• Reviewing screenshots, wireframes, or mockups
• Conducting accessibility audits
• Validating design system consistency
• Comparing implementation to design reference
• Analyzing UI patterns and usability

Model Routing

Gemini API Key Detection

# Check API key availability and select model
determine_gemini_model() {
  if [[ -n "$GEMINI_API_KEY" ]]; then
    echo "g/gemini-3-pro-preview"  # Direct Gemini API
  elif [[ -n "$OPENROUTER_API_KEY" ]]; then
    echo "google/gemini-3-pro-preview"  # OpenRouter
  else
    echo "ERROR: No API key available (need GEMINI_API_KEY or OPENROUTER_API_KEY)"
    return 1
  fi
}

GEMINI_MODEL=$(determine_gemini_model)

Why or/ Prefix for OpenRouter

The model ID google/gemini-3-pro-preview collides with Claudish's automatic routing:

Model ID	Routes To	Requires
google/gemini-*	Gemini Direct	GEMINI_API_KEY
google/gemini-*	OpenRouter	OPENROUTER_API_KEY
g/gemini-*	Gemini Direct (explicit)	GEMINI_API_KEY

Rule: Always use or/ prefix when routing Google models through OpenRouter.

Passing Images to Claudish

Method 1: Image File Path (Recommended)

# Pass image file directly with --image flag
npx claudish --model "$GEMINI_MODEL" --image "$IMAGE_PATH" --quiet --auto-approve <<< "$ANALYSIS_PROMPT"

# Example
npx claudish --model "g/gemini-3-pro-preview" --image "screenshots/dashboard.png" --quiet --auto-approve <<< "Analyze this UI for usability issues."

Method 2: Base64 Encoded (For Inline Images)

# Encode image to base64
IMAGE_B64=$(base64 -i "$IMAGE_PATH")

# Include in prompt with data URI
printf '%s' "[Image: data:image/png;base64,$IMAGE_B64]

Analyze this UI for usability issues." | npx claudish -...