skills.rest
fefogarcia
fefogarciaCOMMUNITY
Explore all skills by this author →
GitHub

design-consistency-auditor

Audits frontend applications for design system consistency and accessibility.

1|Updated Feb 10, 2026
Search Tags:#accessibility#design system#tailwind css#ui audit#ux/ui#frontend consistency
One-click install
npx skills add https://github.com/fefogarcia/approved-skills --skill design-consistency-auditor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consistency-auditor
Source: https://github.com/fefogarcia/approved-skills/tree/main/skills/design-consistency-auditor
Command: npx skills add https://github.com/fefogarcia/approved-skills --skill design-consistency-auditor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps maintain a consistent and high-quality user interface by auditing frontend applications for adherence to design system rules, UX/UI patterns, and accessibility standards.

Core Features & Use Cases

  • Design System Auditing: Verifies the correct usage of color palettes, typography, spacing, and component patterns.
  • Accessibility Checks: Identifies violations of accessibility standards (WCAG).
  • Consistency Enforcement: Prevents "AI slop" by promoting distinctive, branded designs over generic aesthetics.
  • Use Case: Before merging a new feature, run this Skill to automatically audit the UI components for adherence to the established design system, ensuring visual harmony and accessibility compliance.

Quick Start

Run a design consistency audit on the current project's frontend code.

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 application for design system consistency?▼

Auditing frontend accessibility involves scanning UI components to identify violations of WCAG standards. This process checks color contrast, semantic structure, and component patterns to ensure your application meets compliance requirements and provides an accessible user experience.

What's the best way to prevent generic AI slop aesthetics in UI components?▼

Preventing generic AI slop aesthetics requires enforcing distinctive, branded designs through automated UI audits. By validating component styling against established design tokens and component libraries, you ensure a cohesive visual identity rather than generic outputs.

How do I check Tailwind CSS components for UI consistency before merging?▼

Checking Tailwind CSS components for UI consistency involves running a pre-merge audit on your frontend code. This verifies correct usage of design tokens, UI/UX patterns, and component styling to ensure visual harmony and accessibility compliance before integration.

Does this design audit work with established component libraries and design tokens?▼

Yes, the design audit works directly with established component libraries and design tokens. It verifies correct usage of color palettes and component patterns, enforcing adherence to your predefined rules to maintain a cohesive user experience across applications.

Related Skills

Explore More Design & Creative Skills→
ils15ils15
10

frontend-analyzer

Extract typography, colors, layout, spacing, and design tokens from React/Next.js code.

Community
Basic
modu-aimodu-ai
67

moai-domain-uiux

Guide UI/UX design systems with WCAG 2.2 and W3C DTCG 2025.10 tokens.

Official
Advanced
NITRR-OfficialNITRR-Official
4

tailwind-design-system

Create and implement design systems with Tailwind CSS v4.

Official
Intermediate
ritual-foundationritual-foundation
62

ritual-dapp-design

Standardize React/Next.js Ritual Chain frontend design with dark-mode-first Tailwind tokens.

Official
Advanced