design-token-critic

Audit design token systems for naming consistency and cross-platform parity.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/zivtech/joyus-desktop --skill design-token-critic
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-token-critic
Source: https://github.com/zivtech/joyus-desktop/tree/main/.claude/skills/design-token-critic
Command: npx skills add https://github.com/zivtech/joyus-desktop --skill design-token-critic

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the common issue of design token drift, where organic growth leads to inconsistent naming, missing values, and cross-platform discrepancies that threaten design system integrity.

Core Features & Use Cases

  • Architecture Audit: Validates token tiers, naming conventions, and aliasing strategies against design memory.
  • Compliance & Parity: Checks color contrast against WCAG standards and verifies parity between CSS, Tailwind, and Figma variables.
  • Use Case: When a design system has grown organically and you suspect raw values are being used instead of tokens, this Skill provides an evidence-backed audit to identify structural debt before it propagates.

Quick Start

Use the design-token-critic skill to audit the token files in the current directory and report on naming consistency and contrast compliance.

Frequently Asked Questions about design-token-critic

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

FAQPage Schema
How do I audit design tokens for naming consistency and cross-platform parity?

You can audit design tokens by validating token tiers, naming conventions, and aliasing strategies against design memory to identify structural debt and verify parity across CSS, Tailwind, and Figma variables.

What causes design token drift and how do I check for it?

Design token drift is caused by organic growth leading to inconsistent naming and missing values. You check for it by performing an evidence-backed audit to find raw values being used instead of established tokens.

Can I check Figma variables against CSS and Tailwind for compliance?

Yes, you can verify parity between CSS, Tailwind, and Figma variables. The process checks color contrast against WCAG standards and evaluates typography scales to ensure cross-platform compliance.

Do I need token source files to audit my design system?

Yes, you need access to token source files and design memory artifacts. These inputs are required to perform structural verification and compliance checks against your established design system documentation.

How do I validate color contrast ratios in my design tokens?

You validate color contrast ratios by checking your token source files against WCAG standards. This compliance verification identifies tokens that fail accessibility requirements during the architectural audit.