Skills
.Work. You
Rest

design-system-guardian

Community

Enforce design system consistency

Software Engineering#frontend#react#design system#storybook#ui components#code validation
Authorkaelig
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill ensures that UI development adheres to the established design system, preventing inconsistencies and promoting efficient component reuse.

Core Features & Use Cases

  • Component Validation: Checks if custom components are used where design system equivalents exist.
  • Prop Enforcement: Verifies correct usage of props for design system components.
  • Composition Suggestions: Identifies opportunities to replace multiple elements with single design system components.
  • Use Case: A developer is building a new feature and uses a custom button component. The Design System Guardian flags this, suggesting the use of the official AcmeButton and ensuring it has the necessary onClick prop.

Quick Start

Analyze the current project's UI code against the design system manifest.

Dependency Matrix

Required Modules

None required

Components

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: design-system-guardian
Download link: https://github.com/kaelig/react-craft/archive/main.zip#design-system-guardian

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.