Skills
.Work. You
Rest

Design System Validator

Community

Enforce design consistency

Software Engineering#accessibility#frontend#responsive design#design system#css variables#component validation
AuthorAnkish8
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the enforcement of design system rules, preventing hardcoded values and ensuring components are accessible and responsive.

Core Features & Use Cases

  • CSS Variable Enforcement: Ensures all colors, typography, and spacing use semantic CSS variables, not hardcoded values.
  • Responsive Design Validation: Checks that components adhere to mobile-first and responsive design patterns.
  • Accessibility Checks: Validates color contrast, focus states, and ARIA attribute usage.
  • Use Case: When developing a new UI component, activate this skill to automatically verify that it uses the correct design tokens, is responsive across different screen sizes, and meets accessibility standards before it's merged.

Quick Start

Use the Design System Validator skill to check the component code for adherence to CSS variable usage and responsive design patterns.

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 Validator
Download link: https://github.com/Ankish8/storybook-npm/archive/main.zip#design-system-validator

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 471,000+ vetted skills library on demand.