audit

Audit web interfaces for accessibility, performance, theming, and responsive defects.

Updated Jan 22, 2025
One-click install
npx skills add https://github.com/SL-A-SH/my-portfolio --skill audit-sl-a-sh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: audit
Source: https://github.com/SL-A-SH/my-portfolio/tree/main/.claude/skills/audit
Command: npx skills add https://github.com/SL-A-SH/my-portfolio --skill audit-sl-a-sh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill documents interface quality gaps by running systematic checks across accessibility, performance, theming, responsive layout, and design anti-patterns so teams can prioritize fixes without applying changes directly.

Core Features & Use Cases

  • Comprehensive Diagnostics: Produces findings for Accessibility (contrast, ARIA roles, keyboard navigation, semantic HTML, alt text, form labeling), Performance (layout thrashing, expensive animations, unoptimized assets, bundle size, render issues), Theming (hard-coded colors, dark mode failures, inconsistent tokens), and Responsive Design (fixed widths, touch targets, horizontal overflow, text scaling).
  • Anti-Patterns Detection: Flags AI-generated design tells and frontend anti-patterns (glassmorphism, gradient text, generic fonts, nested cards, redundant copy) and treats guideline violations as critical where they block usability.
  • Actionable Reporting: For each issue provides location, severity, impact, WCAG or standards references, specific recommendations, and suggested repair commands for developer/design handoff.

Quick Start

Run a full audit of the site's primary pages and components and generate the prioritized, detailed report described above.

Frequently Asked Questions about audit

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

FAQPage Schema
How do I run a frontend accessibility audit on my web components?

A frontend accessibility audit checks components for contrast, ARIA roles, keyboard navigation, semantic HTML, alt text, and form labeling. It provides exact locations, severity ratings, WCAG references, and prioritized remediation recommendations.

What is the best way to detect frontend design anti-patterns like glassmorphism and gradient text?

Detecting frontend design anti-patterns involves flagging generic fonts, nested cards, redundant copy, glassmorphism, and gradient text. The audit treats guideline violations that block usability as critical defects with detailed impact analysis.

How do I check my web app for responsive design and theming issues?

Checking responsive design and theming issues surfaces fixed widths, horizontal overflow, touch target sizes, hard-coded colors, dark mode failures, and inconsistent tokens across breakpoints to ensure layout adaptability.

Can I get a UI performance audit that identifies layout thrashing and unoptimized assets?

A UI performance audit identifies layout thrashing, expensive animations, unoptimized assets, bundle size bloat, and render issues. It documents these gaps with specific recommendations and repair commands without applying changes directly.

Does a UI audit generate prioritized reports for developer and design handoff?

A UI audit generates actionable reports for developer and design handoff by providing exact locations, severity ratings, impact analysis, WCAG standards references, and suggested repair commands for each identified issue.