New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

UI UX Audit

by chmonitor in chmonitor/chmonitor

Automated UI/UX + accessibility audit for the ClickHouse Monitor dashboard (apps/dashboard-tsr).

GPL-3.0Auto-check: notesFrontend & Design

Install UI UX Audit

skills CLI
$ npx skills add chmonitor/chmonitor --skill ui-ux-audit -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install chmonitor/chmonitor ui-ux-audit --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/chmonitor/chmonitor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/ui-ux-audit .claude/skills/ui-ux-audit && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ui-ux-audit
GitHub stars
299
Token cost
~2k tokens
SKILL.md length
825 words
Files
5 (incl. scripts)
Skills in repo
53
Repo updated
First seen
Licence
GPL-3.0

At a glance

Automated UI/UX + accessibility audit for the ClickHouse Monitor dashboard (apps/dashboard-tsr).

  • Wants to test all pages
  • SKILL.md covers When to reach for it, Mental model — why two targets, One-time setup and Running an audit, plus 4 more sections
  • Runs JavaScript and Shell scripts from its folder; calls bun and bash; reaches dash-tsr.chmonitor.dev
  • Audit the dashboard

What it does

UI UX Audit is an agent skill from chmonitor/chmonitor. Automated UI/UX + accessibility audit for the ClickHouse Monitor dashboard (apps/dashboard-tsr). Use this whenever the user wants to "test all pages", "audit the dashboard", "find UI/UX issues", "check accessibility / a11y", "spot visual regressions", "screenshot every route", "reproduce a UI bug", or asks to verify the dashboard UI after a change or deploy. It sweeps every dashboard route headlessly, captures console errors + failed network calls, runs axe-core accessibility scans, detects layout overflow and…

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including scripts (for example `scripts/setup.sh`).

It sits in Frontend & Design, covering Accessibility, UI design and Visual regression testing. It works with ClickHouse and Playwright. The repository describes itself as: Open-source operational advisor for ClickHouse — real-time monitoring plus AI-driven index/partition/materialized-view recommendations. The licence is GPL-3.0.

When your agent uses it

  • Wants to test all pages
  • Audit the dashboard
  • Find UI/UX issues
  • Check accessibility / a11y

Example prompts

  • “test all pages”
  • “audit the dashboard”
  • “find UI/UX issues”
  • “/ui-ux-audit”

Requirements

  • Node.js
  • A Bash shell

What it can do on your machine

