design-consistency-auditor

Name: design-consistency-auditor
Availability: InStock
Author: Gavin

Audit frontend UI code for design-system inconsistencies and generate prioritized findings.

1|Updated May 24, 2026

Search Tags:#accessibility #responsive design #design consistency #dark mode #component patterns #ui audit #tailwind tokens

Ready to run

npx skills add https://github.com/gavin100305/traffic --skill design-consistency-auditor-gavin100305

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-consistency-auditor
Source: https://github.com/gavin100305/traffic/tree/main/agents/.agents/skills/design-consistency-auditor
Command: npx skills add https://github.com/gavin100305/traffic --skill design-consistency-auditor-gavin100305

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill identifies and helps you correct design system drift—like hardcoded colors, inconsistent component patterns, accessibility gaps, and broken dark-mode behavior—so your frontend stays coherent as it grows.

Core Features & Use Cases

It audits frontend codebases for color palette consistency (theme tokens vs hex/arbitrary Tailwind), verifies typography, spacing, and responsive patterns, and checks accessibility fundamentals like semantic HTML, ARIA coverage, keyboard/focus behavior, and contrast targets. It’s especially useful when onboarding new features, reviewing multiple apps in a monorepo, or running periodic quality gates to prevent accumulating design debt. It produces actionable findings and reporting outputs via a structured audit template and checklists.

Quick Start

Ask: "Run a quick design audit for the Publisher app and report the top accessibility and color-token issues, using the checklist as the scoring guide."

Frequently Asked Questions about design-consistency-auditor

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

FAQPage Schema

How do I audit my frontend codebase for design system drift and hardcoded colors?▼

A design consistency audit detects hardcoded hex colors, arbitrary Tailwind values, and inline color styles by applying targeted grep rules across your codebase. It checks for missing theme classes and generates prioritized issue findings to correct design system drift.

What is the best way to check dark mode behavior and accessibility across multiple apps in a monorepo?▼

Auditing dark mode and accessibility across multiple apps involves scanning for missing theme classes, semantic HTML gaps, and ARIA coverage. It checks contrast targets and keyboard behavior across the whole workspace to produce actionable reporting outputs.

Does this design consistency audit work with Tailwind tokens and arbitrary value classes?▼

Yes, the UI audit specifically targets Tailwind tokens by searching for arbitrary Tailwind values and hardcoded hex colors that bypass the design system. It flags these violations alongside spacing inconsistencies to generate prioritized issue findings.

How do I verify responsive design patterns and component consistency during code reviews?▼

You verify responsive design patterns and component consistency by running a targeted audit that checks spacing, typography, and component patterns. It uses a structured audit template and checklists to score UI coherence and identify best-practice violations across apps.

Can I run a quick design audit on a single app instead of scanning the entire monorepo?▼

Yes, you can run a quick design audit on specific apps rather than scanning the entire monorepo. The auditor applies to multi-app workflows and uses YAML discovery metadata to scope its grep search rules for color usage and accessibility issues.

What limitations exist when scanning for non-semantic click handlers and inline styles?▼

The audit relies on targeted grep and search rules to detect non-semantic click handlers, inline color styles, and missing theme classes. It requires YAML discovery metadata to function, meaning unstructured or heavily abstracted codebases may yield incomplete prioritized findings.