Imported from Pranjal-Upadhyay/ui-audit-pro (SKILL.md). Install upstream with npx skills add Pranjal-Upadhyay/ui-audit-pro. Copyright stays with the author.

UI Audit Pro — Consistency & Integration Audit Skill

Two-layer audit skill that performs full UI/UX visual/behavioral consistency checks and frontend-to-backend communication integrity validation across any web application.

Architecture: Two-Layer Design

Layer 1: Runtime/Browser-Level Checks (Framework-Agnostic)

Everything involving rendered output — screenshots, computed styles, DOM structure, network requests/responses, interaction behavior — is done via browser automation (Playwright) against the actual running app. This layer does NOT need to know whether the app is React, Next.js, Vue, Svelte, or raw HTML. It covers:

All 24 UI/UX consistency categories (including AI design tropes detection)
All 13 frontend-backend integration checks (network layer)
Accessibility powered by axe-core — the vendored Deque axe-core engine (scripts/capture/vendor/axe.min.js, MPL-2.0) runs ~90 WCAG 2.0/2.1 A/AA + best-practice rules against the live DOM, so a11y findings carry real impact levels, precise selectors, and Deque help URLs. Falls back to lightweight heuristics only if axe cannot be injected (never silently reports zero).
Works with zero source code — can audit a live URL only

Layer 2: Source-Code-Level Checks (Framework-Aware, Pluggable Adapters)

Everything involving reading the codebase directly — finding exact file/line locations, tracing API call sites, validating type contracts, understanding routing — uses pluggable adapters that are auto-detected. Each adapter implements the same interface:

list_routes() — enumerate pages/screens
find_api_call_sites() — find where frontend calls backend
find_component_definitions() — map DOM to source files
get_type_contracts() — find TypeScript interfaces, PropTypes, OpenAPI specs

Supported Adapters:

Adapter	Framework
`nextjs`	Next.js (App Router + Pages Router)
`react`	React (CRA, Vite, etc.)
`vue`	Vue.js
`static-html`	Vanilla HTML/CSS/JS
`node-express`	Node.js/Express backend

When to Apply

Use this skill when:

Auditing a web app for visual/behavioral consistency before a release
Reviewing PRs for frontend-backend integration regressions
Performing a quality audit on a live/staging deployment
Checking a codebase for design system drift
Validating API contract adherence between frontend and backend
Running automated accessibility + consistency checks

Operating Modes

Mode	Requirements	What It Does
Live-only	Running URL	Browser-level checks only (Layer 1) — full audit with no source code
Code-only	Source code	Source-level checks only (Layer 2) — adapter-based analysis
Combined (preferred)	Both	Layer 1 detects visual/behavioral issues; Layer 2 pinpoints file/line locations

How to Use

Step 1: Determine Audit Scope

Ask the user (or infer from context):

Codebase path — where is the source code? (optional)
Live URL — is there a running instance? (optional but recommended)
Audit depth — full audit or focused on specific categories?
Previous report — prior audit report to diff against?

Step 2: Auto-Detect Stack (if source code provided)

python3 skills/ui-audit-pro/scripts/audit.py detect --codebase <path>

This inspects package.json, config files, and directory structure to determine:

Frontend framework (Next.js, React, Vue, Svelte, Angular, vanilla)
Backend framework (Express, Fastify, Python, Go)
Language (JavaScript, TypeScript, Python)
Which adapters to load

Step 3: Discovery Phase

Enumerate all routes/screens/components:

From source code (Layer 2):

Adapters parse framework-specific routing config
Extract API call sites and type contracts
Map components to source files

From live instance (Layer 1):

Crawl all internal links
Capture full-page screenshots
Intercept all network requests

python3 skills/ui-audit-pro/scripts/audit.py discover \
  --codebase <path> --url <live-url> --output <dir>

Step 4: Capture Phase

For each discovered route:

Browser-level (Layer 1):

Full-page screenshot
DOM snapshot with computed styles for all interactive elements
Network request/response log with timing and payload shapes
Accessibility audit

Source-level (Layer 2):

CSS/style definitions extracted
Component props and state patterns
API endpoint URLs and expected shapes

python3 skills/ui-audit-pro/scripts/audit.py capture \
  --codebase <path> --url <live-url> --output <dir>

Step 5: Classify Phase

Group captured elements by semantic role:

"Primary CTA button" / "Danger action button"
"Data card" / "List pagination control"
"Modal/dialog" / "Form input"
"Loading skeleton" / "Error state display"

Step 6: Audit Phase

Run all 37 checks (24 UI/UX + 13 integration). Checks whose input layer is unavailable are reported as SKIPPED rather than silently passing:

python3 skills/ui-audit-pro/scripts/audit.py audit \
  --codebase <path> --url <live-url> --output <dir>

Step 7: Generate Report

python3 skills/ui-audit-pro/scripts/audit.py report \
  --findings <findings-json> --output <dir> \
  --previous-report <optional-previous-report.md>

