Design System Validator
Design System Validator Skill
This skill enforces design system consistency by validating CSS variable usage, responsive design patterns, and accessibility standards.
When to Activate
Activate this skill when:
- Creating a new component
- Reviewing component code
- Mapping Figma designs to code
- Validating color usage
- Checking responsive patterns
- Ensuring accessibility compliance
Validation Rules
1. CSS Variable Enforcement
Rule: NEVER use hardcoded color values
More from ankish8/storybook-npm
storybook generator
Generates comprehensive Storybook stories following the Button/AlertConfiguration pattern with installation instructions, design tokens table, typography table, and usage examples. Activate when creating component documentation.
26component analysis
Analyzes codebase to check if component exists, suggests creating variants vs new components, and identifies reusable subcomponents. Activate when creating new components to avoid duplication and ensure proper architecture.
21myoperator-design
Create UIs matching the myOperator design system. Use this skill when the user asks to "build with myoperator design", "create myoperator-style UI", "use myoperator design system", "myoperator dashboard", "myoperator page", or asks for interfaces, pages, dashboards, or components that should follow myOperator's visual language. Generates standalone React/Tailwind code with the design system's color tokens, typography, and component patterns.
20