ui-lint
Quick automated lint — detects common design system violations in seconds
Profile →npx skills add sickn33/agentic-awesome-skills --skill ui-lint --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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: ```bash 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 ```bash grep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file] ``` **Violation:** `p-[24px]`, `gap-[12px]` **Fix:** `p-6`, `gap-3` ### 3. Old Width/Height Syntax ```bash grep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file] ``` **Violation:** `w-4 h-4` **Fix:**
- When to Use
- When NOT to use
- What This Does
- Checks
- 1. Hardcoded Colors
- 2. Raw Pixel Values in Tailwind
- 3. Old Width/Height Syntax
- 4. Physical Properties (LTR-only)
- 5. Forbidden Colors
- 6. Missing data-slot
- 7. Font Size CSS Variables (CRITICAL — Tailwind v4 conflict)
- 8. className Without cn()
- Output Format
- Limitations
grep -n '#[0-9a-fA-F]\{3,8\}' [file] | grep -v 'theme.css\|tokens\|\.json'
grep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file]
grep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file]
grep -n ' ml-\| mr-\| pl-\| pr-' [file]
grep -n 'text-black\|bg-black\|#000000\|#000"' [file]
grep -n 'function [A-Z]' [file] # find components
grep -n 'data-slot' [file] # check if present
grep -n 'text-\[var(--' [file]
grep -n '\-\-text-.*px\|--fs-.*px' [file]
grep -n 'className={`' [file]What does the ui-lint skill do?
Quick automated lint — detects common design system violations in seconds
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill ui-lint --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.