skills.rest
jiikko
jiikkoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

style-review

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
One-click install
npx skills add https://github.com/jiikko/dotfiles --skill style-review
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
IgniteUIIgniteUI
169

update-component-styles

Update component styles across themes using the SCSS to Lit CSS workflow.

Official
Intermediate
moughamirmoughamir

color-palette

Generate accessible Tailwind v4 color palettes with WCAG contrast validation.

Community
Intermediate
andrewle9510andrewle9510

fd-color-systems

Generate cohesive color systems with semantic tokens and dark-mode support.

Community
Basic
lord-vinayaklord-vinayak

contrast-checker

Calculate color contrast ratios and evaluate WCAG 2.2 compliance.

Community
Advanced