ui-audit

Scan dashboard-next TS/TSX files to detect broken DOM IDs and selectors.

Updated Aug 23, 2026

Search Tags:#debugging #frontend #react #audit #dashboard #selectors #dom-id

Ready to run

npx skills add https://github.com/SameerG7/synthesis-hackathon-aibom --skill ui-audit-sameerg7

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-audit
Source: https://github.com/SameerG7/synthesis-hackathon-aibom/tree/main/.claude/skills/ui-audit
Command: npx skills add https://github.com/SameerG7/synthesis-hackathon-aibom --skill ui-audit-sameerg7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI Wiring Audit identifies and reports broken or mismatched DOM IDs and selectors in dashboard-next components to prevent broken wiring after frontend changes.

Core Features & Use Cases

Automated ID-consistency checks: scans TS/TSX files to surface missing IDs, orphaned selectors, and wiring gaps across routes and components.
Targeted debugging guidance: provides actionable insights to align DOM IDs with component templates post-change.
Use Case: after a UI refactor, run this audit to ensure all interactive elements are wired and visible in the DOM.

Quick Start

Run the ui-audit to scan the dashboard-next codebase for DOM-id or selector inconsistencies.

Frequently Asked Questions about ui-audit

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

FAQPage Schema

How do I detect broken DOM IDs and orphaned selectors in React dashboard components?▼

To detect broken DOM IDs and orphaned selectors in React dashboard components, run a static scan of TS/TSX files to surface missing IDs and wiring gaps. This identifies mismatched selectors and enables targeted fixes after frontend changes.

What is the best way to find UI wiring issues after a frontend refactor?▼

Finding UI wiring issues after a frontend refactor requires automated ID-consistency checks across routes and components. Scanning TS/TSX files surfaces missing IDs and orphaned selectors, ensuring interactive elements remain correctly wired and visible in the DOM.

Can I audit mismatched selectors across multiple routes in a dashboard codebase?▼

Yes, you can audit mismatched selectors across multiple routes in a dashboard codebase. The scan applies across routes and components to detect wiring gaps, aligning DOM IDs with component templates to prevent broken interactive elements.

How do I scan TSX files for missing DOM IDs?▼

To scan TSX files for missing DOM IDs, perform a static analysis of the dashboard-next codebase. This surfaces missing IDs, orphaned selectors, and inconsistent wiring, providing targeted debugging guidance to align DOM elements with templates.

Why does my dashboard component have orphaned selectors after updating the UI?▼

Orphaned selectors in dashboard components occur when frontend changes leave DOM IDs mismatched or missing. Running an ID-consistency scan identifies these wiring gaps and provides actionable insights to realign selectors with the updated templates.