Catch design system violations in UI code instantly
Fast grep-based lint catching hardcoded colors, raw pixel values, and other design-system violations in seconds.
Why it matters
Automatically scan UI component code for common design system violations-hardcoded colors, raw pixel values, deprecated syntax, and missing semantic tokens-so teams can enforce consistency without manual review.
Outcomes
What it gets done
Flag hardcoded hex colors that should use semantic design tokens
Detect raw pixel values in Tailwind classes that break the spacing scale
Identify physical directional properties that break RTL layout support
Warn about missing data-slot attributes and Tailwind v4 CSS variable conflicts
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/ag-ui-lint | bash Overview
Design Lint (Quick Check)
This skill runs a fast grep-based scan for eight common design-system violations - hardcoded colors, raw pixel values, old size syntax, physical spacing properties, forbidden black, missing data-slot, conflicting font-size variables, and unwrapped className - reporting pass/fail/warn with fixes. Use it for a quick automated check after every file change - it only flags violations, not fixes; use /ss-review for deeper judgment or applying refactors, /ss-a11y for accessibility, /ss-audit for UX heuristics.
What it does
Runs a fast, grep-based scan for common design-system violations - completing in seconds, unlike a deep manual audit - intended to run after every file change.
grep -n '#[0-9a-fA-F]\{3,8\}' [file] | grep -v 'theme.css\|tokens\|\.json'
It runs eight checks: hardcoded hex colors that should be semantic tokens (e.g. text-[#3C3C3C] should be text-text-primary); raw pixel values in Tailwind utilities instead of scale classes (e.g. p-[24px] should be p-6, gap-[12px] should be gap-3); old width/height syntax instead of the unified size-* utility (e.g. w-4 h-4 should be size-4); physical (LTR-only) spacing properties instead of logical properties (e.g. ml-2/mr-4 should be ms-2/me-4); forbidden pure-black colors (text-black, bg-black, #000000) that should use the active skin's text-primary token instead; components missing a data-slot attribute; font-size CSS variables used inside Tailwind's text-[var(--...)] syntax, flagged as critical because Tailwind v4 reads that namespace as color rather than font-size (fix: use an explicit text-[13px] value instead); and className built with a template literal instead of composed via cn().
Each check is implemented as one or two grep invocations against the target file(s), searching for the violation pattern (with false-positive exclusions where needed, e.g. excluding theme.css/tokens/.json files from the hex-color check). Results are reported in a fixed format: FAIL for hard violations (hardcoded hex, raw pixel values), WARN for softer issues (physical properties, missing data-slot), PASS when clean, with a file:line reference and the specific fix for each violation, plus a total error/warning count.
When to use - and when NOT to
Use it for a quick automated check after a file change to catch common design-token violations in seconds. It only flags violations - it does not apply fixes. For deeper design judgment (composition, hierarchy, rhythm) use /ss-review; for accessibility specifically use /ss-a11y; for Nielsen UX heuristics use /ss-audit; for actually applying refactors, use /ss-review.
Inputs and outputs
Input is a target file (or files) to lint, given as $ARGUMENTS. Output is a formatted pass/fail/warn report per violation, with file:line location, the specific rule broken, and the recommended fix.
Integrations
Built around Tailwind CSS v4 utility conventions and a cn() className-composition helper - the font-size check specifically targets a known Tailwind v4 namespace conflict between CSS variable font sizes and color variables.
Who it's for
Developers who want an instant, automated check for common design-system violations (hardcoded colors, raw pixel values, physical spacing properties, missing data-slot attributes) right after editing a file, before escalating to a deeper manual review.
Source README
Design Lint (Quick Check)
When to Use
Use this skill when you need quick automated lint - detects common design system violations in seconds.
When NOT to use
- For deeper review of design judgment (composition, hierarchy, rhythm) → use
/ss-review - For accessibility specifically → use
/ss-a11y - For Nielsen UX heuristics → use
/ss-audit - For applying refactors - this only flags violations; use
/ss-reviewto fix
Target: $ARGUMENTS
What This Does
Fast, grep-based scan for common design violations. Runs in seconds (unlike /ss-review which is a deep manual audit). Run this after every file change.
Checks
1. Hardcoded Colors
Search for hex colors in className strings that should be semantic tokens:
grep -n '#[0-9a-fA-F]\{3,8\}' [file] | grep -v 'theme.css\|tokens\|\.json'
Violation: text-[#3C3C3C], bg-[#721FE5]
Fix: text-text-primary, bg-brand
2. Raw Pixel Values in Tailwind
grep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file]
Violation: p-[24px], gap-[12px]
Fix: p-6, gap-3
3. Old Width/Height Syntax
grep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file]
Violation: w-4 h-4
Fix: size-4
4. Physical Properties (LTR-only)
grep -n ' ml-\| mr-\| pl-\| pr-' [file]
Violation: ml-2, mr-4
Fix: ms-2, me-4
5. Forbidden Colors
grep -n 'text-black\|bg-black\|#000000\|#000"' [file]
Violation: Any pure black
Fix: Use skin's text-primary token
6. Missing data-slot
grep -n 'function [A-Z]' [file] # find components
grep -n 'data-slot' [file] # check if present
Violation: Component without data-slot
Fix: Add data-slot="component-name"
7. Font Size CSS Variables (CRITICAL - Tailwind v4 conflict)
grep -n 'text-\[var(--' [file]
grep -n '\-\-text-.*px\|--fs-.*px' [file]
Violation: text-[var(--text-sm)] or --text-sm: 13px in theme.css
Fix: Use explicit text-[13px]. CSS variable font sizes conflict with Tailwind v4's --text-* namespace - Tailwind reads them as color, not font-size.
8. className Without cn()
grep -n 'className={`' [file]
Violation: Template literal className
Fix: Use cn() for all className composition
Output Format
🔴 FAIL [file:line] Hardcoded hex: text-[#3C3C3C] → use text-text-primary
🔴 FAIL [file:line] Raw px: p-[24px] → use p-6
🟡 WARN [file:line] Physical prop: ml-2 → use ms-2
🟡 WARN [file:line] Missing data-slot on MyComponent
🟢 PASS No violations found
Total: X errors, Y warnings
If errors > 0, list specific fixes for each violation.
Limitations
- Use this skill only when the task clearly matches its upstream source and local project context.
- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.