Design System Guard

When to Use This Skill

Use this skill when reviewing UI code, pull requests, components, pages, or design specifications for consistency with an existing design system. Also use it before implementation when a feature risks introducing new visual primitives or variants.

Enforce the project's actual tokens and components first. Do not invent a replacement design system. Generate refactoring or implementation code only when explicitly requested.

Inputs

Inspect:

• theme files, CSS variables, Tailwind configuration, and token definitions
• shared component libraries and variant APIs
• existing typography, spacing, color, radius, shadow, and motion scales
• representative tables, cards, lists, forms, and navigation patterns
• dark mode and high-contrast behavior
• the target code, design, screenshot, or component specification