visual-consistency-validation
CommunityEnsure token-driven UI stays visually consistent.
Design & Creative#breakpoints#dark-mode#visual-consistency#design-tokens#regression-detection#token-mapping
Authortan-yong-sheng
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Ensures design tokens and UI components stay visually consistent across breakpoints and color modes, preventing subtle regressions that undermine the design system.
Core Features & Use Cases
- Systematic token mapping and violation reporting for colors, spacing, typography, and shapes across mobile, tablet, and desktop.
- Breakpoint and mode aware validation that detects regressions in light, dark, and high-contrast scenarios, including interactive states.
- Remediation guidance and testing approach generation to guide fixes and verification across components.
Quick Start
Analyze your component library with the visual-consistency-validation skill to identify and remediate token-to-design-token mismatches.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 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: visual-consistency-validation Download link: https://github.com/tan-yong-sheng/ai-vision-mcp/archive/main.zip#visual-consistency-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 510,000+ vetted skills library on demand.