Design System Violation Detector

Design system enforcement scans React components against documented guidelines to detect violations in dark mode, color palette, spacing, typography, and accessibility rules. This Skill analyzes *.tsx and *.jsx files, identifies non-compliant code, and reports violations with actionable remediation guidance to keep components consistent.

Yes. Run this Skill before submitting PRs with UI changes to catch design-system violations early. It integrates with lint and test workflows, scanning components during creation, modification, and refactoring to ensure all changes comply with your documented guidelines before code review.

The Skill detects violations across dark mode support, color palette usage, spacing consistency, typography rules, focus states for accessibility, and border styling. It checks components against rules documented in DESIGN_GUIDELINES.md and provides concrete examples and fixes for each violation found.

Document your design rules in DESIGN_GUIDELINES.md, then run this Skill against your src/ directory containing React components. It scans all files, reports violations with remediation guidance, and generates actionable output you can integrate into your component creation and PR workflows.

Yes. The Skill specifically detects Tailwind-based violations including dark mode class usage and color palette consistency. It enforces accessibility compliance across dark and light themes, ensuring your purple-indigo visual language is applied uniformly across components.

The Skill reports each violation with its location, the rule it breaks, and concrete remediation examples showing how to fix it. Output is actionable, guiding developers to bring components into compliance with documented guidelines without ambiguity.