design-consistency-auditor

Original：🇺🇸 English

Translated

Audit and maintain design system consistency, UX/UI patterns, color palettes, and design best practices across frontend applications

2installs

Sourceshipshitdev/library

Added on2026-02-04

NPX Install

npx skill4agent add shipshitdev/library design-consistency-auditor

SKILL.md Content

View Translation Comparison →

Design Consistency Auditor

Purpose

Audit and maintain design consistency across frontend applications. Before auditing, discover the project's frontend structure from documentation.

Ensures:

Color palettes are used consistently
UI/UX patterns follow best practices
Components maintain visual harmony
Accessibility standards are met
Design system is properly applied
No design debt accumulates

When to Use

Auditing design consistency across apps
Reviewing color palette usage
Checking UI/UX patterns
Validating component styling
Ensuring accessibility compliance
Identifying design inconsistencies
Reviewing new features for design standards

Quick Reference

Color Rules

DO: Use semantic tokens (

bg-primary

,

text-base-content

,

bg-base-100

) DON'T: Hardcode hex colors (

#000000

) or arbitrary values (

bg-[#123456]

)

Component Patterns

Cards:
```
.gf-card
```
App shells:
```
.gf-app
```
Modals:
```
.glass-modal
```
Inputs:
```
.glass-input
```
,
```
.form-focus
```
Buttons:
```
btn btn-primary
```
,
```
.btn-secondary
```
,
```
btn-ghost
```

Spacing

DO: Use Tailwind scale (

p-4

,

m-6

,

gap-4

) DON'T: Use arbitrary values (

p-[17px]

)

Accessibility

Semantic HTML (
```
<button>
```
,
```
<nav>
```
,
```
<main>
```
)
ARIA labels on interactive elements
4.5:1 contrast for text, 3:1 for UI

Focus states:

focus:outline-none focus:ring-2 focus:ring-primary

Responsive

Mobile-first with
```
sm:
```
,
```
md:
```
,
```
lg:
```
,
```
xl:
```
modifiers
Responsive typography:
```
text-3xl sm:text-4xl
```

Audit Phases

Color Palette - Scan for hardcoded colors, verify theme tokens
Component Patterns - Check cards, buttons, forms use theme classes
Spacing & Layout - Verify consistent spacing scale
Typography - Check heading hierarchy and text styles
Accessibility - Run automated checks, keyboard testing

AI Slop Prevention

Audit for generic "AI-generated" aesthetics:

Generic fonts (Inter, Roboto everywhere)
Purple gradients on white
Predictable layouts without character
Safe, boring color choices

Push for distinctive, branded designs with personality.

For detailed checklists, examples, reporting templates, and audit commands, see:

references/full-guide.md