skills.rest
SameerG7
SameerG7COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/SameerG7/synthesis-hackathon-aibom --skill ui-audit-sameerg7
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
joonlabjoonlab
8

web-to-markdown

Convert web page DOM content into Markdown files with YAML frontmatter.

Community
Intermediate
aimonk2025aimonk2025
3

gtm-dom-standardization

Standardize DOM identifiers and GTM tracking classes across HTML, JSX/TSX, and Vue projects.

Community
Advanced
alexgorbatchevalexgorbatchev
1

react-development

Enforce JSX usage and test-id contracts in React components.

Community
Advanced
vallafedericovallafederico
25

webflow-editor-integration

Detect Webflow Designer mode and gate interactive logic for published sites.

Community
Basic