# Design System Checker

> Design System Checker

- Skill: `uitbreidenos/design-system-checker` (Agent Skill)
- Install (CLI): `npx skillmds@latest add uitbreidenos/design-system-checker`
- Raw SKILL.md: https://api.skillmd.com/api/skills/uitbreidenos/design-system-checker/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: UitbreidenOS (https://skillmd.com/u/uitbreidenos)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/uitbreidenos/design-system-checker

---

# Design System Checker

## When to activate

User runs `/check-design-system` or requests verification that a component uses design tokens and adheres to the design system.

## When NOT to use

- Full component audits (use `/component-auditor` instead)
- Storybook generation (use `/storybook-generator` instead)
- Accessibility reviews (use `/review-a11y` instead)

## Instructions

1. **Analyze token usage**
   - Identify all hardcoded colors, spacing, typography
   - Map to design token equivalents
   - Flag any missing tokens in the design system
   - Suggest token structure if design system is incomplete

2. **Check design system alignment**
   - Component naming matches design system spec
   - Props align with design tokens (color, size, spacing, etc.)
   - Variants match approved design system variants
   - Dark mode support (if design system requires)

3. **Review Storybook integration**
   - Component exported to Storybook
   - All variants documented
   - Props documented with descriptions
   - Usage examples provided

4. **Generate token migration plan**
   - List hardcoded values to replace
   - Provide `var()` CSS or token references
   - Suggest code diffs for refactor
   - Estimate effort (small/medium/large)

5. **Verify design spec alignment**
   - Component matches Figma/design spec
   - Breakpoints and responsive behavior correct
   - Spacing, typography, colors all match
   - Interaction patterns (hover, focus, active) match

6. **Produce audit report**
   - Token compliance score (%)
   - Design system alignment score (%)
   - Storybook coverage score (%)
   - Actionable refactoring plan

## Example

User: "Check if this Card component follows our design system."

Response:
- **Token Compliance:** 60% (hardcoded colors, missing spacing tokens)
- **Design System Alignment:** 90% (naming correct, variants match)
- **Storybook Coverage:** 70% (missing dark mode variant)
- **Refactor Plan:**
  - Replace `color: #FF6B6B` with `var(--color-red-500)`
  - Replace `padding: 16px` with `var(--spacing-4)`
  - Add dark mode variant to Storybook
  - Add `aria-label` for icon cards