Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Quick automated lint — detects common design system violations in seconds
.claude/skills/bitjaru-ss-lint/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-04 | ✗→✓ | ▲ Improved | 82% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 257% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 35% | 0% |
| case-14 | ✗→✓ | ▲ Improved | 166% | 0% |
| case-10 | ✗→✓ | ▲ Improved | 130% | 0% |
Read .styleseed/effective-rules.md and .styleseed/manifest.json; invoke /ss-resolve or $ss-resolve first when they are missing or stale. Lint detects deterministic drift; it must not flag an exact grammar/recipe/profile/adapter contract as a violation or let an arbitrary lock value create an exception.
/ss-review/ss-a11y/ss-audit/ss-review to fixTarget: $ARGUMENTS
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.
Search 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-[#3182F6] Fix: text-text-primary, bg-brand
bashgrep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file]
Violation: p-[24px], gap-[12px] Fix: p-6, gap-3
bashgrep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file]
Violation: w-4 h-4 Fix: size-4
bashgrep -n ' ml-\| mr-\| pl-\| pr-' [file]
Violation: ml-2, mr-4 Fix: ms-2, me-4
bashgrep -n 'text-black\|bg-black\|#000000\|#000"' [file]
Violation: Pure black without an exact structural role in the selected grammar/profile Fix: Use the semantic ink token, or cite the maintained contract that requires hard black
bashgrep -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"
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.
bashgrep -n 'className={`' [file]
Violation: Template literal className Fix: Use cn() for all className composition
Search for repeated rounded-2xl, shadow-[var(--shadow-card)], and mx-6 in pattern files. Flag the combination when the selected recipe is not calm-consumer. Fix: use ss-pattern-surface, ss-page-gutter, and the other recipe-aware helper classes.
🔴 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.
Other measured skills in the registry, with their headline benchmark lift.