Design Consistency Auditor

What it does

The Design Consistency Auditor skill helps maintain visual coherence in frontend applications by analyzing designs against established brand guidelines and style guides. It identifies inconsistencies across various assets, ensuring consistent use of color palettes, adherence to UI/UX patterns, component styling, accessibility standards, and proper application of the design system. The auditor performs a phased analysis covering colors, components, spacing, typography, and accessibility.

When to use it

• Auditing existing applications for design consistency.
• Reviewing new features or designs before implementation to ensure adherence to standards.
• Checking color palette usage across different parts of an application.
• Validating that component styling aligns with the established design system.
• Ensuring accessibility compliance by checking contrast ratios and ARIA labels.

Key capabilities

• Color Palette Verification: Identifies hardcoded colors and verifies the use of semantic theme tokens.
• Component Pattern Analysis: Checks for consistent usage of predefined component classes (e.g., .gf-card, btn btn-primary).
• Spacing & Layout Consistency: Verifies adherence to Tailwind scale spacing conventions.
• Typography Review: Checks heading hierarchy and text styles.
• Accessibility Compliance: Evaluates semantic HTML usage, ARIA labels, contrast ratios, and focus states.
• Responsive Design Validation: Ensures mobile-first approach with appropriate responsive modifiers.
• AI Aesthetic Detection: Identifies generic "AI-generated" design elements like common fonts (Inter, Roboto) or predictable layouts.

Example prompts

• “Audit the application for color palette consistency.”
• “Check if all buttons are using the defined button classes.”
• “Review the new feature’s accessibility compliance.”
• "Identify any instances of hardcoded colors in the codebase."

Tips & gotchas

• The skill requires project frontend structure documentation to be available for discovery.
• It relies on predefined component patterns and style guide rules; ensure these are accurately defined within your design system.
• Familiarize yourself with the "Quick Reference" section of the skill's documentation to understand expected conventions (e.g., Tailwind spacing scale).