# onsystem > Keeps coding agents on your design system: it knows your real components, props, variants and tokens, catches the moment an agent invents one and has it fix it, and the same check gates your PRs. Local, zero config, works alongside @shadcn/lint. It reads React components, props, cva variants and tokens from source with the TypeScript compiler. In Claude Code, a hook checks each file right after it is written and hands the errors back with their fixes; other agents run check_ui over MCP; the CI check gates pull requests. Static analysis: no model calls, no API key. Version 0.6.0, MIT. React (.tsx/.jsx), shadcn/ui or any design system, Tailwind v3 or v4, Node.js 20.19+. Install: - Claude Code (hook, MCP server and skill): `/plugin marketplace add dgesteves/onsystem` then `/plugin install onsystem@dgesteves` - CI: `npx onsystem check . --format github --require-design-system`, with `--update-baseline` once to accept existing findings - Required check on pull requests: the GitHub Action `uses: dgesteves/onsystem@v0`, which annotates the lines a pull request changed - Any MCP client, over stdio: `npx -y onsystem` Benchmark (2026-10-12): design-system rule violations per run went from 0.85 to 0.00 with onsystem's skill, MCP server and hook, with no change in tsc pass rate or cost per run (1,200 runs, 6 models, 3 providers, 5 repositories). Tables, method and blind labels: https://onsystem.vercel.app/benchmark ## Docs - [Quickstart](https://onsystem.vercel.app/docs): See what it found in your app, hold your agent to the design system, and gate your pull requests with the same check. - [Set up your agent](https://onsystem.vercel.app/docs/clients): MCP configs for Cursor, VS Code, Claude Desktop, Codex CLI, Copilot CLI, Windsurf, JetBrains, Zed, Gemini CLI, Grok Build and Claude Code without the plugin. - [Claude Code plugin](https://onsystem.vercel.app/docs/plugin): The hook that checks each UI file right after Claude writes it and hands the errors back, the MCP server and a skill: what each does, runs and touches. - [CI and baselines](https://onsystem.vercel.app/docs/ci): Gate pull requests with the same check, as annotations, and adopt it in a codebase that already has findings. - [GitHub Action](https://onsystem.vercel.app/docs/required-check): The GitHub Action that annotates the lines a pull request changed, making it a required check, and notes for pull requests from Copilot, Codex and Claude. - [ESLint plugin](https://onsystem.vercel.app/docs/eslint): The same rules in ESLint 9 and 10, checked against each file’s design system, and how to run them alongside @shadcn/lint. - [Configuration](https://onsystem.vercel.app/docs/configuration): How the design system is found with zero config, and the config file for other layouts. - [Design-system packages](https://onsystem.vercel.app/docs/design-system-packages): Set onsystem up once in a design-system package, and every app that depends on it finds the design system with no config of its own. - [Design tokens](https://onsystem.vercel.app/docs/tokens): Tokens from stylesheets, DTCG 2025.10 files and a DESIGN.md, and onsystem export to write them as DTCG or DESIGN.md. - [Tools](https://onsystem.vercel.app/docs/tools): The five MCP tools, the resources and the prompt, with real responses. - [Troubleshooting](https://onsystem.vercel.app/docs/troubleshooting): When inspect finds nothing, a monorepo root that misses a project, components with 0 props, and min-release-age policies that block npx. - [FAQ](https://onsystem.vercel.app/docs/faq): Privacy, @shadcn/lint and Storybook, other frameworks, and false positives. - [How it works](https://onsystem.vercel.app/docs/how-it-works): How the design system is read and checked, results on real codebases, how it compares, design decisions and limits. - [Migrating from design-system-mcp](https://onsystem.vercel.app/docs/migrating): What moved when @dgesteves/design-system-mcp became onsystem: the package, command, config and baseline files, plugin, MCP key and registry name. - [Benchmark](https://onsystem.vercel.app/benchmark): coding agents from 3 providers with and without onsystem, by arm and model, with the method and how to reproduce it - [Rules](https://onsystem.vercel.app/rules): every rule with what it catches, why it matters, an example and its fix - [Playground](https://onsystem.vercel.app/playground): run check_ui on code in the browser, against a demo design system ## Tools - `list_components`: List every component in the project design system with a one-line description, the native element it renders, its variant values, its parts and its import. Call this before writing UI in this project. At a monorepo root, pass `path` for the project of the file you are editing; without it, every project is listed, each component with its package. - `get_component`: Get the full contract of one component: import, props with types and defaults, cva variants and the classes each applies, parts (sub-components), design tokens it uses, usage guidelines and examples from its docs. Call it before using a component. Accepts "Button", "CardHeader" or "Card.Header". At a monorepo root, pass `path` (the file you are editing) to get the component its project uses. - `search_components`: Find components by what you want to build, e.g. "confirm a destructive action", "status label", "text field with validation". Ranks names, descriptions, docs, props and variant values with BM25 (local, no API key). Use it when you do not know which component fits. - `get_tokens`: List design tokens with resolved values, dark-mode values and how to use each (Tailwind class or CSS variable). Filter by category (color, spacing, radius, typography, shadow, other) or a substring. Use these instead of hex codes, px values or Tailwind default palette classes. - `check_ui`: Lint TSX/JSX against the design system. Reports hardcoded colors, spacing and radius (with the nearest token), native elements that have a design-system component, unknown components, props and variant values, and icon-only buttons without an accessible name. Each diagnostic has line/column, a rule id, a message and a suggested fix. Run it on every snippet or file you write and fix all errors. Pass `code` for unsaved code, or `path` for a file in the project. ## Rules - [`no-hardcoded-color`](https://onsystem.vercel.app/rules/no-hardcoded-color) (error): Colors must come from design tokens: no hex/rgb/oklch literals, arbitrary Tailwind colors or default-palette classes. - [`no-hardcoded-spacing`](https://onsystem.vercel.app/rules/no-hardcoded-spacing) (warn): Padding, margin and gap must use the spacing scale, not arbitrary px/rem values. - [`no-hardcoded-radius`](https://onsystem.vercel.app/rules/no-hardcoded-radius) (warn): Border radius must use radius tokens, not arbitrary values. - [`prefer-design-system-component`](https://onsystem.vercel.app/rules/prefer-design-system-component) (error): Use the design-system component instead of the native element it wraps (