Read from SKILL.md and the folder at commit fc39ef0. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 3 files in scripts/ (JavaScript and Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • bun
    • bash

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • dash-tsr.chmonitor.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI UX Audit loads about 2k tokens when it runs. Until then it costs about 230 tokens; SKILL.md has 825 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~230
When it runs · the whole SKILL.md, loaded when a task matches
~2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:40
    Auth is fully bypassed, and `.env.local` points at a real ClickHouse, so you get
  • NoteMentions a .env fileSKILL.md:83
    s the dev server up with auth disabled. `.env.local`

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from chmonitor/chmonitor at commit fc39ef0, republished under its GPL-3.0 licence (© chmonitor). 825 words, ~2,009 tokens.

Download SKILL.mdSave it as .claude/skills/ui-ux-audit/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
ui-ux-audit
description
Automated UI/UX + accessibility audit for the ClickHouse Monitor dashboard (apps/dashboard-tsr). Use this whenever the user wants to "test all pages", "audit the dashboard", "find UI/UX issues", "check accessibility / a11y", "spot visual regressions", "screenshot every route", "reproduce a UI bug", or asks to verify the dashboard UI after a change or deploy. It sweeps every dashboard route headlessly, captures console errors + failed network calls, runs axe-core accessibility scans, detects layout overflow and stuck loading skeletons, diffs screenshots against a baseline for visual regression, and emits a runnable repro (trace.zip + script) for each issue so it can be replayed on demand. Runs against the local dev server (auth bypassed) by default, or the live Clerk-protected deployment using the stored test session. Prefer this over ad-hoc one-off Playwright scripts for any multi-page UI check.

ClickHouse Monitor — UI/UX Audit

This skill drives a real browser over every dashboard route and reports the UI/UX problems that matter, with a reproducible artifact for each one. It exists because the dashboard has ~85 routes; eyeballing them by hand misses regressions (a tab-switch freeze, a chart that overflows on one page, an a11y violation that only appears in an empty state). A scripted sweep catches the whole class at once.

When to reach for it

Trigger on requests like "test all the pages", "audit the dashboard UI", "find accessibility issues", "did my change break any page", "screenshot every route", "check for visual regressions", or "reproduce that UI bug". It is the right tool any time the surface under test is more than one or two pages.

Mental model — why two targets

The dashboard is auth-aware, not auth-walled: the shell, nav, and most pages render for anonymous users; only data calls are gated. That gives two useful targets:

  • local (default): apps/dashboard-tsr running with VITE_AUTH_PROVIDER=none. Auth is fully bypassed, and .env.local points at a real ClickHouse, so you get data-bearing states (real charts, tables) with zero login friction. Best for catching structural/a11y/console-error/regression issues. CI-friendly.
  • live: https://dash-tsr.chmonitor.dev, which runs pk_live Clerk. The audit reuses a stored browser session (~/.config/chmonitor/clerk-state.json) from the dedicated test account, so it can exercise the production auth path and authorized data without logging in each run. Use this to verify prod-only states and post-deploy smoke. (See the test-account-clerk memory for how that session was created and refreshed — Clerk's Turnstile means the session must be minted with a headed browser; the audit itself runs headless off the cookie.)

One-time setup

Install the toolchain (Playwright + axe-core + image-diff) outside the repo:

bash
bash .claude/skills/ui-ux-audit/scripts/setup.sh

It installs into ~/.config/chmonitor/qa-tools and downloads Chromium. Idempotent.

Running an audit

Always run from the tools dir so playwright resolves:

bash
cd ~/.config/chmonitor/qa-tools

# Local sweep (default) — start the dev server first (see below)
bun ~/project/clickhouse-monitor/.claude/skills/ui-ux-audit/scripts/audit.mjs --target=local

# Just a couple of routes (fast iteration / reproduction)
bun .../audit.mjs --target=local --only=/explorer,/sql,/overview

# Live deployment, reusing the Clerk test session
bun .../audit.mjs --target=live

# Visual regression: pass a previous run's shots/ as the baseline
bun .../audit.mjs --target=local --baseline=/tmp/chm-ui-audit/local-<prev>/shots
Local dev server

The local target needs the dev server up with auth disabled. .env.local already sets VITE_AUTH_PROVIDER=none. Start it and wait for the port:

bash
cd ~/project/clickhouse-monitor/apps/dashboard-tsr && bun run dev

Vite prints the actual URL (usually http://localhost:3000). If it differs, pass it: BASE_URL=http://localhost:5173 bun .../audit.mjs.

Useful flags
FlagDefaultMeaning
--target=local|livelocalwhich deployment to audit
--only=/a,/ball routesrestrict to specific routes (auto-discovers all otherwise)
--baseline=<dir>nonescreenshot dir to diff against for visual regression
--host=N0ClickHouse host id (?host=)
--a11y=offonskip the axe-core accessibility scan
--settle=ms3500wait after load for charts/data to render before checking
--headedoffwatch the run in a visible window
--out=<dir>/tmp/chm-ui-audit/...output directory

What it checks per route

Routes are auto-discovered by scanning apps/dashboard-tsr/src/routes (TanStack Start file routing — pathless (group) dirs, route.tsx layouts, -/_ private files, and $param dynamic routes are handled). For each route:

  • console errors + uncaught pageerror (high) — the tab-switch-freeze class.
  • failed network calls (>=400, minus known-noisy ones).
  • accessibility via axe-core (WCAG 2 A/AA), reporting only serious/critical.
  • horizontal overflow — page wider than the viewport, with the offending nodes.
  • stuck skeletons — loading placeholders still present after settle (dead query).
  • error states — "something went wrong" / "is not a constructor" rendered text.
  • visual regression — pixel diff vs a baseline screenshot (when provided).
Show full SKILL.md (320 more words)Show less

Output & reproduction

Everything lands in --out (printed at the end):

  • report.html — open this first. Grouped by route, severity-colored, screenshots inline, with the exact repro command per route.
  • report.json — machine-readable findings (feed to follow-up automation).
  • shots/ — full-page screenshot of every route (also the next run's baseline).
  • diffs/ — visual-regression diff images.
  • traces/<route>.zip — Playwright trace for routes with findings. Replay the exact session: bun x playwright show-trace traces/<route>.zip.
  • repro/<route>.mjs — a standalone, headed Playwright script that re-opens the route, prints the console errors, and leaves the browser open 60s to inspect. This is the "reproduce it when needed" artifact — hand it to anyone.

Interpreting results

  • On local, some failed-request findings can be benign (a ClickHouse table missing on the dev instance). Triage against the route's purpose before filing.
  • a11y findings cite the WCAG rule id and a helpUrl — fix at the component, not in components/ui/ (shadcn primitives stay pristine; style at the usage site).
  • Treat console-error and error-state on a previously-clean route as a real regression — that is exactly the signal that caught the explorer tab-switch crash.

Refreshing the live session

The live target reuses a persistent browser profile at ~/.config/chmonitor/clerk-userdata (it keeps Clerk's full client state, unlike a storageState snapshot whose short-lived JWT expires). Populate or refresh it with the headed login helper (headed because pk_live Turnstile only auto-passes in a real browser window):

bash
bun .claude/skills/ui-ux-audit/scripts/live-login.mjs   # HEADLESS=0 by default

It signs the dedicated test account in and writes the profile; audit.mjs --target=live then runs headless off it. If a verification code is required, it is emailed to duyet.cs@gmail.com (plus-addressed) — read it via the Gmail MCP and write the 6 digits to /tmp/chm-otp.txt; the helper polls that file. Full account details live in the test-account-clerk memory note.

Note: on a deployment where the client is built with VITE_AUTH_PROVIDER=none (no Clerk mounted client-side), there is no in-app sign-in and the live target is audited as an anonymous Guest — structure/a11y/visual coverage only, data calls may 401 depending on the server's CHM_AUTH_PROVIDER.

© chmonitor, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (scripts) in .claude/skills/ui-ux-audit of chmonitor/chmonitor.

  • SKILL.md
  • .gitignore
  • scripts/audit.mjs
  • scripts/live-login.mjs
  • scripts/setup.sh

Open the folder on GitHubat commit fc39ef0

Compare with similar skills

UI UX Audit next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI UX Audit compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI UX Audit this skillchmonitor/chmonitor299—~2kAutomated safety check: NotesGPL-3.0
Control UIcursor/plugins10k2 repos~1.2kAutomated safety check: PassNone
Browser QAaffaan-m/ECC275k2 repos~1kAutomated safety check: PassMIT
Common Web Visual TestingHoangNguyen0403/agent-skills-standard571—~760Automated safety check: PassMIT
Frontend Visual QAdaymade/claude-code-skills1.4k—~7.7kAutomated safety check: PassMIT
Vrtmarigold-ui/marigold146—~787Automated safety check: PassMIT

Similar skills

  • Control UI

    cursor/plugins

    Official

    Build or adapt a local browser/CDP harness to drive and inspect a web, IDE, or Electron UI.

    10k GitHub starsUsed in 2 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Browser QA

    affaan-m/ECC

    Run automated post-deploy UI verification with a browser automation MCP (claude-in-chrome, Playwright, or Puppeteer): console-error and Core Web Vitals smoke checks, form and auth-flow interaction…

    275k GitHub starsUsed in 2 repos~1k tokens
    Frontend & DesignAuto-check passed

  • Common Web Visual Testing

    HoangNguyen0403/agent-skills-standard

    Standardizes visual audits, responsive design, and behavioral testing for web apps.

    571 GitHub stars~760 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Frontend Visual QA

    daymade/claude-code-skills

    Audits already-rendered UI — web app, deck/slide, dashboard, design-system, or Electron/native app — via real-browser/native-app journeys and a Playwright sweep.

    1.4k GitHub stars~7.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Vrt

    marigold-ui/marigold

    DST — Trigger the Visual-Regression-Tests (Chromatic) GitHub Actions workflow on the current or a given branch.

    146 GitHub stars~787 tokensUpdated today
    Frontend & DesignAuto-check passed

  • UI Visual Debugging

    NangoHQ/nango

    A skill your agent uses when modifying or visually debugging Nango frontend UI, including packages/webapp, packages/connect-ui, browser interactions, screenshots, and visual regressions.

    13k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed

More from chmonitor/chmonitor

All 53 skills in this repo

  • Hyperframes Creative

    chmonitor/chmonitor

    Non-animation creative direction for HyperFrames videos. An agent skill from chmonitor/chmonitor.

    299 GitHub starsUsed in 5 repos~1.3k tokens
    Auto-check passed

  • Hyperframes Media

    chmonitor/chmonitor

    Audio and media assets for HyperFrames compositions, produced by one shared audio engine (scripts/audio.mjs) — multi-provider TTS (HeyGen / ElevenLabs / Kokoro local), background music + sound…

    299 GitHub starsUsed in 1 repo~2.8k tokens
    Auto-check: notes

  • Remotion To Hyperframes

    chmonitor/chmonitor

    Port an existing Remotion (React) composition to HyperFrames HTML.

    299 GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

  • Music To Video

    chmonitor/chmonitor

    A skill your agent uses when the user has a music track (an audio file, or a video to pull audio from) and wants a beat-synced HyperFrames video, calm to hard-hitting.

    299 GitHub starsUsed in 1 repo~4k tokens
    Auto-check: notes

  • Hyperframes Animation

    chmonitor/chmonitor

    All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus…

    299 GitHub starsUsed in 2 repos~1.8k tokens
    Auto-check passed

  • Faceless Explainer

    chmonitor/chmonitor

    turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video, up to ~3 min (sweet spot 30-90s), where every visual is invented (typography, abstract graphics…

    299 GitHub stars~4.5k tokensUpdated 2 days ago
    Auto-check: notes

Works with

Categories

Questions about UI UX Audit

What does UI UX Audit do?

Automated UI/UX + accessibility audit for the ClickHouse Monitor dashboard (apps/dashboard-tsr). UI UX Audit is an agent skill from chmonitor/chmonitor. Automated UI/UX + accessibility audit for the ClickHouse Monitor dashboard (apps/dashboard-tsr).

When should I use UI UX Audit?

UI UX Audit fits situations like: wants to test all pages; audit the dashboard; find UI/UX issues; check accessibility / a11y.

How do I install UI UX Audit in Claude Code?

Run `npx skills add chmonitor/chmonitor --skill ui-ux-audit -a claude-code`. Or copy the skill folder (.claude/skills/ui-ux-audit in chmonitor/chmonitor) into .claude/skills/ui-ux-audit in your project. Claude Code loads it when a task matches its description.

How do I install UI UX Audit in Codex?

Run `npx skills add chmonitor/chmonitor --skill ui-ux-audit -a codex`. Or copy the skill folder (.claude/skills/ui-ux-audit in chmonitor/chmonitor) into .agents/skills/ui-ux-audit in your project. Codex loads it when a task matches its description.

Can I use UI UX Audit in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add chmonitor/chmonitor --skill ui-ux-audit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-ux-audit, .gemini/skills/ui-ux-audit, .github/skills/ui-ux-audit and .opencode/skills/ui-ux-audit in your project.

What does UI UX Audit need to run?

Going by SKILL.md and its folder, UI UX Audit needs JavaScript and a shell for the scripts in its folder and the command-line tools its instructions call (bun and bash). Our summary lists: Node.js; A Bash shell.

Does UI UX Audit access the network?

SKILL.md names 1 domain. In commands or code: dash-tsr.chmonitor.dev; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is UI UX Audit safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does UI UX Audit use?

UI UX Audit is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI UX Audit use?

About 2k tokens (SKILL.md is roughly 8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to UI UX Audit?

Skills that share tags, products or a category with UI UX Audit: Control UI (cursor/plugins, 10k stars), Browser QA (affaan-m/ECC, 275k stars), Common Web Visual Testing (HoangNguyen0403/agent-skills-standard, 571 stars) and Frontend Visual QA (daymade/claude-code-skills, 1.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI UX Audit?

chmonitor (a GitHub organization) maintains it in chmonitor/chmonitor, which has 299 GitHub stars. The repository holds 53 skills in this directory. The repository was last updated on October 5, 2026.

Source: chmonitor/chmonitor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.