How do I install the Check Design System skill?

Run npx skillmds@latest add qdhenry/check-design-system in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Check Design System safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Check Design System?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Check Design System free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Check Design System?

qdhenry (@qdhenry) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Check Design System

Name: Check Design System
Author: qdhenry

Focused design system compliance check on recent changes or specific files. Use when reviewing UI work for token usage, component classes, typography, and color violations.

qdhenry 0543871 2 files · 1.9 KB Updated Sep 17, 2026

Design & Media

Install

Press C to copy

$ npx skillmds@latest add qdhenry/check-design-system

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download .zip

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/qdhenry/check-design-system.svg)](https://skillmd.com/skills/qdhenry/check-design-system)

Trust & safety

Audits pending

Not yet audited · commit 0543871

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

Arbitrary color values — text-[#...], bg-[#...], border-[#...] etc.
Purple/violet colors — Forbidden per UI rules
dark: prefix in className — Should use .dark CSS selector (Tailwind 4 CSS-first)
Hardcoded spacing/radius — Should use CSS custom properties (var(--spacing-*), var(--radius-*))
Missing component utility classes — Manual button/badge/card styling instead of .btn-*, .badge-*, .card-*
Typography inconsistency — Manual font-size instead of .type-* classes

Include a compliance score: X/Y checks passed

qdhenry/foundry-oss/tree/main/.claude/governance/skills/check-design-system commit 054387103a

Frequently asked questions

npx skillmds@latest add qdhenry/check-design-system