skills.rest
eykd
eykdCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-audit

Audit interface quality for accessibility, performance, theming, and responsive design.

Updated Feb 8, 2026
Search Tags:#theming#performance#accessibility#responsive design#interface audit
One-click install
npx skills add https://github.com/eykd/vance-ts --skill design-audit-eykd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-audit
Source: https://github.com/eykd/vance-ts/tree/main/.claude/skills/design-audit
Command: npx skills add https://github.com/eykd/vance-ts --skill design-audit-eykd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses the need for a systematic quality check of user interfaces, identifying and documenting issues related to accessibility, performance, theming, and responsive design.

Core Features & Use Cases

  • Accessibility Checks: Identifies issues such as contrast issues, missing ARIA, keyboard navigation problems, semantic HTML errors, and alt text.
  • Performance Analysis: Detects layout thrashing, expensive animations, missing optimizations, bundle size issues, and render performance issues.
  • Theming Review: Checks for hard-coded colors, broken dark mode, inconsistent tokens, and theme switching issues.
  • Responsive Design Evaluation: Assesses fixed widths, touch targets, horizontal scroll, text scaling, and missing breakpoints.
  • Anti-Patterns Analysis: Identifies AI slop tells and general design anti-patterns.

Quick Start

Run the design-audit skill to perform a comprehensive audit of the interface quality for accessibility, performance, theming, and responsive design.

Frequently Asked Questions about design-audit

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

FAQPage Schema
How do I perform a comprehensive interface audit for accessibility and performance issues?▼

A responsive design evaluation checks for fixed widths, touch targets, horizontal scroll, text scaling, and missing breakpoints. It assesses these layout problems automatically to identify issues that break adaptability across different screen sizes.

Can I check for theming errors like broken dark mode and inconsistent tokens?▼

Yes, the theming review checks for broken dark mode, inconsistent tokens, hard-coded colors, and theme switching issues. It identifies these errors to ensure consistent visual styling and proper theme functionality across the interface.

What is the best way to identify design anti-patterns in my frontend code?▼

The best way to identify design anti-patterns is to run an automated analysis using design principles and anti-patterns guidelines. This detects AI slop tells and general design inconsistencies, documenting them with severity ratings and actionable recommendations.

Does the accessibility check detect missing ARIA and keyboard navigation problems?▼

Yes, the accessibility check detects missing ARIA, keyboard navigation problems, semantic HTML errors, contrast issues, and alt text. It systematically identifies these issues to ensure interfaces meet accessibility standards.

Related Skills

Explore More Software Engineering Skills→
klhklh
9

core-components

Provide reusable core components and design tokens for frontend UI development.

Community
Intermediate
SChannarongSChannarong

frontend-design

Generate frontend code with accessibility, theming, and responsive behavior.

Community
Advanced
Tea-4-LifeTea-4-Life

critique

Conduct structured UX critiques of interfaces across design principles and usability.

Official
Advanced
vobasevobase
59

audit

Audit UI interfaces for accessibility, performance, theming, and responsive design.

Official
Intermediate