style-review

Name: style-review
Availability: InStock
Author: jiikko

Analyzes CSS/UI code for WCAG compliance and contrast across light and dark themes.

2|Updated Sep 12, 2012

Search Tags:#accessibility #WCAG #css #contrast #dark-mode #style-review

Ready to run

npx skills add https://github.com/jiikko/dotfiles --skill style-review

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: style-review
Source: https://github.com/jiikko/dotfiles/tree/main/_claude/skills/style-review
Command: npx skills add https://github.com/jiikko/dotfiles --skill style-review

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires css-expert.

What problem does it solve?

CSS/UI styling often fails accessibility checks, making content hard to read in real-world use. This skill automates WCAG compliance verification and color-contrast review across light/dark themes to help teams ship accessible interfaces.

Core Features & Use Cases

WCAG contrast validation for normal and large text, UI components, and focus indicators.
Light/Dark mode verification to ensure readability in both themes.
Interaction state checks for hover, focus, active, and disabled states.
Motion and prefers-reduced-motion audits to detect potentially problematic animations.

Quick Start

Run the style-review on a target directory or file, e.g. /style-review styles/ or /style-review src/components/Button.css. If run without arguments, it inspects the current project’s CSS/SCSS.

Frequently Asked Questions about style-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I check my CSS for WCAG compliance and color contrast issues?▼

To check CSS for WCAG compliance, run an automated analysis on your target files or directories to verify contrast, focus indicators, and motion across light and dark themes, generating structured reports with severity levels and remediation guidance.

How do I verify dark mode color contrast for accessibility?▼

Dark mode color contrast is verified by scanning CSS variables and theme rules to analyze readability across both light and dark themes, ensuring that text, UI components, and focus indicators meet configurable WCAG AA or AAA standards.

Does this CSS accessibility analysis support prefers-reduced-motion audits?▼

Yes, this CSS accessibility analysis supports prefers-reduced-motion audits by detecting potentially problematic animations and interaction states like hover, focus, active, and disabled, reporting them with severity levels and specific remediation steps.

Can I configure WCAG levels AA or AAA for CSS contrast validation?▼

Yes, you can configure WCAG levels AA or AAA for CSS contrast validation. The analysis checks normal text, large text, and UI components against your selected compliance level and outputs structured Markdown or JSON guidance for failing elements.

Do I need a CSS analysis agent to run a style review?▼

An optional CSS analysis agent is supported to enhance the WCAG compliance verification process, but you can run a style review directly on a target directory or file to inspect CSS and SCSS without it.