skills.rest
australia
australiaOFFICIAL
Explore all skills by this author →
GitHub

visual-audit

Capture screenshots across viewports and modes to audit web design.

4|Updated Dec 5, 2023
Search Tags:#accessibility#design system#ui design#dark mode#screenshot#ux review#visual audit
One-click install
npx skills add https://github.com/australia/mobtranslate.com --skill visual-audit-australia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-audit
Source: https://github.com/australia/mobtranslate.com/tree/main/.claude/skills/visual-audit
Command: npx skills add https://github.com/australia/mobtranslate.com --skill visual-audit-australia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the tedious and error-prone process of visually auditing web application designs, ensuring consistency, identifying usability issues, and proposing creative improvements across different viewports and themes.

Core Features & Use Cases

  • Comprehensive Screenshot Matrix: Captures every page across desktop/mobile viewports and light/dark modes.
  • Detailed Visual Review: Analyzes layout, typography, color, components, and navigation for adherence to design standards and accessibility.
  • Creative Redesign Proposals: Suggests innovative improvements and new component designs to elevate the user experience.
  • Use Case: A product team needs to ensure their new feature launch meets high design standards across all supported devices and themes before release.

Quick Start

Run a visual audit on the provided URL, capturing screenshots and identifying design issues.

Frequently Asked Questions about visual-audit

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

FAQPage Schema
How do I automate a visual audit of my web application across different viewports and themes?▼

To automate a visual audit, this skill uses an agent-browser tool to capture screenshots across desktop and mobile viewports in both light and dark modes, analyzing UI design quality and identifying layout or theming issues.

What is included in a comprehensive UI design review for accessibility and theming?▼

A comprehensive UI design review analyzes layout, typography, color, components, and navigation against design principles and accessibility standards, identifying usability issues and proposing creative redesign solutions.

Can I use this visual audit skill to check both light mode and dark mode design consistency?▼

Yes, you can check light mode and dark mode design consistency by systematically capturing screenshots of every page in both themes and analyzing the captured UI elements for theming issues and standard adherence.

Do I need an agent-browser tool to capture screenshots for a UX review?▼

Yes, you need an agent-browser tool because the skill requires it to navigate the web application, systematically capture screenshots across viewports, and perform the detailed visual review.

What's the best way to identify typography and layout issues before a feature launch?▼

The best way to identify typography and layout issues is to run a visual design audit that analyzes captured screenshots against design standards, ensuring your new feature meets high design quality across all supported devices.

How does this approach compare to manual screenshot reviews for finding design system inconsistencies?▼

Unlike manual screenshot reviews, this approach automates capturing a comprehensive screenshot matrix across desktop and mobile viewports, systematically analyzing UI elements to identify design system inconsistencies and propose improvements.

Related Skills

Explore More Design & Creative Skills→
lucidlabs-hqlucidlabs-hq
2

browser

Automate browser interactions for UI testing and routine web tasks.

Official
Advanced
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
AbsolutelySkilledAbsolutelySkilled
207

ultimate-ui

Codify UI design tokens, theming, and accessibility patterns for AI coding agents.

Official
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced