
ss-lint
Quick automated lint — detects common design system violations in seconds
- Installs
- 855
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bitjaru/styleseed --skill ss-lint- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ss-lint automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Before this workflow, follow the once-per-session update preflight.
Design Lint (Quick Check)
Registry-first artifact boundary
When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact-id>.md and .styleseed/manifests/<artifact-id>.json. Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective-rules.md only when no registry exists.
Canonical executable check
For a reproducible, artifact-bound scan with machine-readable output, use:
node <installed-ss-score>/scripts/styleseed-check.mjs scan \
--project-root . --artifact <artifact-id> --format json
node <installed-ss-score>/scripts/styleseed-check.mjs scan \
--project-root . --all --format sarif
The checker treats only contract, containment, manifest/hash, malformed-report, and required
coverage failures as hard errors. Detector findings (SS001–SS006) remain warnings and include a
stable file, line, evidence snippet, severity, and fix. Use styleseed-check ... verify to recompute
the bound evidence run; do not turn a string or stale report into a pass.
If either registry file exists, require a complete, valid registry and check only the selected
artifact's bundle and manifest. Only when neither registry file exists, read
.styleseed/effective-rules.md and .styleseed/manifest.json. Report missing or stale evidence
without regenerating bundles during a lint-only request. 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.
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 findings; an authorized implementation step owns fixes
Target: $ARGUMENTS
What This Does
Use the canonical checker above for executable diagnostics. The searches below are manual
review hints for applicable project conventions, not additional hard-error detectors. Run on
affected UI files when requested or required by the build workflow; do not lint unrelated edits.
Do not edit code in lint-only mode. Once required checks pass, repeat only after relevant changes
or new evidence of a problem. Use --all only when all artifacts are explicitly in scope.
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-[#3182F6]
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. Uncontracted Hard Black
grep -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
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
9. Universal Soft-card Drift
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.
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.
FAQ
What does the ss-lint skill do?
Quick automated lint — detects common design system violations in seconds
How do I install ss-lint?
Run npx skills add https://github.com/bitjaru/styleseed --skill ss-lint in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ss-lint/ (personal) or .claude/skills/ss-lint/ (project).
Which AI agents can use ss-lint?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ss-lint safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ss-lint?
It is published by bitjaru in bitjaru/styleseed. It has 855 recorded installs.
More from bitjaru/styleseed
ss-audit
bitjaru/styleseed
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
ss-review
bitjaru/styleseed
Review UI code for design system compliance, accessibility, and best practices
ss-setup
bitjaru/styleseed
Configure StyleSeed by selecting the output grammar, domain, page type, brand recipe, semantic palette recipe, optional aesthetic profile, and bounded brand tokens before scaffolding a first screen.
ss-a11y
bitjaru/styleseed
Audit a component or page for accessibility issues and fix them
ss-feedback
bitjaru/styleseed
Add appropriate user feedback states (loading, success, error, empty) to a component or page
ss-update
bitjaru/styleseed
Check and update an existing StyleSeed installation by exact rule/skill revision, preserve project-owned design decisions, then recompile and verify the effective bundle.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.