| name | ui-lint |
| description | Quick automated lint — detects common design system violations in seconds |
| risk | unknown |
| source | https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-lint |
| source_repo | bitjaru/styleseed |
| source_type | community |
| date_added | 2026-07-01T00:00:00.000Z |
| license | MIT |
| license_source | https://github.com/bitjaru/styleseed/blob/main/LICENSE |
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-review to 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]
