Skip to content
dscheckdscheckdscheck

dscheck

Reads your design tokens. Flags every off-system value. Names the token you meant.
Set up the agent guardrailGitHub

dscheck reporting off-system values in a React component, naming the exact token for each, then applying the exact matches with dscheck fix

  1. Install — one plugin line in the linter you already run:

    eslint.config.js
    import dscheck from 'eslint-plugin-dscheck';
    export default [dscheck.configs.recommended];

  2. Check — dscheck reads your tokens (Tailwind @theme, DTCG JSON, :root) and flags every value that isn’t from them, with the nearest token attached:

    ✖ 6:21  Raw color oklch(0.55 0.2 260) — use var(--color-primary) (ΔEOK 0.000)
    ⚠ 9:14  Raw length 14px in gap — use var(--spacing-3) (12px, Δ2px)
    ✖ 11:17 Unknown token --color-primry — did you mean --color-primary?

  3. Fix — dscheck fix applies every provably-identical replacement; near-misses become one-click editor suggestions. Agents fix themselves via the guardrail hook.

Knows your tokens

Reads the token source you already have — Tailwind v4 @theme, :root custom properties — and enforces membership, not just “use a variable”.

Built for agent-written UI

Coding agents hallucinate plausible off-system values. Measured on an identical component task: 19 off-system values without the guardrail, 0 with the dscheck hook feeding fixes back.

Rides your existing linters

Ships as eslint + stylelint plugins over one core. Editor squiggles, lint-staged, and CI severities come free. The CLI adds baselines, SARIF, and an agent format.

Defaults that never cry wolf

Exact-match-only autofix, calc()/clamp() literals skipped, dynamic classnames never guessed at, and a pinned real-world corpus gating every release.