ywc-ui-ux-review

Name: ywc-ui-ux-review
Availability: InStock
Author: yongwoon

Automate UI/UX audits with static code analysis and Chrome DevTools MCP exploration.

8|1|Updated May 13, 2026

Search Tags:#design #ui #accessibility #audit #usability #wcag #ux

Ready to run

npx skills add https://github.com/yongwoon/ywc-agent-toolkit --skill ywc-ui-ux-review

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ywc-ui-ux-review
Source: https://github.com/yongwoon/ywc-agent-toolkit/tree/main/claude-code/skills/ywc-ui-ux-review
Command: npx skills add https://github.com/yongwoon/ywc-agent-toolkit --skill ywc-ui-ux-review

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the difficulty of identifying UX issues by bridging the gap between static code analysis and real-world user interface behavior, ensuring that design inconsistencies and accessibility failures are caught before release.

Core Features & Use Cases

Hybrid Review: Combines static code analysis with live UI exploration via Chrome DevTools MCP to detect runtime layout shifts, focus traps, and accessibility violations.
Multi-Heuristic Evaluation: Validates projects against Nielsen 10, WCAG 2.2 AA, Material 3, and Apple HIG standards.
Use Case: Use this to audit a dashboard's usability and information architecture by providing a live URL and having the agent perform a prioritized, evidence-backed review.

Quick Start

Use the ywc-ui-ux-review skill to audit the usability and information architecture of the dashboard at http://localhost:3000.

Frequently Asked Questions about ywc-ui-ux-review

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

FAQPage Schema

How do I audit my web application for WCAG 2.2 AA accessibility compliance?▼

Audit web application UI/UX by integrating static code analysis with live Chrome DevTools MCP exploration to detect runtime layout shifts and accessibility violations. This hybrid approach evaluates information architecture, visual design, and usability against established heuristic guidelines.

What is the best way to evaluate a live dashboard for Nielsen usability heuristics?▼

Evaluate dashboard usability by running a multi-heuristic validation against Nielsen 10, WCAG 2.2 AA, Material 3, and Apple HIG standards. The agent explores the live URL to deliver a prioritized, evidence-backed review of information architecture and visual design.

Does this UI audit work with both static code and live runtime exploration?▼

Yes, UI audits work with both static code and live runtime exploration via Chrome DevTools MCP. This hybrid method catches runtime layout shifts, focus traps, and accessibility failures that static analysis alone would miss before release.

Can I check my web app for focus traps and runtime layout shifts automatically?▼

Check for focus traps and runtime layout shifts automatically by integrating Chrome DevTools MCP into the UI/UX audit process. Live exploration validates real-world user interface behavior and catches dynamic accessibility failures.

What design guidelines are used to validate visual design and information architecture?▼

Visual design and information architecture are validated using Nielsen 10, WCAG 2.2 AA, Material 3, and Apple HIG platform-specific design guidelines. These standards form the baseline for the multi-heuristic evaluation report.

When do I need a hybrid UI/UX audit instead of static code analysis?▼

You need a hybrid UI/UX audit when static code analysis cannot capture real-world user interface behavior. Bridging this gap ensures dynamic issues like runtime layout shifts, focus traps, and accessibility failures are caught before release.