check-design-system

Audit UI files for design-system violations with line references and suggested fixes.

Updated Apr 10, 2026
One-click install
npx skills add https://github.com/qdhenry/Foundry-OSS --skill check-design-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: check-design-system
Source: https://github.com/qdhenry/Foundry-OSS/tree/main/.claude/governance/skills/check-design-system
Command: npx skills add https://github.com/qdhenry/Foundry-OSS --skill check-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designed to audit recent changes or user-specified files for adherence to the design system, catching token usage, component class adherence, typography consistency, dark mode patterns, and color violations.

Core Features & Use Cases

  • Audits recent changes or user-specified UI files for design-system conformance.
  • Reports on token usage, component-class adherence, typography consistency, dark-mode patterns, and color violations.
  • Use Case: When reviewing UI work, run checks to surface violations before merging.

Quick Start

Run the check-design-system skill on recently changed or specified UI files to surface design-token usage, component-class adherence, typography consistency, and color violations.

Frequently Asked Questions about check-design-system

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

FAQPage Schema
How do I check UI files for design-system violations before merging?

To check design-system violations before merging, run checks on recently changed or specified UI files to surface token usage, component-class adherence, typography consistency, and color violations. The audit returns structured findings with line references and suggested fixes.

Can I audit color and typography consistency in specific UI files?

Yes, you can audit color and typography consistency by specifying target UI files. The check reports color violations, typography consistency issues, and dark mode patterns, returning structured findings with exact line references and suggested fixes.

Does this design-system lint check work with common UI frameworks?

Yes, the design-system lint check ensures compatibility with common UI frameworks. It enforces adherence to design tokens and component class conventions while validating accessibility where applicable across the audited files.

What is design token usage validation and how does it catch UI violations?

Design token usage validation audits UI files to ensure component styling adheres to defined design tokens. It catches violations by comparing recent changes against token conventions, reporting mismatches with line references and suggested fixes.

How do I report dark mode pattern violations in my UI repository?

To report dark mode pattern violations, apply the check to files in your repository scope defined by user input or recent changes. It identifies dark mode pattern inconsistencies and returns structured findings with line references and suggested fixes.