screenshot-analyzer

Find and analyze screenshots from ~/Downloads/Screenshots/ for UI/UX review. Use when asked to look at screenshots, review UI designs, inspect interface errors, analyze layout issues, or examine visual problems. Triggers on "check my latest screenshot", "review my UI", "analyze this screen capture".

14 stars

byblacktop

View on GitHub Installation ↓

Best use case

screenshot-analyzer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using screenshot-analyzer should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/screenshot-analyzer/SKILL.md --create-dirs "https://raw.githubusercontent.com/blacktop/dotfiles/main/ai/skills/screenshot-analyzer/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/screenshot-analyzer/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How screenshot-analyzer Compares

Feature / Agent	screenshot-analyzer	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Screenshot Analyzer

Find and analyze screenshots from `~/Downloads/Screenshots/` with focus on UI/UX review.

## Workflow

### 1. Find Screenshots

List recent screenshots sorted by modification time:

```bash
ls -t ~/Downloads/Screenshots/*.png | head -5
```

Adjust `-5` to show more/fewer files as needed.

### 2. Read and Analyze

Use the Read tool to view the screenshot image:

```
Read: ~/Downloads/Screenshots/<filename>.png
```

The Read tool renders images visually for analysis.

### 3. UI/UX Review Checklist

When analyzing, evaluate:

**Visual Hierarchy**
- Clear focal points and content prioritization
- Logical flow of information
- Appropriate use of size, color, and spacing to guide attention

**Layout & Spacing**
- Consistent margins and padding
- Proper alignment of elements
- Balanced whitespace usage

**Typography**
- Readable font sizes and line heights
- Appropriate font choices and hierarchy
- Sufficient contrast for legibility

**Color & Contrast**
- WCAG-compliant contrast ratios
- Consistent color palette
- Meaningful use of color (not just decorative)

**Interactive Elements**
- Clear affordances for buttons/links
- Visible focus states
- Appropriate touch/click target sizes

**Error States & Feedback**
- Clear error messaging
- Helpful guidance for resolution
- Appropriate visual indicators

**Consistency**
- Consistent patterns across similar elements
- Adherence to design system (if applicable)
- Predictable interaction patterns

## Output Format

Structure findings as:

```
## Screenshot Analysis: <filename>

### Summary
[1-2 sentence overview of what the screenshot shows]

### Findings

#### Strengths
- [Positive observation 1]
- [Positive observation 2]

#### Issues
- **[Issue Type]**: [Description] → [Suggested fix]
- **[Issue Type]**: [Description] → [Suggested fix]

### Priority Recommendations
1. [Most critical fix]
2. [Second priority]
3. [Third priority]
```

Related Skills

second-opinion

from blacktop/dotfiles

Run an external LLM code review with Codex CLI, Gemini CLI, or both. Use when the user asks for a second opinion, external review, Codex review, Gemini review, or wants a model-vs-model review of current changes, a branch diff, a specific commit, or a GitHub pull request.

seatbelt-sandboxer

from blacktop/dotfiles

Generates minimal macOS Seatbelt sandbox configurations. Use when sandboxing, isolating, or restricting macOS applications with allowlist-based profiles.

save-session

from blacktop/dotfiles

Save AI agent session information for later resumption. Use when: (1) Finishing a work session and want to save progress (2) User says "save session", "remember this session", or "save your session ID" (3) Before ending a long coding/debugging session (4) When user wants to be able to resume this conversation later Supports Claude, Codex, Gemini, Copilot, Cursor, and other AI agents.

rust-profiling

from blacktop/dotfiles

Profile Rust code using samply to identify CPU bottlenecks. Use when performance is slow, before optimizing, or when the user asks to profile.

ratatui-tui

from blacktop/dotfiles

Build terminal UIs with ratatui following 2026 Rust best practices. Use when: (1) Creating new TUI apps, (2) Adding widgets/layouts, (3) Keyboard navigation/state management, (4) Image integration via ratatui-image, (5) Async event handling, (6) Release optimization. Covers v0.30.0+ API, Elm Architecture, StatefulWidget, color-eyre.

orchestrate

from blacktop/dotfiles

Orchestrate multi-step work with Claude Code CLI as a bounded worker while Codex stays lead developer. Use when Codex should split a task into scoped sub-tasks, delegate planning or implementation to Claude with `claude -p`, run parallel Claude sessions, isolate risky edits in worktrees, define custom Claude subagents, or move repeated enforcement into Claude hooks/settings.

karpathy-guidelines

from blacktop/dotfiles

Behavioral checklist for disciplined LLM coding. Use when starting non-trivial tasks to enforce assumption surfacing, minimal changes, and verifiable goals. Derived from Andrej Karpathy's observations on LLM coding pitfalls.

instruments-profiling

from blacktop/dotfiles

Use when profiling native macOS or iOS apps with Instruments/xctrace. Covers correct binary selection, CLI arguments, exports, and common gotchas.

humanizer

from blacktop/dotfiles

Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases. 30c5c8d (Update humanizer plugin to upstream v2.2.0)

html-artifacts

from blacktop/dotfiles

Produce a single self-contained .html artifact (no build, no external assets) when the task is spatial, interactive, visual, multi-axis, or long-running. Triggers on "build me an HTML for X", "make a dashboard / status snapshot / comparison / decision tree / timeline / architecture map", "render this plan as a clickable site", or when content can't fit markdown structurally. Skips short replies, code-only outputs, simple plans.

handoff

from blacktop/dotfiles

Generate optimized handoff prompts for delegating work to another LLM agent. Use when handing work to GPT-5.x/Codex, Claude 4.x, Gemini 3.x, or Grok 4.x, either as a shared-workspace sub-task handoff or a fresh-context handoff for a new session or model. Triggers on requests like "create a handoff prompt", "delegate this task to another agent", "hand this off", or "prepare context for another agent".

go-performance

from blacktop/dotfiles

Measure and improve Go program performance on modern Go (1.24+). Use when profiling Go code, diagnosing CPU or memory bottlenecks, investigating latency or contention, writing or fixing benchmarks, comparing benchmark results, using pprof or trace data, applying PGO, or tuning hot-path Go code.