Skill

design-consistency-auditor

Audits design system consistency including Tailwind color tokens, UI patterns, spacing scale, typography, accessibility, and best practices in frontend apps.

Tailwind

Css

npx claudepluginhub shipshitdev/library

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

Supporting Assets

README.mdexamples/audit-report-template.mdexamples/quick-audit-checklist.mdplugin.jsonreferences/full-guide.md

SKILL.md

Similar Skills

design-consistency-auditor

Audits design system consistency including Tailwind color tokens, UI patterns, spacing scale, typography, accessibility, and best practices in frontend apps.

5 files

shipshitdev-library

Design System — Generate & Audit Visual Systems

154

Generates design systems and tokens from CSS/Tailwind/styled-components codebases, audits UI consistency across 10 dimensions, detects AI-generated patterns. Use for new projects, redesigns, PR reviews.

awesome-claude-notes

design-system

179.0k

Generates design systems from codebases by extracting tokens and creating previews, audits UI consistency across 10 dimensions, detects AI-generated slop, and reviews styling PRs.

ecc

Stats

Parent Repo Stars8

Parent Repo Forks1

Last CommitJan 21, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

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