Skip to content
ss-lint logo

Design Lint (Quick Check)

ss-lint

Quick automated lint โ€” detects common design system violations in seconds

SKILL.md

Full skill instructions

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.

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.

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-[#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.

More Code Review & Quality skills

azure-enterprise-infra-planner logo
Code Review & Quality

azure-enterprise-infra-planner

Enterprise Azure infrastructure architect generating Bicep or Terraform from workload descriptions.

1.5K 454.3K
View
caveman-review logo
Code Review & Quality

caveman-review

Ultra-compressed code review comments: location, problem, fix on one line each.

109.9K 388.8K
View
requesting-code-review logo
Code Review & Quality

requesting-code-review

Dispatch code review subagents with focused context to catch issues before they compound.

295.4K 245.8K
View
executing-plans logo
Code Review & Quality

executing-plans

Execute a written implementation plan with critical review and task checkpoints.

295.4K 229.1K
View
subagent-driven-development logo
Code Review & Quality

subagent-driven-development

Dispatch fresh subagents per task with two-stage review (spec compliance, then code quality) in the current session.

295.4K 221.7K
View
seo-audit logo
Code Review & Quality

seo-audit

Comprehensive SEO auditing framework covering crawlability, indexation, speed, on-page optimization, and content quality.

53.3K 220.8K
View
receiving-code-review logo
Code Review & Quality

receiving-code-review

Evaluate code review feedback with technical rigor before implementing, avoiding performative agreement and blind implementation.

295.4K 208.8K
View
gpt-image-2 logo
Code Review & Quality

gpt-image-2

Generate images via your ChatGPT subscription using text-to-image, image editing, and style transfer.

16 169.5K
View
mcp-builder logo
Code Review & Quality

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

179.7K 122.7K
View
elevenlabs-music-generation logo
Code Review & Quality

elevenlabs-music-generation

Generate studio-quality songs and instrumentals from text descriptions, 5 seconds to 5 minutes, with section-level structure control.

52 116.9K
View
site-architecture logo
Code Review & Quality

site-architecture

Plan and optimize your website's page hierarchy, navigation, URL structure, and internal linking.

53.3K 112.8K
View
workers-best-practices logo
Code Review & Quality

workers-best-practices

Cloudflare Workers code review and authoring against production best practices.

3K 100.4K
View

Coding & apps AI tools

Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View
Imagica logo
Coding & apps

Imagica

Build a no-code AI app in minutes.

Freemium
View
E
Coding & apps

Emergent.sh

An IDE for code migration from legacy to modern frameworks through coding agents.

Freemium
View
Wonder Dynamics logo
Coding & apps

Wonder Dynamics

Automate CGI animation in live-action scenes

Paid
View
M
Coding & apps

Mixo

Launch a website in seconds with AI.

Paid
View
AI Code Convert logo
Coding & apps

AI Code Convert

Streamline Your Coding Experience with AI Code Helper

Free
View