Design system validator

Skill a5c-ai/babysitter/library/specializations/ux-ui-design/skills/design-system-validator

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill design-system-validator

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Validate design system compliance in code and detect token usage violations

SKILL.md

3.1 KB, as published. Nobody here has run it

Design System Validator Skill

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'
});