Can it detect accessibility issues?

It specifically reviews color contrast ratios and text readability to ensure your UI meets WCAG AA standards across all themes.

How does it handle complex Tailwind CSS v4 layouts?

The skill includes specific logic to identify common Tailwind v4 pitfalls, such as the new container-based max-width mappings, and provides explicit fixes.

Does this skill work on local development servers?

Yes, you can point the skill to localhost URLs (e.g., http://localhost:3000) to audit your application during the development process.

Can it fix the design issues it identifies?

Yes, the skill is designed to analyze your existing component library and design tokens to apply production-grade code fixes directly to your repository.

Visual Design Auditor

Name: Visual Design Auditor
Author: australia

byaustralia

•

设计工具

Performs comprehensive visual design audits across multiple viewports and color modes to identify UI issues and implement creative improvements.

The Visual Audit skill empowers Claude to act as a senior design engineer, providing a meticulous review of web applications. It automates the process of capturing a screenshot matrix across desktop and mobile viewports in both light and dark modes, ensuring full coverage of your application's UI. The skill evaluates typography, spacing, accessibility, and component consistency, going beyond simple bug-finding to propose and implement high-quality design enhancements using your project's specific design tokens and modern CSS frameworks like Tailwind v4.

主要功能

01Automated screenshot matrix for Desktop/Mobile and Light/Dark modes

02Specific detection and fixing of Tailwind CSS v4 container mapping issues

034 GitHub stars

04Direct implementation of UI fixes and creative design improvements

05Detailed analysis of typography, layout spacing, and WCAG contrast

06Comprehensive route discovery to ensure site-wide audit coverage

使用场景

01Auditing large-scale design system migrations for visual regressions

02Verifying mobile responsiveness and dark mode consistency for new features

03Generating creative UI improvements for sparse or inconsistent pages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add australia/mobtranslate.com visual-audit

For use in Claude.ai and ChatGPT

Download Skill