How do I install the UI Lint skill?

Run npx skillmds@latest add francostino/ui-lint in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the UI Lint skill do?

Quick automated lint — detects common design system violations in seconds It is listed under Design & Media on SkillMD.

Is UI Lint safe to use?

SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Lint?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Lint free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published UI Lint?

FrancoStino (@francostino) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Lint by francostino — Agent Skill

Name: UI Lint
Author: FrancoStino

File contents

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]

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.

---name: ui-lintdescription: Quick automated lint — detects common design system violations in secondslicense: MIT---# Design Lint (Quick Check)## When to UseUse 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 fixTarget: **$ARGUMENTS**## What This DoesFast, 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 ColorsSearch for hex colors in className strings that should be semantic tokens:```bashgrep -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```bashgrep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file]```**Violation:** `p-[24px]`, `gap-[12px]`**Fix:** `p-6`, `gap-3`### 3. Old Width/Height Syntax```bashgrep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file]```**Violation:** `w-4 h-4`**Fix:** `size-4`### 4. Physical Properties (LTR-only)```bashgrep -n ' ml-\| mr-\| pl-\| pr-' [file]```**Violation:** `ml-2`, `mr-4`**Fix:** `ms-2`, `me-4`### 5. Forbidden Colors```bashgrep -n 'text-black\|bg-black\|#000000\|#000"' [file]```**Violation:** Any pure black**Fix:** Use skin's text-primary token### 6. Missing data-slot```bashgrep -n 'function [A-Z]' [file] # find componentsgrep -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)```bashgrep -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()```bashgrep -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 foundTotal: 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.

Frequently asked questions

UI Lint