When is the best time to use the auditor?

It is best used during the code review process, when implementing new UI features, or during dedicated 'design debt' cleanup sprints.

How does this skill handle hardcoded hex colors?

It scans your codebase for arbitrary hex values or hardcoded colors and suggests replacing them with appropriate semantic tokens like bg-primary or text-base-content.

What is 'AI Slop' prevention?

It identifies generic, predictable UI patterns (like purple gradients on white or standard Inter font layouts) and encourages more branded, distinctive design choices.

Does it support specific CSS frameworks?

It is optimized for Tailwind CSS and projects using agenticindiedev-ui, but its logic can be applied to various utility-first design systems.

Can it detect accessibility issues?

Yes, it checks for semantic HTML tags, required ARIA labels, interactive element focus states, and color contrast ratios to ensure compliance.

Design Consistency Auditor

Name: Design Consistency Auditor
Author: shipshitdev

byshipshitdev

•

디자인 도구

Audits and maintains design system consistency, UX/UI patterns, and accessibility standards across frontend applications.

The Design Consistency Auditor is a specialized skill designed to ensure visual harmony and technical adherence to design systems within frontend projects. It systematically scans applications for hardcoded hex colors, inconsistent spacing, and non-semantic HTML while enforcing specific component patterns and brand-specific styles. By identifying 'AI slop'—generic, predictable aesthetics—this skill helps developers move beyond boilerplate layouts toward distinctive, branded user interfaces that meet modern WCAG accessibility standards and maintain high-quality design tokens.

주요 기능

01AI Slop detection to prevent generic, low-character design patterns in generated code

02UI/UX pattern validation against project-specific component libraries and CSS classes

0310 GitHub stars

04Automated color palette auditing for semantic token usage versus hardcoded hex values

05Comprehensive accessibility checks including ARIA labels, semantic HTML, and contrast ratios

06Responsive design verification across mobile-first Tailwind breakpoints

사용 사례

01Reviewing new feature pull requests to ensure alignment with existing design systems

02Conducting pre-deployment accessibility and visual harmony audits to reduce design debt

03Refactoring legacy codebases to replace arbitrary CSS values with standardized Tailwind tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shipshitdev/library design-consistency-auditor

For use in Claude.ai and ChatGPT

Download Skill