How do I install the Ss Lint skill?

Run npx skillmds add majiayu000/ss-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 Ss Lint skill do?

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

Is Ss Lint safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ss 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 Ss Lint free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Ss Lint?

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

Ss Lint by majiayu000 — Agent Skill

Name: Ss Lint
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

Design Lint (Quick Check)

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.

---name: ss-lintdescription: Quick automated lint — detects common design system violations in seconds--- # Design Lint (Quick Check) ## 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:** `size-4` ### 4. Physical Properties (LTR-only) ```bash grep -n ' ml-\| mr-\| pl-\| pr-' [file] ``` **Violation:** `ml-2`, `mr-4` **Fix:** `ms-2`, `me-4` ### 5. Forbidden Colors ```bash grep -n 'text-black\|bg-black\|#000000\|#000"' [file] ``` **Violation:** Any pure black **Fix:** Use skin's text-primary token ### 6. Missing data-slot ```bash 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) ```bash 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() ```bash 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.

Frequently asked questions