Does this skill check for color accessibility?

Yes, it performs automated WCAG AA contrast audits for every text and background combination and provides a live pass/fail report within the generated HTML artifacts.

Can it generate dark mode themes automatically?

Yes, it creates separate light and dark variants for every palette option, applying specific principles like desaturating chromatic colors and using lightness for elevation.

What are semantic color tokens?

Semantic tokens are names describing a color's purpose (e.g., 'surface-base' or 'brand-primary') rather than its literal value (e.g., 'blue-500'), ensuring your UI remains themeable and maintainable.

How does the side-by-side review work?

The skill generates a compare.html file containing multiple palette options in iframes, allowing you to toggle between options and themes to see how they impact the overall design.

Design System Color Critic

Name: Design System Color Critic
Author: metedata

bymetedata

0•

Design Tools

Evaluates and generates accessible color palettes, semantic tokens, and dark mode themes for structured design systems.

The Design System Color Critic is a specialized tool for Claude Code that facilitates a professional design critique process specifically for color. It helps users define brand-aligned palettes, establish semantic token naming, and ensure high accessibility standards through automated WCAG AA contrast audits. By generating side-by-side HTML wireframe mockups, it allows for iterative testing of light and dark mode variants, helping teams converge on a robust and scalable color strategy for any project.

Key Features

01Generates comprehensive light and dark mode variants for every palette

02Automated WCAG AA contrast ratio audits with live pass/fail reporting

03Establishes semantic token naming conventions for maintainable CSS

04Creates interactive HTML mockups to view colors in a real UI context

05Facilitates an iterative 'diverge and converge' design critique loop

060 GitHub stars

Use Cases

01Defining a new brand color system with accessible text and background pairings

02Converting an existing light-only UI into a functional and aesthetic dark mode

03Standardizing color tokens across a development team to improve consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-color-system

For use in Claude.ai and ChatGPT

Key Features

01Generates comprehensive light and dark mode variants for every palette

02Automated WCAG AA contrast ratio audits with live pass/fail reporting

03Establishes semantic token naming conventions for maintainable CSS

04Creates interactive HTML mockups to view colors in a real UI context

05Facilitates an iterative 'diverge and converge' design critique loop

060 GitHub stars

Use Cases

01Defining a new brand color system with accessible text and background pairings

02Converting an existing light-only UI into a functional and aesthetic dark mode

03Standardizing color tokens across a development team to improve consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-color-system

For use in Claude.ai and ChatGPT