Design System Validator Skill

SkillMedia

Validate design system compliance in code and detect token usage violations

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the Design System Validator Skill skill

What this skill tells your AI

The instructions your AI receives, as published by a5c-ai/babysitter in library/specializations/ux-ui-design/skills/design-system-validator/SKILL.md and read by ahel’s review.

Purpose

Validate that code adheres to design system specifications, checking token usage, component props, and style consistency.

Capabilities

Check design token usage in CSS/SCSS
Validate component prop usage
Detect hard-coded values that should use tokens
Ensure naming convention compliance
Generate compliance reports
Integrate with linting tools

Target Processes

design-system.js
component-library.js

Integration Points

ESLint plugins for design systems
Stylelint for CSS validation
Custom AST analyzers
Token documentation

Input Schema

{
  "type": "object",
  "properties": {
    "scanPath": {
      "type": "string",
      "description": "Path to code to validate"
    },
    "tokenDefinitions": {
      "type": "string",
      "description": "Path to design token definitions"
    },
    "rules": {
      "type": "object",
      "properties": {
        "enforceTokenColors": { "type": "boolean", "default": true },
        "enforceTokenSpacing": { "type": "boolean", "default": true },
        "enforceTokenTypography": { "type": "boolean", "default": true },
        "allowHardcodedValues": { "type": "array", "items": { "type": "string" } }
      }
    },
    "fileTypes": {
      "type": "array",
      "items": { "type": "string" },
      "default": ["css", "scss", "tsx", "jsx"]
    },
    "severity": {
      "type": "string",
      "enum": ["error", "warning", "info"],
      "default": "warning"
    }
  },
  "required": ["scanPath", "tokenDefinitions"]
}

Output Schema

{
  "type": "object",
  "properties": {
    "violations": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "file": { "type": "string" },
          "line": { "type": "number" },
          "rule": { "type": "string" },
          "message": { "type": "string" },
          "suggestion": { "type": "string" }
        }
      }
    },
    "summary": {
      "type": "object",
      "properties": {
        "filesScanned": { "type": "number" },
        "totalViolations": { "type": "number" },
        "byRule": { "type": "object" },
        "complianceScore": { "type": "number" }
      }
    },
    "tokenCoverage": {
      "type": "object",
      "description": "Token usage statistics"
    }
  }
}

Usage Example

const result = await skill.execute({
  scanPath: './src/components',
  tokenDefinitions: './tokens/design-tokens.json',
  rules: {
    enforceTokenColors: true,
    enforceTokenSpacing: true,
    enforceTokenTypography: true
  },
  severity: 'warning'
});

Signals

GitHub stars: 2k
Forks: 112
Last commit: Sep 2026

Advanced

Item type: skill
Key: design-system-validator
Source: github.com/a5c-ai/babysitter

github.com/a5c-ai/babysitter