ss-lint

Scan source files for common design system violations and suggest fixes.

22|1|Updated Jul 17, 2026
One-click install
npx skills add https://github.com/izzoa/polyrouter --skill ss-lint
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ss-lint
Source: https://github.com/izzoa/polyrouter/tree/main/.agents/skills/ss-lint
Command: npx skills add https://github.com/izzoa/polyrouter --skill ss-lint

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill quickly scans files for common design system violations so you can catch low-level implementation issues immediately after changes instead of discovering them during review.

Core Features & Use Cases

  • Hardcoded style detection: Flags hex colors, raw pixel spacing, physical direction utilities, and forbidden black usage that should be replaced with semantic tokens.
  • Component quality checks: Detects missing data-slot attributes, className template literals, and risky CSS variable font-size patterns.
  • Use Case: Use it when a teammate changes a component and you want a fast pass that highlights obvious lintable design-system mistakes before deeper review.

Quick Start

Run the ss-lint skill on the changed file or directory to identify common design system violations and get a concise list of fixes.

Frequently Asked Questions about ss-lint

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I detect hardcoded colors and raw pixel spacing in component code?

Run a grep-based file-by-file scan to detect design system violations like hardcoded hex colors, raw pixel spacing, and physical direction utilities. It reports each violation with actionable fix suggestions to replace raw values with semantic tokens.

What is the best way to check component markup for missing data-slot attributes?

Scanning source files for component markup conventions detects missing data-slot attributes, className template literals, and risky CSS variable font-size patterns. It reports actionable fix suggestions for each violation found during the grep-based check.

How does grep-based linting work for design system violations?

Grep-based linting scans source files for specific text patterns like hardcoded hex colors, raw pixel spacing, and missing data-slot attributes. It performs quick file-by-file checks after edits and outputs actionable fix suggestions for each design system violation.

Can I use this linting check on a single component file after making edits?

Yes, you can run this linting check on a single changed component file. It performs quick file-by-file scanning after edits to highlight obvious design-system mistakes like hardcoded styles and missing markup conventions before deeper code review.

Does this design system linter support Tailwind CSS utility classes?

This design system linter applies to Tailwind CSS by scanning for physical direction utilities and raw pixel spacing that should be replaced with semantic tokens. It flags these utility classes during the grep-based source file scanning process.