About

Imported from shipshitdev/skills (skills/design-consistency-auditor/SKILL.md). Install upstream with npx skills add shipshitdev/skills --skill design-consistency-auditor. Copyright stays with the author.

Design Consistency Auditor

Name: design-consistency-auditor
Author: shipshitdev

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

{
  "ocm": "1",
  "id": "shipshitdev-skills-design-consistency-auditor",
  "kind": "skill",
  "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`.",
  "publisher": "shipshitdev",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "design",
      "ux",
      "ui",
      "consistency",
      "design-tokens",
      "design-debt",
      "tailwind",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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`."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/shipshitdev/skills",
      "path": "skills/design-consistency-auditor/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/shipshitdev/skills/blob/HEAD/skills/design-consistency-auditor/SKILL.md",
      "key": "shipshitdev/skills/skills/design-consistency-auditor/SKILL.md"
    }
  },
  "instructions": "# Design Consistency Auditor\n\nBefore auditing, discover the project's frontend structure from documentation.\n\nEnsures:\n\n- Color palettes are used consistently through semantic tokens\n- Spacing stays on the project's scale\n- Components maintain visual harmony across screens\n- The design system is applied instead of duplicated\n- No design debt accumulates\n\n## When to Use\n\n- Auditing design-token consistency across apps\n- Reviewing color palette usage and hunting hardcoded hex values\n- Checking UI/UX patterns for screen-to-screen divergence\n- Spotting one-off classes that duplicate a design-syste",
  "cost": {
    "context_tokens": 753
  }
}

Fetch it by URL: GET /api/v1/registry/shipshitdev-skills-design-consistency-auditor/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.

design-consistency-auditor