# Design Consistency Auditor > Hunts design-token drift across a frontend — hardcoded hex values where semantic tokens belong, arbitrary spacing outside the scale, one-off classes duplicating a design-system component, and patterns that diverge screen to screen. Measures against the project's own tokens and class conventions, discovered from the codebase first rather than assumed. Triggers on audit design consistency, review component styling, check color palette usage, find hardcoded colors, or identify design debt. For a scored multi-dimension quality report, use `audit`; for WCAG conformance, use `accessibility`. - Skill: `shipshitdev/design-consistency-auditor` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds add shipshitdev/design-consistency-auditor` - Raw SKILL.md: https://api.skillmd.com/api/skills/shipshitdev/design-consistency-auditor/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: shipshitdev (https://skillmd.com/u/shipshitdev) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/shipshitdev/design-consistency-auditor --- # Design Consistency Auditor Before auditing, discover the project's frontend structure from documentation. Ensures: - Color palettes are used consistently through semantic tokens - Spacing stays on the project's scale - Components maintain visual harmony across screens - The design system is applied instead of duplicated - No design debt accumulates ## When to Use - Auditing design-token consistency across apps - Reviewing color palette usage and hunting hardcoded hex values - Checking UI/UX patterns for screen-to-screen divergence - Spotting one-off classes that duplicate a design-system component - Reviewing new features against the established design standards Accessibility conformance is a separate pass — use `accessibility` for WCAG, ARIA, keyboard access, and contrast. ## 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 Discover the project's component class conventions from its design system or existing codebase. Common patterns to look for: - Cards: project-specific card class or component (e.g. `card`, `.card`, design-system Card component) - App shells / layouts: project-specific shell wrapper class - Modals / dialogs: project dialog component pattern - Inputs: project form input class or component - Buttons: project button variants (primary, secondary, ghost) Identify the actual class names from the codebase before auditing — do not assume a specific naming convention. ### Spacing **DO:** Use Tailwind scale (`p-4`, `m-6`, `gap-4`) **DON'T:** Use arbitrary values (`p-[17px]`) ### Accessibility - Semantic HTML (`