What problem does it solve?
Maintaining UI consistency, data quality, and UX compliance across multiple pages and user roles in a Vue/Nuxt + Firebase application is extremely difficult to do manually. This skill automates the extraction of labeled values, validates cross-page invariants, flags data anomalies like placeholders and stale zeros, and evaluates heuristic and accessibility violations.
Core Features & Use Cases
- Cross-page consistency: Verifies that the same field (e.g., open_invoices) matches across dashboard, invoices, and billing pages, or documents intentional divergences.
- Data-quality flagging: Detects NULL values, placeholder text, negative counts, format mismatches, stale zeros, and broken totals.
- Role-based auditing: Iterates through anonymous, viewer, member, admin, and superadmin roles to catch privilege leaks and role-specific UI issues.
- Analytics event validation: Intercepts dataLayer pushes and network beacons to detect event drift and forbidden PII props.
- Interactive element safety: Enumerates buttons and links, checks for missing labels, dead hrefs, broken tabindex, and missing focus states, with a destructive-label classifier to prevent unsafe clicks.
Quick Start
Run the ui-audit skill in full mode to audit all roles and pages, or use smoke mode for a quick anonymous plus admin check, then review the generated findings report for invariant failures and quality flags.