skills.rest
l3ocho
l3ochoCOMMUNITY
Explore all skills by this author →
GitHub

color-scheme-validation

Detect and enforce color-scheme integrity in Mantine-based applications.

Updated Jan 26, 2026
Search Tags:#theming#linting#css#mantine#color-scheme#ui-accessibility
One-click install
npx skills add https://github.com/l3ocho/mktpl-claude-datasaas --skill color-scheme-validation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-scheme-validation
Source: https://github.com/l3ocho/mktpl-claude-datasaas/tree/main/plugins/dmc-design/skills/color-scheme-validation
Command: npx skills add https://github.com/l3ocho/mktpl-claude-datasaas --skill color-scheme-validation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

CSS color-scheme integrity is at risk when Mantine apps use dual-mode theming; mismatches can cause visual inconsistencies and accessibility issues.

Core Features & Use Cases

  • Dual-scope Rule: ensure every color custom property is defined under both data-mantine-color-scheme="dark" and data-mantine-color-scheme="light" blocks.
  • No Unscoped Color Values: prevent raw color values outside color-scheme blocks.
  • Anti-Loop Detection: warn on repeated color tokens in branch diffs to prevent scoping loops.
  • Two-Mode Verification Protocol: requires manual visual verification after automated checks.
  • Token Naming Conventions: encourage scheme-neutral token names and consistent application across modes.

Quick Start

Review your project CSS to detect dual-scheme color properties and verify rules are satisfied across both light and dark blocks.

Frequently Asked Questions about color-scheme-validation

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

FAQPage Schema
How do I validate Mantine color-scheme integrity for dual light and dark modes?▼

Validating Mantine color-scheme integrity involves scanning CSS entry points to ensure color custom properties are defined under both data-mantine-color-scheme="dark" and "light" blocks, flagging violations and raw values outside these scopes.

Why do raw color values cause accessibility issues in Mantine CSS?▼

Raw color values cause accessibility issues in Mantine CSS because they bypass data-mantine-color-scheme blocks, leading to visual inconsistencies where colors do not adapt properly between light and dark modes.

How do I prevent scoping loops when defining Mantine dark and light color tokens?▼

Preventing scoping loops requires anti-loop detection, which warns on repeated color tokens in branch diffs to identify and stop redundant scoping patterns before they break CSS rendering.

Does this CSS color-scheme validation require manual visual verification after automated checks?▼

Color-scheme validation requires manual visual verification after automated checks, utilizing a two-mode verification protocol to confirm that automated scans accurately reflect the visual appearance across both modes.

Can I use this to lint CSS custom properties for consistent token naming conventions?▼

Linting CSS custom properties enforces scheme-neutral token naming conventions and consistent application across modes, ensuring every property is properly structured within light and dark color-scheme blocks.

What is the best way to keep dual color schemes in sync across Mantine applications?▼

Keeping dual color schemes in sync requires a dual-scope rule that enforces every color custom property to be defined under both data-mantine-color-scheme attribute blocks, returning a structured report of mismatches.

Related Skills

Explore More Design & Creative Skills→
JNZader-VaultJNZader-Vault

mantine-ui

Build React interfaces with Mantine components, forms, charts, and notifications.

Official
Intermediate
VictoriakaeyVictoriakaey

code-review

Review code for correctness, security, performance, and maintainability with severity-based reports.

Community
Advanced
carayacaraya
1

css-testing

Detect visual regressions and accessibility issues in CSS across browsers and viewports.

Community
Advanced
kreuzberg-devkreuzberg-dev
836

style-attribute-sanitization

Sanitize CSS in HTML style attributes by whitelisting safe properties.

Official
Intermediate