design-consistency-auditor

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 (,