Does it report performance issues related to React or JavaScript?

Yes, it identifies render performance issues like unnecessary re-renders, missing memoization, and expensive animations that animate layout properties instead of transforms.

How does it identify AI-generated design anti-patterns?

It scans for 'AI-slop' tells such as generic color palettes, glassmorphism, redundant copy, and unnecessary card grids that lack distinctive brand identity.

Can I audit specific sections of my application?

Yes, you can pass an optional 'area' argument to focus the audit on a specific feature, component, or file path.

What accessibility standards does the audit check?

It evaluates code against WCAG principles, specifically checking for contrast ratios, ARIA roles, keyboard navigation traps, and semantic HTML structure.

Does this skill automatically fix the issues it finds?

No, the audit skill is strictly diagnostic to ensure a thorough and systematic review; you should use companion commands like normalize or optimize to apply the fixes identified in the report.

Frontend Quality Audit

Name: Frontend Quality Audit
Author: devadalberto

bydevadalberto

0•

设计工具

Performs systematic UI/UX audits across accessibility, performance, and responsive design to ensure high-quality, human-centric interfaces.

The Audit skill is a comprehensive diagnostic tool for Claude Code designed to evaluate frontend interfaces against industry-standard best practices. It meticulously scans codebase areas for accessibility violations (WCAG), performance bottlenecks like layout thrashing, theming inconsistencies, and responsive design failures. Beyond technical metrics, it uniquely identifies 'AI-slop' anti-patterns—generic design elements common in unrefined AI-generated code—and generates a prioritized report with severity ratings and actionable recommendations to guide subsequent development phases.

主要功能

01Automated WCAG accessibility compliance checking for ARIA, contrast, and semantics

02AI-slop detection to eliminate generic design tells like glassmorphism and hero metrics

030 GitHub stars

04Structured reporting with severity-ranked issues and suggested recovery commands

05Design system validation to detect hard-coded colors and broken dark mode variants

06Performance diagnostics identifying layout thrashing and unoptimized assets

使用场景

01Performing a pre-release quality check on new UI components to ensure production readiness

02Identifying accessibility gaps and keyboard navigation issues to meet compliance standards

03Auditing AI-generated frontend code to remove generic styling and optimize rendering performance

主要功能

01Automated WCAG accessibility compliance checking for ARIA, contrast, and semantics

02AI-slop detection to eliminate generic design tells like glassmorphism and hero metrics

030 GitHub stars

04Structured reporting with severity-ranked issues and suggested recovery commands

05Design system validation to detect hard-coded colors and broken dark mode variants

06Performance diagnostics identifying layout thrashing and unoptimized assets

使用场景

01Performing a pre-release quality check on new UI components to ensure production readiness

02Identifying accessibility gaps and keyboard navigation issues to meet compliance standards

03Auditing AI-generated frontend code to remove generic styling and optimize rendering performance