Does it support responsive design checks?

Absolutely. It enforces mobile-first patterns, ensuring that padding, text sizes, and layouts use responsive breakpoints correctly.

How does the skill handle hardcoded colors?

The skill identifies hex codes, RGB, and HSL values in your code and suggests the correct semantic CSS variable mapping based on the component's context.

How does it help with accessibility?

It audits your components for WCAG 2.1 AA standards, checking for color contrast, focus states, ARIA labels, and keyboard navigation support.

When should I activate this skill?

Activate it whenever you are creating new components, reviewing frontend code, or mapping complex Figma designs to functional React or HTML components.

Can it validate custom design tokens?

Yes, it is pre-configured for shadcn/ui and custom semantic tokens, and it uses codebase searches to verify that tokens actually exist before recommending them.

Design System Validator

Name: Design System Validator
Author: Ankish8

byAnkish8

•

Design Tools

Validates frontend components against design system standards, enforcing semantic CSS variables, responsive patterns, and accessibility compliance.

The Design System Validator skill ensures your frontend development remains consistent with modern design systems and brand guidelines. It automatically audits component code to eliminate hardcoded hex colors and non-semantic Tailwind classes, mapping them to approved design tokens. By enforcing mobile-first responsive patterns and WCAG 2.1 AA accessibility standards, this skill helps developers maintain high-quality UI consistency while speeding up the process of translating Figma designs into production-ready code.

Key Features

01Strict CSS variable enforcement against hardcoded hex/RGB values

02Semantic typography and font-weight consistency checks

03WCAG 2.1 AA accessibility and ARIA attribute auditing

04Automated mapping of Figma colors to semantic design tokens

05Mobile-first responsive design pattern validation

061 GitHub stars

Use Cases

01Refactoring legacy UI components to use design system tokens

02Ensuring cross-device responsiveness and accessibility during development

03Validating new component implementation against shadcn/ui standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ankish8/storybook-npm design-system-validator

For use in Claude.ai and ChatGPT

Download Skill