Ss Lint
- 249 installs
- 868 repo stars
- Updated August 3, 2026
- bitjaru/styleseed
ss-lint is a Claude Code skill that runs a fast grep-based scan to detect common design-system violations in seconds.
About
ss-lint is a StyleSeed skill that runs a quick grep-based scan for common design-system violations in a file or directory. A developer runs it after every file change to catch hardcoded colors, raw pixel values, old width/height syntax, physical margin properties, and missing data-slot attributes. It prints a pass, warn, or fail line for each issue with the exact token or class to use instead.
- Fast grep-based scan for common design-system violations
- Detects hardcoded hex, raw px, physical properties, and missing data-slot
- Prints pass/warn/fail lines with a specific fix per violation
Ss Lint by the numbers
- 249 all-time installs (skills.sh)
- Ranked #875 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
ss-lint capabilities & compatibility
- Capabilities
- design lint · token check · ui review · design system compliance
- Use cases
- code review · ui design
What ss-lint says it does
Quick automated lint — detects common design system violations in seconds
Fast, grep-based scan for common design violations.
Run this after every file change.
npx skills add https://github.com/bitjaru/styleseed --skill ss-lintAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 249 |
|---|---|
| repo stars | ★ 868 |
| Last updated | August 3, 2026 |
| Repository | bitjaru/styleseed ↗ |
What it does
Quickly scan UI files for design-system violations like hardcoded hex and raw pixel values.
Who is it for?
A fast automated design-system compliance scan after each UI file change
Skip if: Deeper design-judgment review (use ss-review), accessibility (use ss-a11y), Nielsen heuristics (use ss-audit), or applying fixes
When should I use this skill?
You want a seconds-long check for design-token violations after editing UI
What you get
A pass, warn, or fail report listing each violation with its specific fix
- Pass/warn/fail violation list
- A specific fix per violation
By the numbers
- Runs 8 grep-based design checks
- Runs in seconds unlike the deep ss-review audit
Files
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-reviewto 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 presentViolation: 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 warningsIf errors > 0, list specific fixes for each violation.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
What does ss-lint check for?
Hardcoded hex colors, raw pixel values, old width/height syntax, physical LTR-only properties, forbidden pure black, missing data-slot, font-size CSS variables, and className without cn().
Does ss-lint fix the violations?
No. It only flags violations; ss-review is used to apply the fixes.