shipshitdev/design-consistency-auditor
bundles/frontend/skills/design-consistency-auditor/SKILL.md
Audits and maintains design system consistency across frontend applications — color palettes, UI/UX patterns, component styling, and accessibility. Triggers when asked to audit design consistency, review component styling, check color palette usage, validate accessibility compliance, or identify design debt.
$ 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: Jun 13, 2026, 5:18 AM4.1s6 files scanned
SKILL.md
- name:
- design-consistency-auditor
- description:
- Audits and maintains design system consistency across frontend applications — color palettes, UI/UX patterns, component styling, and accessibility. Triggers when asked to audit design consistency, review component styling, check color palette usage, validate accessibility compliance, or identify design debt.
- version:
- 1.0.0
- tags:
- design, ux, ui, consistency, audit, tailwind, accessibility
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
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 Skills
shipshitdev/worktree
development
VerifiedTrustedCommunity
Create an isolated git worktree from the correct base branch and check it out into a clean, gitignored directory. Use when the user asks to make a worktree, spin up a parallel/isolated workspace, work on something without disturbing the current checkout, branch off the current work, or run multiple agents on the same repo at once. Picks the base branch smartly — the current feature branch when you are on one, otherwise the develop integration branch — so worktrees continue your in-progress work by default instead of forking from the wrong place.
27SKILL.mdUpdated Jun 13, 2026
shipshitdev/release-cleanup
development
VerifiedTrustedCommunity
Verify a release was fully promoted through develop, staging, and master/main, then prune merged local and remote branches and stale git worktrees. Squash-merge aware — uses GitHub PR merge state as the merge oracle, not commit ancestry. Use when the user asks to clean up branches after a deploy, prune worktrees, remove merged branches, tidy up after promoting develop to staging to master, or confirm nothing stale was left behind before pruning.
27SKILL.mdUpdated Jun 13, 2026
shipshitdev/finishing-a-development-branch
development
VerifiedTrustedCommunity
Structured "done coding, now what?" workflow: verify tests pass, detect the repository environment (normal repo vs worktree, named branch vs detached HEAD), present exactly the right merge / PR / keep / discard options, and execute the chosen path including safe worktree cleanup. Use when implementation is complete and the branch needs to be integrated, published, or abandoned.
27SKILL.mdUpdated Jun 13, 2026
shipshitdev/feature-intake
tools
VerifiedTrustedCommunity
Capture a client or stakeholder feature request, turn it into a planner-ready PRD epic with scoped sub-issues, check for duplicate work, and place approved issues on a GitHub Projects kanban. Use when a user invokes feature intake, asks to turn a rough client requirement into GitHub issues, or wants an idea written as a PRD and pushed to a board.
27SKILL.mdUpdated Jun 13, 2026