Skill

ui-review

Captures SwiftUI preview screenshots and reviews UI/UX for layout, spacing, HIG compliance, accessibility, typography, color contrast, and consistency. Use for UI feedback or View design reviews.

Swift

iOS

mobile

design

npx claudepluginhub k-kohey/axe --plugin axe-preview

Tool Access

This skill is limited to using the following tools:

Bash(axe *)Bash(cat *)ReadGlobGrep

Preview

Capture a preview screenshot and perform a comprehensive UI/UX review.

SKILL.md

Similar Skills

preview

Captures screenshots of SwiftUI #Preview blocks using axe CLI. Visualize View appearance, check layouts, and verify visual changes.

3 tools

axe-preview

swiftui-review

512

Reviews SwiftUI and Swift code for modern APIs, best practices, performance, accessibility, data flow, navigation, and Clean Architecture.

10 files

swiftui

swiftui-code-review

Reviews SwiftUI code for view composition, state management (@State, @Binding, @Observable), performance, and accessibility. Use for .swift files with SwiftUI views or UI code.

4 files

beagle-ios

Stats

Parent Repo Stars34

Parent Repo Forks3

Last CommitFeb 28, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

SwiftUI UI/UX Review

Capture a preview screenshot and perform a comprehensive UI/UX review.

Steps

1. Capture the preview

Resolve $ARGUMENTS to a .swift file path. $ARGUMENTS may contain only a View name (e.g. ContentView), so use Glob to find the actual path (e.g. TodoApp/ContentView.swift).

axe preview report <path/to/File.swift> --output <output.png>

axe preview report is preferred over oneshot axe preview because it waits for rendering to complete (--wait, default 10s) and retries on failure.

If the file has multiple #Preview blocks, --output file.png will fail (it requires exactly one preview). In that case:

Use a directory as --output to capture all, then review each
Or fall back to axe preview --preview <title|index> (oneshot, no render wait)

Read the captured image with the Read tool.

2. Read the source code

Read the SwiftUI source file (resolved in the previous step) to understand the implementation alongside the visual output.

3. Review the UI

Evaluate the preview image and source code against these criteria:

Layout & Spacing

Consistent padding and margins
Proper alignment of elements
No clipped or overflowing content
Appropriate use of spacing between elements

Typography

Readable font sizes (minimum 11pt for body text)
Proper font weight hierarchy (title > headline > body)
Text truncation handled gracefully

Color & Contrast

Sufficient contrast ratios for text readability
Consistent color usage across elements
Check source code for semantic colors (.foregroundStyle / .background) vs hardcoded values for Dark Mode support

Apple HIG Compliance

Standard navigation patterns
Appropriate use of system components
Touch target sizes (minimum 44x44pt)
Safe area handling

Accessibility (source code check)

Dynamic Type support (look for fixed font sizes vs .font(.body) etc.)
VoiceOver considerations (.accessibilityLabel, .accessibilityHint)
Color-only information indicators (should have alternative cues)

4. Report findings

Present findings organized by severity:

Issues: Problems that should be fixed (layout bugs, readability issues, HIG violations)
Suggestions: Improvements that would enhance quality
Good: Aspects that are well-implemented

For each finding, reference the specific line in the source code and suggest a concrete fix.

Prerequisites

Run this if the command fails because axe is not found::

curl -fsSL https://raw.githubusercontent.com/k-kohey/axe/main/install.sh | sh