shipshitdev/design-consistency-auditor
skills/design-consistency-auditor/SKILL.md
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`.
$ install --global
skillsauthnpx skillsauth add shipshitdev/library design-consistency-auditorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Aug 20, 2026, 3:15 AM21.6s6 files scanned
SKILL.md
- name:
- design-consistency-auditor
- description:
- 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`.
- version:
- 1.0.1
- tags:
- design, ux, ui, consistency, design-tokens, design-debt, tailwind
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 (
<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
Related
audit— a scored 0-4 sweep across accessibility, performance, theming, responsive design, and anti-patterns when no single dimension is named.accessibility— WCAG 2.1 AA conformance, ARIA, keyboard access, and screen-reader verification.
Related Skills
shipshitdev/weekly-review
development
VerifiedTrustedCommunity
Coordinates a weekly engineering review of board accuracy, recent code changes, operational health, and scoped cleanup. Use for a recurring repository health review or a review of the last several days.
35SKILL.mdUpdated Sep 6, 2026
shipshitdev/project-board
testing
VerifiedTrustedCommunity
Audits project board configuration and prepares explicitly requested setup, copy, or normalization changes while preserving the existing workflow and provider boundaries. Use when inspecting a board's fields, columns, scope, or configuration.
35SKILL.mdUpdated Sep 6, 2026
shipshitdev/board-sync
testing
VerifiedTrustedCommunity
Reconciles a project board with current work and delivery evidence, reports incomplete coverage and metadata gaps, and applies only approved provider-supported field changes. Use when auditing board drift, reviewing blocked work, or assessing upcoming delivery.
35SKILL.mdUpdated Sep 6, 2026
shipshitdev/how
development
VerifiedTrustedCommunity
Walk through how a subsystem works. Use for "how does X work", code walkthroughs before changing something, and placement or ownership questions. Explains architecture, runtime flow, and onboarding mental models. Can critique architecture. Use why for motivation.
35SKILL.mdUpdated Aug 31, 2026