skills.rest
trevorbyrum
trevorbyrumCOMMUNITY
Explore all skills by this author →
GitHub

ui-review

Audit frontend code for design token violations and accessibility failures.

1|1|Updated Mar 9, 2026
Search Tags:#ui#anti-patterns#accessibility#frontend#design system#review
One-click install
npx skills add https://github.com/trevorbyrum/claude-skills-suite --skill ui-review-trevorbyrum
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-review
Source: https://github.com/trevorbyrum/claude-skills-suite/tree/main/skills/ui-review
Command: npx skills add https://github.com/trevorbyrum/claude-skills-suite --skill ui-review-trevorbyrum

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill identifies and flags UI elements that exhibit common anti-patterns, token violations, accessibility failures, and inconsistencies, ensuring a more polished and human-like user interface.

Core Features & Use Cases

  • Token Compliance Audit: Detects and flags the use of raw values (colors, spacing, fonts) instead of design tokens.
  • Anti-Pattern Detection: Identifies common AI-generated UI flaws like default fonts, nested cards, and generic copy.
  • Accessibility Scan: Checks for missing alt text, improper element usage, and contrast issues.
  • Use Case: Before deploying a new frontend feature, run this Skill to catch any UI elements that look machine-generated or fail accessibility standards, ensuring a high-quality user experience.

Quick Start

Run a full UI review of the current project codebase.

Frequently Asked Questions about ui-review

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

FAQPage Schema
How do I audit frontend code for AI-generated UI anti-patterns?▼

To audit frontend code for AI-generated UI anti-patterns, scan TypeScript, JSX, CSS, and SCSS files against project context and design system references to flag visual inconsistencies and missing interactive states.

What are common AI anti-patterns in UI design?▼

Common AI anti-patterns in UI design include default fonts, nested cards, generic copy, and missing data states. Scanning frontend code helps identify these machine-generated flaws to ensure a polished user interface.

How do I check my frontend components for design token violations?▼

To check frontend components for design token violations, audit your codebase to detect and flag the use of raw values for colors, spacing, and fonts instead of the established design tokens defined in your references.

Can I scan JSX and TypeScript files for accessibility failures?▼

Yes, you can scan JSX and TypeScript files for accessibility failures. The process checks for missing alt text, improper element usage, and contrast issues to ensure high-quality user experience standards are met.

Does this UI review process work with SCSS and CSS files?▼

Yes, this UI review process works with SCSS and CSS files. It scans these stylesheet formats alongside TypeScript and JSX to detect raw value usage, design token violations, and visual inconsistencies.

When should I run a UI accessibility and token compliance scan?▼

You should run a UI accessibility and token compliance scan before deploying a new frontend feature. This catches machine-generated UI elements and accessibility failures early, ensuring a high-quality user experience.

Related Skills

Explore More Design & Creative Skills→
tutur3ututur3u
53

web-design-guidelines

Audit HTML, CSS, and JavaScript against Web Interface Guidelines.

Official
Basic
SuperCorksSuperCorks

frontend-design

Enforce typography, spacing, color contrast, and interaction states in frontend UI design workflows.

Community
Basic
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
nathankoerschnernathankoerschner

rams

Review code for WCAG 2.1 accessibility and visual design issues.

Community
Intermediate