design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Updated Mar 18, 2026
One-click install
npx skills add https://github.com/jac007x/CheatCodes-Skill-Library --skill design-system-validator-jac007x
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system-validator
Source: https://github.com/jac007x/CheatCodes-Skill-Library/tree/main/design-system-validator
Command: npx skills add https://github.com/jac007x/CheatCodes-Skill-Library --skill design-system-validator-jac007x

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Design System Validator identifies and enforces Walmart's brand and UI standards across color, spacing, typography, and component usage, reducing visual drift and manual review time.

Core Features & Use Cases

  • Color validation against the approved Walmart palette with contrast checks to meet accessibility guidelines.
  • Spacing and border radius validation to ensure consistent layout and component proportions.
  • Typography rules enforcement for headings, body text, and captions with predictable scales.
  • Component-state checks (default, hover, active, disabled) to guarantee consistent interactions across products.
  • Use Case: QA teams can run automated design audits on design tokens and UI libraries, then export a compliance report for development teams.

Quick Start

Run the validator on your design tokens and UI components to generate a compliance report.

Frequently Asked Questions about design-system-validator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate design tokens against Walmart branding rules?

To validate design tokens against Walmart branding rules, you apply the validator to your CSS or JSON design spec files. The tool audits color palettes, typography, and spacing to ensure strict compliance with the defined token schema.

Can I automate accessibility checks for color contrast in a UI library?

Yes, you can automate accessibility checks for color contrast by running audits on your UI library. The validator applies automated checks to ensure your color palette meets accessibility guidelines and brand standards.

Does design system validation work with JSON and CSS spec files?

Design system validation works directly with CSS and JSON-based design spec files. You must provide a defined token schema so the validator can accurately check color contrast, border radii, and shadows.

How do I check component states like hover and disabled for design compliance?

To check component states like hover and disabled for design compliance, apply the validator to your UI libraries. It performs component-state checks to guarantee consistent interactions across your products.

What is the best way to audit spacing and border radius in a design system?

The best way to audit spacing and border radius in a design system is to run an automated validator on your design tokens. This ensures consistent layout and component proportions without manual review time.

Do I need a token schema to validate typography and spacing rules?

Yes, you need a defined token schema and a CSS or JSON-based design spec to validate typography and spacing rules. These inputs enable the automated checks required for accurate compliance reporting.