skills.rest
chmonitor
chmonitorOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-ux-audit

Audit ClickHouse Monitor dashboard routes for UI regressions and accessibility violations.

255|42|Updated Nov 16, 2023
Search Tags:#playwright#automated testing#visual regression#accessibility testing#clickhouse#ui-ux audit#dashboard qa
One-click install
npx skills add https://github.com/chmonitor/chmonitor --skill ui-ux-audit-chmonitor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-audit
Source: https://github.com/chmonitor/chmonitor/tree/main/.claude/skills/ui-ux-audit
Command: npx skills add https://github.com/chmonitor/chmonitor --skill ui-ux-audit-chmonitor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, @axe-core/playwright, pixelmatch, pngjs, and includes scripts (resource) components.

What problem does it solve?

The ClickHouse Monitor dashboard has over 85 routes, making manual UI checks tedious and error-prone. Regressions like tab-switch freezes, chart overflows, accessibility violations, and stuck loading states often slip through manual review, especially after code changes or deployments.

Core Features & Use Cases

  • Full Route Sweep: Automatically navigates every dashboard route (auto-discovered from TanStack Start file routing) to catch issues across the entire application surface.
  • Multi-Category Issue Detection: Identifies console errors, failed network requests, WCAG 2 A/AA accessibility violations, horizontal layout overflows, stuck loading skeletons, and rendered error states.
  • Visual Regression Testing: Diffs full-page screenshots against a provided baseline to detect unintended visual changes between releases.
  • Reproducible Issue Artifacts: Generates Playwright trace files and standalone headed repro scripts for every detected issue, eliminating the need to manually recreate bugs.
  • Dual Target Support: Runs against a local auth-bypassed dev server for fast CI-friendly checks, or a live Clerk-protected deployment using a persistent authenticated session to verify production-only states.

Quick Start

Use the ui-ux-audit skill to run a complete UI/UX and accessibility sweep of the ClickHouse Monitor dashboard after you deploy a code change or update to verify no pages are broken or regressed.

Frequently Asked Questions about ui-ux-audit

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

FAQPage Schema
How do I automate UI regression testing across all dashboard routes?▼

To automate UI regression testing across all dashboard routes, you can run a full route sweep that auto-discovers pages and diffs full-page screenshots against a provided baseline to detect unintended visual changes.

What's the best way to run WCAG 2 A/AA accessibility testing on a TanStack Start dashboard?▼

For WCAG 2 A/AA accessibility testing on a TanStack Start dashboard, automated Playwright scans identify accessibility violations across all auto-discovered routes, catching issues manual review often misses.

How do I detect horizontal layout overflows and stuck loading skeletons after deployment?▼

To detect horizontal layout overflows and stuck loading skeletons after deployment, run an automated full sweep of dashboard routes that identifies multi-category issues like rendering errors and console failures.

Can I run Playwright visual regression tests against a live Clerk-authenticated deployment?▼

Yes, you can run Playwright visual regression tests against a live Clerk-authenticated deployment using a persistent authenticated session to verify production-only states, or target a local auth-bypassed dev server.

How do I generate reproducible Playwright traces for detected UI bugs?▼

To generate reproducible Playwright traces for detected UI bugs, the audit creates standalone headed repro scripts and trace files for every issue, eliminating the need to manually recreate bugs.

Related Skills

Explore More Software Engineering Skills→
clerkclerk
66

clerk-tanstack-patterns

Implement Clerk authenticated routing patterns for TanStack Start apps.

Official
Intermediate
cyalcalacyalcala
1

debugging-and-error-recovery

Diagnose root causes in failing tests, builds, and runtime errors via structured triage.

Community
Advanced
KrismithReddy12KrismithReddy12

land-and-deploy

Merge pull requests, trigger CI/CD pipelines, and validate production health.

Community
Advanced
roanbrasilroanbrasil
5

static-analysis

Automate static analysis for Java, Kotlin, Python, and Rust codebases.

Community
Advanced