color-scheme-validation
CommunityKeep dual color schemes in sync across modes.
Authorl3ocho
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: color-scheme-validation Download link: https://github.com/l3ocho/mktpl-claude-datasaas/archive/main.zip#color-scheme-validation Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.