<objective> Check design system compliance on recently changed or user-specified files. Reports token usage, component class adherence, typography consistency, dark mode patterns, and color violations. </objective> <process>

<step_1> Determine scope:

If user specified files, use those
Otherwise, get recently changed files: run git diff --name-only HEAD~1 filtered to src/**/*.tsx and src/**/*.css
If no recent changes, ask user which files to check </step_1>

<step_2> Read the design token source: Read src/app/globals.css to confirm current token definitions (they may have been updated). </step_2>

<step_3> Check each file for violations using Grep and Read:

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-*), )

</process>

<step_1> Determine scope:

If user specified files, use those
Otherwise, get recently changed files: run git diff --name-only HEAD~1 filtered to src/**/*.tsx and src/**/*.css
If no recent changes, ask user which files to check </step_1>

<step_2> Read the design token source: Read src/app/globals.css to confirm current token definitions (they may have been updated). </step_2>

<step_3> Check each file for violations using Grep and Read:

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-*), )

</process>

Check Design System

Check Design System

Openclaw Release Maintainer

Verify

Flow

Fix

Hygiene

Add Policy