frontend-designsystem-validator_skill

Overview

This skill validates design systems for accessibility (WCAG 2.2), responsive patterns, and component consistency through design token analysis. It runs a fast-path audit for common issues and a comprehensive T2 audit for deep component and token validation. Outputs are structured JSON reports with prioritized remediation actions and references to authoritative standards. The skill is focused on analysis of design artifacts, not implementation or user research.

How this skill works

The validator parses provided design artifacts (URLs, component libraries, or token files), extracts components and tokens, and runs automated checks against WCAG 2.2 Level AA and platform guidelines. T1 performs a quick accessibility and token scan with contrast, focus, target size, and token-consistency checks. T2 adds responsive breakpoint analysis, deep component audits (buttons, forms, navigation, dialogs, images), and W3C design token validation. Final outputs include compliance scores per dimension, violation lists, token inconsistencies, and a prioritized remediation plan.

When to use it

• Before launch to verify WCAG 2.2 AA compliance for a design system
• When auditing a component library for cross-platform consistency (web, iOS, Android)
• To validate and govern design tokens against W3C spec and brand rules
• When reviewing responsive breakpoints, fluid typography, and touch targets
• Preparing for regulatory requirements such as the European Accessibility Act (EAA)

Best practices

• Provide at least one input: design_system_url, component_library, or design_tokens
• Specify platforms only from supported list: web, iOS, Android, react-native, flutter
• Start with T1 for quick wins, escalate to T2 if critical violations or multi-platform checks are needed
• Redact secrets in token files before submission; the tool flags found API keys
• Include version metadata (git SHA or file hashes) so results are auditable and deterministic

Example use cases

• Quick scan (T1) of a web design system URL to get contrast and token consistency summary
• Comprehensive T2 audit for a cross-platform component library before a major release
• Design token governance review to detect conflicting values and missing semantic layers
• Responsive design review to validate breakpoints, grid consistency, and touch targets
• Pre-compliance check to prepare remediation plan for WCAG 2.2 AA and EAA requirements