Skills
.Work. You
Rest

Design System Violation Detector

Community

Automatically enforce UI design system rules.

Design & Creative#accessibility#react#tailwind#lint#design-system#dark-mode#ui-consistency
AuthorspartDev
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the detection and enforcement of design system guidelines across React components, ensuring accessibility, consistency, and adherence to the purple-indigo visual language.

Core Features & Use Cases

  • Automated detection: Scan React components (*.tsx, *.jsx) to identify violations of the design system guidelines documented in docs/DESIGN_GUIDELINES.md.
  • Enforcement & guidance: Provide actionable fixes and recommendations to bring components into compliance.
  • Use Case: Before submitting a PR with UI changes, run this Skill to ensure all components comply with the design system, including dark mode and typography rules.

Quick Start

Analyze the React components under src/ and report all design-system violations in DESIGN_GUIDELINES.md.

Dependency Matrix

Required Modules

None required

Components

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: Design System Violation Detector
Download link: https://github.com/spartDev/My-Prompt-Manager/archive/main.zip#design-system-violation-detector

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.