design-md-validator

Validate DESIGN.md files against the Google design specification for structural, token, and accessibility issues.

47|4|Updated Feb 21, 2026
One-click install
npx skills add https://github.com/fabricioctelles/skills --skill design-md-validator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md-validator
Source: https://github.com/fabricioctelles/skills/tree/main/skills/design-md-validator
Command: npx skills add https://github.com/fabricioctelles/skills --skill design-md-validator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the uncertainty and manual effort involved in checking DESIGN.md files for specification compliance, broken token references, accessibility issues, and structural errors.

Core Features & Use Cases

  • Specification Validation: Lint local files, remote documents, or standard input against the official Google DESIGN.md specification.
  • Design System Analysis: Detect broken references, missing tokens, section-order problems, typography gaps, orphaned tokens, and WCAG contrast issues.
  • Token Workflows: Compare design system versions and export tokens to Tailwind, CSS custom properties, or DTCG formats.
  • Use Case: When reviewing a design system before implementation, run a full audit to identify invalid references and contrast failures, then apply concrete fixes and re-validate the document.

Quick Start

Use the design-md-validator skill to lint the attached DESIGN.md file, interpret every finding, and suggest actionable fixes.

Frequently Asked Questions about design-md-validator

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

FAQPage Schema
How do I validate a DESIGN.md file for specification compliance?

To validate a DESIGN.md file, lint it against the official Google design specification to identify structural, token, and accessibility issues. The validator requires the @google/design.md CLI through npx and uses runtime rule discovery to provide current lint results.

Can I check WCAG contrast issues and broken token references in design systems?

Yes, design system validation checks WCAG contrast issues, broken references, missing tokens, and typography gaps. It detects orphaned tokens and section-order problems to ensure full structural and accessibility compliance.

Does the validator support exporting tokens to Tailwind, CSS, or DTCG formats?

Yes, token workflows support exporting design tokens to Tailwind, CSS custom properties, or DTCG formats. You can also compare design system versions to track token changes and resolve reference discrepancies across updates.

Do I need the @google/design.md CLI installed locally to run specification linting?

You do not need a permanent local installation; the validator executes the @google/design.md CLI through npx. This runtime rule discovery mechanism ensures current lint results and reliable remediation guidance without manual CLI management.

What is the best way to audit a remote DESIGN.md document before implementation?

The best way to audit a remote DESIGN.md document is to run a full validation check against the Google specification. This identifies invalid references and contrast failures, then provides actionable fixes you can apply and re-validate.

Why does design system validation fail on missing tokens and section-order problems?

Design system validation fails on missing tokens and section-order problems because the linter enforces the official Google DESIGN.md specification structure. It flags orphaned tokens and typography gaps to prevent broken references during implementation.