ui-audit

Validate routed pages against design guidelines using Playwright checks.

Updated Mar 19, 2026

Search Tags:#accessibility #audit #regression #playwright #rails #component-reuse #ui-guidelines

Ready to run

npx skills add https://github.com/reckerswartz/resume_builder --skill ui-audit-reckerswartz

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-audit
Source: https://github.com/reckerswartz/resume_builder/tree/main/.devin/skills/ui-audit
Command: npx skills add https://github.com/reckerswartz/resume_builder --skill ui-audit-reckerswartz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Auditors and UI engineers spend excessive time validating pages against design guidelines; this skill provides a repeatable, Playwright-driven workflow to detect deviations, ensure consistency, and track improvements over time.

Core Features & Use Cases

Continuous UI guideline audits across route surfaces and page families
Token compliance and component reuse verification using a shared UI surface
Accessibility checks and readability scoring with regression-aware logging
Use Case: run a guided audit on the current app surface to surface violations and guide refactors.

Quick Start

Run a UI audit cycle on the current app surface using the latest guidelines.

Frequently Asked Questions about ui-audit

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

FAQPage Schema

How do I automate UI guideline compliance checks across multiple Rails pages?▼

Automate UI guideline compliance checks across Rails pages using a Playwright-driven workflow that validates routed surfaces against design guidelines, ensuring consistency and tracking token compliance through data-driven scoring.

Can I run accessibility audits with Playwright on a Rails 8.1 Hotwire application?▼

Yes, you can run accessibility audits on a Rails 8.1 application using Hotwire, Tailwind, and ViewComponent by applying Playwright-based checks that evaluate readability, verify component reuse, and log regression-aware violations across public and admin surfaces.

What is the best way to prevent UI regression when reusing ViewComponent elements?▼

Prevent UI regression when reusing ViewComponent elements by running a continuous audit cycle that applies regression-aware logging and token compliance verification against a shared UI surface registry to detect deviations early.

Does this UI audit workflow support testing across workspace and admin route surfaces?▼

Yes, the UI audit workflow supports testing across public, workspace, builder, templates, and admin route surfaces by applying a rigorous registry-guided workflow to validate UI consistency and accessibility throughout the entire application.

How do I track UI design deviations and guide refactoring over time?▼

Track UI design deviations and guide refactoring over time by executing a guided audit cycle on your current app surface, which uses data-driven scoring and regression-aware logging to surface violations and monitor improvements across page families.

Why does my UI consistency break across different page families despite shared Tailwind tokens?▼

UI consistency breaks across page families when shared Tailwind tokens are not validated against the design guidelines registry; a Playwright-driven audit detects these token compliance deviations and surfaces component reuse violations for correction.