skills.rest
yongwoon
yongwoonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ywc-ui-ux-review

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
One-click install
npx skills add https://github.com/yongwoon/ywc-agent-toolkit --skill ywc-ui-ux-review
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
GraffiohGraffioh

web-browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Advanced
kinncjkinncj
23

a11y-audit

Run WCAG 2.2 AA audits on generated UI and post PR comments.

Community
Advanced
SternrasslerSternrassler
1

Chrome DevTools MCP Skill

Automate browser interactions and testing via the Chrome DevTools MCP Server.

Official
Advanced
airoweairowe
14

Accessibility Audit Skill

Audit web projects for WCAG 2.1 violations using axe-core and eslint-plugin-jsx-a11y.

Community
Advanced