skillfed

design-md-validator

This skill validates DESIGN.md files using Google's @google/design.md specification, catching structural errors, broken token references, and design-system quality issues. It runs a bundled Node script to lint YAML front matter, component properties, and WCAG contrast ratios, then reports findings with actionable fixes. Use it to verify design tokens before shipping or to compare versions for regressions.

design-md-validator lints DESIGN.md files against Google's design.md specification to catch errors and compliance issues.

AI-generated summary based on this skill's SKILL.md

11 3 MIT updated by Mineru98

Install

Mineru98/skills-store/design-md-validator · repository language: JavaScript

CLI (skillfed)coming soon
git clone https://github.com/Mineru98/skills-store
cp -r skills-store/.codex/skills/design-md-validator ~/.claude/skills/design-md-validator

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

What does design-md-validator do?

design-md-validator validates DESIGN.md files using Google's @google/design.md specification, catching structural errors, broken token references, and design-system quality issues. It runs a bundled Node script to lint YAML front matter, component properties, and WCAG contrast ratios, then reports findings with actionable fixes.

How do I lint design.md for errors?

design-md-validator's primary function is to lint DESIGN.md files for errors. Run the skill to scan your DESIGN.md file; it will check YAML front matter syntax, component property validity, token references, and WCAG contrast compliance, returning a detailed report of any issues found.

Can design-md-validator check design tokens YAML validation?

Yes. design-md-validator validates design tokens YAML by checking for missing or broken references, verifying that all token definitions are well-formed and properly linked throughout your design system specification.

Does design-md-validator compare two DESIGN.md versions?

Yes. design-md-validator can compare two DESIGN.md versions to detect regressions, helping you identify structural changes, removed tokens, or compliance drift between design system iterations.

What compliance checks does design-md-validator perform?

design-md-validator verifies WCAG contrast ratios on design tokens and validates component property definitions against the @google/design.md specification, ensuring your design system meets accessibility and structural standards.

Can design-md-validator find design system files in my workspace?

Yes. design-md-validator can discover and audit design system files in your workspace, making it easy to locate all DESIGN.md files and related token definitions that need validation.

SKILL.md

rendered from the published skill — quoted content, verbatim

DESIGN.md Validator

Overview

Validate DESIGN.md files before using them as design-system source of truth. Prefer the bundled script for repeatable checks, then interpret the JSON findings into concrete fixes.

(truncated - see the full file via the links below)

Read as markdown · JSON record · Browse the source repository

File tree — 6 files
.codex/skills/design-md-validator/SKILL.md
.codex/skills/design-md-validator/agents/openai.yaml
.codex/skills/design-md-validator/references/design-md-spec-summary.md
.codex/skills/design-md-validator/references/lint-rules.md
.codex/skills/design-md-validator/references/spec-checklist.md
.codex/skills/design-md-validator/scripts/validate_design_md.mjs

Related skills

Tags

design-system-linting token-validation wcag-compliance-check yaml-front-matter spec-enforcement regression-detection component-property-validation contrast-ratio-audit version-comparison