From axe-preview
Iteratively fixes SwiftUI Views to match design images by capturing previews with axe, comparing visuals, and editing code until aligned. Use with design image and View file.
How this skill is triggered — by the user, by Claude, or both
Slash command
/axe-preview:fix-uiThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Iteratively modify a SwiftUI View until its preview matches a target design image.
Iteratively modify a SwiftUI View until its preview matches a target design image.
$0: Path to the SwiftUI source file (.swift)$1: Path to the design image (PNG, JPG, etc.)$0 may contain only a View name (e.g. ContentView) instead of a file path. Resolve it to a .swift path (e.g. TodoApp/ContentView.swift) using Glob.
Read the design image at $1 using the Read tool to understand the target appearance.
Read the SwiftUI source file to understand the current implementation.
axe preview report "$0" --output <output.png>
axe preview report is preferred because it waits for rendering to complete and retries on failure.
If the file has multiple #Preview blocks, --output file.png will fail (it requires exactly one preview). In that case:
--output to capture all, then pick the relevant oneaxe preview "$0" --preview <title|index> (oneshot, no render wait)Read the captured image to see the current appearance.
Compare the current preview against the design image. Focus on:
Make targeted edits to the SwiftUI source file to address the identified differences. Prioritize the most visually impactful changes first.
Capture a new preview after the edits. Use --reuse-build to skip rebuilding since only the View source changed:
axe preview report "$0" --output <output.png> --reuse-build
Read the new image and compare against the design.
Repeat steps 5-7 until the preview closely matches the design image. Stop after at most 5 iterations. If the design still does not match, report remaining differences to the user.
Show the final preview image and summarize all changes made to the source file.
#Preview blocks, use --preview <title|index> to target the correct oneRun this if the command fails because axe is not found::
curl -fsSL https://raw.githubusercontent.com/k-kohey/axe/main/install.sh | sh
npx claudepluginhub k-kohey/axe --plugin axe-previewCaptures 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.
Converts Claude HTML/CSS prototypes (via design URL or .tar.gz) to single self-contained SwiftUI View files in active Xcode workspaces. Generates code, builds, previews, and visually diffs for layout fidelity.
Builds and captures Xcode/SwiftUI previews as screenshots for visual analysis. Supports standalone Swift files, Xcode projects, and SPM packages.