token-validation

Community

Validate design tokens, prevent system errors.

AuthorHigashi-Kota
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Invalid token references, incorrect formats, or inconsistent naming can break a design system's integrity, leading to build failures and unpredictable UI. This Skill ensures all token definitions are correct, consistent, and adhere to architectural rules, preventing costly errors.

Core Features & Use Cases

  • Reference & Format Check: Validates that all token references resolve correctly and values adhere to expected formats (e.g., HEX, rem, px).
  • Naming Convention Audit: Ensures tokens follow established primitive and semantic layer naming rules for clarity and maintainability.
  • Dependency Analysis: Detects critical issues like circular references, orphaned tokens (defined but unused), and duplicate values.
  • Semantic Layer Integrity: Verifies that semantic tokens only reference primitives and have complete state coverage (e.g., base, hover, focus, disabled).
  • Use Case: Perform a complete audit of your design-tokens.yml file to identify all broken references, format errors, and naming inconsistencies before a major release, generating a prioritized fix list.

Quick Start

Use the token-validation skill for a complete audit of token definition correctness and consistency.

Dependency Matrix

Required Modules

pnpm

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: token-validation
Download link: https://github.com/Higashi-Kota/react-tailwindcss-sandbox/archive/main.zip#token-validation

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.