Full Pipeline

python3 skills/ui-audit-pro/scripts/audit.py full \
  --codebase <path> --url <live-url> --output ./audit-output

Baseline Diffing (CI Gate)

Turn a one-shot audit into a repeatable gate. Save a run as the baseline, then compare later runs against it to see what is new, resolved, and persistent — and fail CI on regressions.

# 1. Establish a baseline (any full/live run's output dir is a baseline)
python3 skills/ui-audit-pro/scripts/audit.py full \
  --codebase <path> --url <live-url> --output ./baseline

# 2a. Compare a fresh run inline (runs the audit, then gates)
python3 skills/ui-audit-pro/scripts/audit.py full \
  --codebase <path> --url <live-url> --output ./current \
  --baseline ./baseline --fail-on new-high

# 2b. Or gate an existing output dir against a baseline (no re-run)
python3 skills/ui-audit-pro/scripts/audit.py baseline \
  --output ./current --baseline ./baseline --fail-on new-high

--fail-on modes (exit code 1 = gate failed, 0 = passed):

Mode	Fails when
`none`	never (report only)
`new`	any new finding appears
`new-high`	a new high/critical finding appears (default)
`regressed`	a new high/critical finding or an existing finding's severity increased
`any`	any new finding or any severity regression

Coverage-aware — critical property: a baseline finding that is absent this run is only counted resolved if its check actually ran again. If the check was skipped (e.g. no live URL this run), the finding is reported as UNVERIFIED, never resolved — so a drop in coverage can never silently mask a regression. Runs that skip checks that the baseline exercised also flag COVERAGE REGRESSED.

Folder Structure

skills/ui-audit-pro/
├── SKILL.md                          # This file
├── requirements.txt                  # Python dependencies
├── references/
│   ├── consistency-categories.md     # 23 UI/UX categories reference
│   └── backend-integration-checks.md # 13 integration checks reference
└── scripts/
    ├── audit.py                      # Main engine (two-layer orchestrator)
    ├── baseline_diff.py              # Coverage-aware baseline diff + CI gate
    ├── detect_stack.py               # Auto-detects framework stack
    ├── report_generator.py           # Generates structured audit reports
    ├── __init__.py
    ├── __main__.py
    ├── analyzers/                    # Check logic
    │   ├── consistency_checker.py    # 23 UI/UX consistency checks
    │   ├── integration_checker.py    # 13 integration checks
    │   └── ...
    ├── adapters/                     # Framework-specific source analysis
    │   ├── base.py                   # BaseAdapter interface
    │   ├── nextjs.py                 # Next.js adapter
    │   ├── react.py                  # React adapter
    │   ├── vue.py                    # Vue adapter
    │   ├── static_html.py            # Vanilla HTML/CSS/JS adapter
    │   └── node_express.py           # Node.js/Express backend adapter
    └── capture/                      # Browser-level data capture
        ├── screenshot_capture.py     # Playwright screenshot capture
        ├── network_interceptor.py    # Network traffic interception
        ├── dom_extractor.py          # DOM snapshot + axe-core a11y extraction
        └── vendor/
            └── axe.min.js            # Vendored axe-core (Deque, MPL-2.0)

Graceful Degradation

Degradation is always reported, never silent. Every report includes an Audit Coverage section listing which checks ran and which were skipped, and zero findings with incomplete coverage is graded UNKNOWN, not EXCELLENT.

Scenario	Behavior
`--url` given but Playwright not installed	Hard error, exit 2. No report is written.
No source code, only live URL	Layer 1 runs; Layer 2 checks marked SKIPPED with reason
Source code only, no live URL	Layer 2 runs; Layer 1 checks marked SKIPPED with reason
Unknown framework	`static-html` adapter used as fallback; limited source tracing
No TypeScript	Type contract checks skipped gracefully
No adapters match	Full Layer 1 audit; report clearly states source tracing unavailable
axe-core cannot be injected	Falls back to built-in a11y heuristics (missing alt/label/button-name); `a11y_engine` records which ran

ui-audit-pro

About

UI Audit Pro — Consistency & Integration Audit Skill

Architecture: Two-Layer Design

Layer 1: Runtime/Browser-Level Checks (Framework-Agnostic)

Layer 2: Source-Code-Level Checks (Framework-Aware, Pluggable Adapters)

When to Apply

Operating Modes

How to Use

Step 1: Determine Audit Scope

Step 2: Auto-Detect Stack (if source code provided)

Step 3: Discovery Phase

Step 4: Capture Phase

Step 5: Classify Phase

Step 6: Audit Phase

Step 7: Generate Report

Full Pipeline

Baseline Diffing (CI Gate)

Folder Structure

Graceful Degradation

Report Structure

Audit Checklist

UI/UX Categories (24)

Integration Categories (13)

Use it

Manifest

Reviews