Color Audit

Skill Verified Active

Color-only audit to extract, evaluate, and recommend improvements for the project's color system

Purpose

To provide developers with an automated, data-driven method for evaluating and enhancing their project's color system, ensuring consistency, accessibility, and aesthetic harmony.

Features

Color extraction from CSS, JSX, and Tailwind
WCAG and APCA contrast ratio checking
Semantic color role mapping
Harmony, consistency, and coverage analysis
Generation of improved color palettes (light/dark)
Output of color tokens (CSS vars or Tailwind config)

Use Cases

Auditing an existing project's color system for compliance and consistency
Identifying and fixing contrast issues for accessibility
Generating a cohesive and semantically sound color palette
Ensuring a consistent color system across light and dark modes

Non-Goals

Auditing aspects other than the color system (e.g., typography, layout)
Providing subjective design feedback or aesthetic opinions
Modifying project files directly without user interaction

Workflow

Extract all colors from project files
Map extracted colors to semantic roles
Check contrast ratios for foreground/background pairs
Evaluate color harmony, consistency, and coverage
Generate an improved color system and palettes
Output audit findings and recommendations

Practices

Color System Auditing
Accessibility Compliance
Design System Maintenance
Automated Code Analysis

Prerequisites

Node.js 18+

Installation

First, add the marketplace

/plugin marketplace add Aboudjem/ui-ux-suite

/plugin install ui-ux-suite@ui-ux-suite

Quality Score

Verified

100 /100

Analyzed 1 day ago

Trust Signals

Last commit1 day ago

GitHub owner Aboudjem

Stars3

Downloads 415

LicenseMIT

Status

View Source

Similar Extensions

Impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

Skill

pbakaus

Baseline Ui

100

Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.

Skill

ibelick

Type Audit

100

Typography-only audit covering font selection, type scale, readability, hierarchy, performance

Skill

Aboudjem

Macos Design

100

Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.

Skill

davepoon

Component Audit

100

Component consistency audit covering state coverage, hierarchy, patterns

Skill

Aboudjem

Review Ux Ui

Review user experience and interface design using Nielsen's heuristics, WCAG 2.1 accessibility guidelines, keyboard and screen reader audit, user flow analysis, cognitive load assessment, and form usability evaluation. Use when conducting a usability review before release, assessing WCAG 2.1 accessibility compliance, evaluating user flows for efficiency, reviewing form design, or performing a heuristic evaluation of an existing interface.

Skill

pjt222