Agent Skills › bitjaru/styleseed › ss-lint

ss-lint

GitHub

快速自动化设计规范检查工具，通过正则扫描检测硬编码颜色、原始像素值、物理属性等常见设计系统违规项。运行速度快，适用于文件变更后的即时反馈，不替代深度审查或修复操作。

engine/.claude/skills/ss-lint/SKILL.md bitjaru/styleseed

Trigger Scenarios

用户请求快速设计lint检查代码提交或保存后自动触发需要验证Tailwind类名是否符合语义化规范

Install

npx skills add bitjaru/styleseed --skill ss-lint -g -y

More Options

Non-standard path

npx skills add https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-lint -g -y

Use without installing

npx skills use bitjaru/styleseed@ss-lint

指定 Agent (Claude Code)

npx skills add bitjaru/styleseed --skill ss-lint -a claude-code -g -y

安装 repo 全部 skill

npx skills add bitjaru/styleseed --all -g -y

预览 repo 内 skill

npx skills add bitjaru/styleseed --list

SKILL.md

Frontmatter

{
    "name": "ss-lint",
    "description": "Quick automated lint — detects common design system violations in seconds",
    "allowed-tools": "Read, Grep, Glob, Bash",
    "argument-hint": "[file-path or directory]"
}

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.