MCPInstall

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
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads ss-lint automatically when relevant.

  3. 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

View all →

ss-audit

bitjaru/styleseed

Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices

Security864 installs

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.

Marketing & SEO863 installs

ss-a11y

bitjaru/styleseed

Audit a component or page for accessibility issues and fix them

Frontend & Design862 installs

ss-feedback

bitjaru/styleseed

Add appropriate user feedback states (loading, success, error, empty) to a component or page

Frontend & Design852 installs

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.

849 installs

Popular code quality & workflow skills

View category →

grill-me

mattpocock/skills

A relentless interview to sharpen a plan or design.

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.