Skip to main content
Glama
dgesteves
by dgesteves

onsystem

Keeps coding agents on your design system: catches palette colors, native elements and APIs your system lacks, at every edit and pull request, with the fix. Set it up once in your design-system package; every app in your monorepo gets it. Runs locally and works alongside @shadcn/lint.

Built for design-system and platform teams with a React design-system package; a shadcn/ui app is the zero-config demo. Formerly @dgesteves/design-system-mcp (what changed).

Using the GitHub Action? uses: dgesteves/onsystem@v0 checks the lines a pull request changed: see CI and baselines.

CI npm MCP Registry Cursor Directory License: MIT

Install in Cursor Install in VS Code Claude Code plugin GitHub Action

Also works with Codex CLI Gemini CLI Antigravity Grok Build GitHub Copilot CLI Claude Desktop Windsurf JetBrains Zed

Website and docs: onsystem.vercel.app, with a playground that checks your own code.

Feedback wanted: say where it breaks in the launch feedback thread, see what's next in the roadmap, or pick up a good first issue. If onsystem is useful to you, a star helps other people find it.

https://github.com/user-attachments/assets/900cc1fa-387c-4e76-a524-a818521dd1a0

On the website, an agent drafts a settings card, check_ui finds 11 problems with a fix each, and the agent applies them. Then a real Claude Code session with the plugin: Claude looks the components up before writing, and check_ui passes. Last, the benchmark.

The problem

Coding agents write UI from their training data, not from your design system. Ask for a settings card and you get bg-[#ef4444], p-[13px], a native <button>, variant="danger" on a Button that only has destructive, and <Card.Header> where the system exports CardHeader. On the demo draft above, tsc reports 3 of the 11 problems, and review catches the rest when someone has the time. Describing the design system to the agent helps; what holds is checking what it actually wrote, at the edit and at the pull request.

Related MCP server: weave-design-system-mcp

What it checks

onsystem reads your components, cva and tv variants, parts and tokens from source with the TypeScript compiler, and checks .tsx and .jsx against them. Every finding has a rule id, a location and the fix. Tokens come from your stylesheets, DTCG 2025.10 files or a DESIGN.md, and onsystem export writes them out as either.

Rule

Default

Catches

no-unknown-component

error

Components and parts that don't exist (<Card.Header>, typos)

no-unknown-prop

error

Props a component doesn't take (tone, isDisabled)

no-unknown-variant

error

Values outside a variant (variant="danger")

prefer-design-system-component

error

Native elements the design system has a component for (<button> → <Button>)

no-hardcoded-color

error

Hex, rgb, hsl, oklch and Tailwind palette colors (bg-gray-100 → bg-muted)

icon-button-accessible-name

error

Icon-only buttons without an accessible name

no-hardcoded-spacing

warn

Arbitrary padding, margin and gap (p-[13px] → p-3)

no-hardcoded-radius

warn

Arbitrary radius (rounded-[7px] → rounded-sm)

How often it is wrong. The corpus job runs check on 12 public repositories pinned by commit (Documenso, Dub, Cal.com, midday, Flowise and others: 24 runs, 14,539 distinct findings), without their dependencies installed (the two MUI apps get MUI). A seeded random sample of 80 of those findings, stratified by rule, was labelled from the code alone: blind labels by an AI reviewer (Claude Opus 5.5), not by a person. 57 are right, 14 debatable and 9 false positives: 11.2% (95% Wilson interval 6.0-20.0%), about the same when weighted by each rule's share of all findings (11.0%). Most come from no-hardcoded-color (7 of 65 sampled). Counting values a project's own design system already uses as debatable, 6 of 80 are false positives (7.5%, 3.5-15.4%). The sample has each label with its reason, the labeller's notes and the script behind these numbers. Shipped code rarely invents components, props or variants, and without dependencies no-unknown-prop skips components whose props do not resolve: those three rules have 56 findings in the corpus, 55 of them in Flowise, an MUI app, and 3 in the sample, all right but too few for a rate of their own. The corpus's older labels, made by an AI reviewer who could see the finding and so not blind, fail the job when one of their true positives stops being reported or a fixed false positive comes back. Code installed from a shadcn registry, such as the chatbot's components/ai-elements, has no labels yet (Code from shadcn registries). The rules reference shows each rule on an example and how to suppress a finding.

Quickstart

Run it from the app's folder or from the monorepo root, with Node.js 20.19 or later:

npx -y onsystem inspect   # what it found; --explain says why
npx -y onsystem check .   # the same check the agent and CI run
npx -y onsystem init      # write the config, and offer a baseline

At a monorepo root, inspect lists every app and design-system package, and check checks each file by its own project's design system. In a design-system package, init sets it up for every app that depends on it, with no config in the apps: as a workspace package, or installed from npm when it publishes its component sources (init checks its files list). From a package that publishes only compiled code, installed apps get the token rules but no component, prop, variant or native-element checks.

In a new create-next-app, the template page's hardcoded colors already make the first check . fail; init offers to record them as a baseline, so only new findings fail. Folders installed from a shadcn registry, such as components/ai-elements, are someone else's code: Code from shadcn registries says how to check them or leave them out.

Claude Code. The plugin brings the hook, the MCP server and a skill:

/plugin marketplace add dgesteves/onsystem
/plugin install onsystem@dgesteves

After each Write or Edit of a .tsx or .jsx file, the hook runs onsystem check on it. Errors go back to Claude as a blocking error with the fix, so Claude corrects the file before it moves on; warnings go as a note. It stays quiet in projects without a design system. Codex installs the same plugin, and the hook checks the files its apply_patch changes. What it runs and touches.

Cursor or VS Code. Install in Cursor Install in VS Code, or commit the config. The agent gets the tools and runs check_ui on what it writes.

Other agents. npx skills add dgesteves/onsystem adds the skill to any agent with Agent Skills, and there are plugins for Codex, GitHub Copilot CLI, VS Code and Cursor.

Any MCP client. Run npx -y onsystem as a stdio server. There are configs for Claude Desktop, Codex CLI, GitHub Copilot CLI, Windsurf, JetBrains IDEs, Zed, Gemini CLI, Antigravity and Grok Build.

CI. Install it as a dev dependency, accept the findings the codebase already has once, and fail pull requests only on new ones:

npm install --save-dev onsystem
npx onsystem check . --update-baseline   # writes onsystem.baseline.json: commit it
- run: npx onsystem check . --format github --require-design-system

Findings show up as annotations on the pull request, and --require-design-system fails the job when the design system is no longer found. CI and baselines has the whole workflow.

GitHub Action. The action runs the same check, honours the baseline and annotates only the lines a pull request changed. It goes after the checkout and the install, so it can read your design system:

steps:
  - uses: actions/checkout@v7
  - uses: actions/setup-node@v7
    with:
      node-version: 24
      cache: npm
  - run: npm ci
  - uses: dgesteves/onsystem@v0

Make it a required check on agent pull requests has the whole workflow and its inputs.

ESLint. The same rules for ESLint 8.57, 9 and 10: add onsystem.configs.recommended from onsystem/eslint to eslint.config.mjs (ESLint plugin, with @shadcn/lint).

Works with @shadcn/lint

@shadcn/lint checks the Tailwind classes written against a component and the theme (restyling, raw colors, arbitrary and unknown classes) as ESLint or Oxlint rules on Tailwind v4. onsystem checks that the components, props and variant values exist and flags native elements and unnamed icon buttons, on Tailwind v3 or v4. Its MCP server shows the agent your components and tokens before it writes, and in Claude Code its hook checks every edit. Run both. Benchmark v2 also scores every output with @shadcn/lint: see the independent scorer's table.

Does it help?

Benchmark v2 gave 6 models from 3 providers (Anthropic, OpenAI and Google) 20 single-file UI tasks in 5 open-source repositories, without onsystem, with its skill, MCP server or hook, and with all three: 1,200 runs, 240 per arm. Counted by onsystem 0.5.0's own check, design-system errors per run went from 0.85 without onsystem to 0.00 with all three, with no measurable change in the tsc pass rate (93% → 92%).

That count is onsystem's own, and the MCP server and the hook show the agent the same errors to fix. In tasks that ask for a green status label in a design system with no success token, agents with onsystem often used chart-* tokens, which it counts as clean. The blind labels by an AI reviewer, 12 files per arm, are too few to confirm the count either way, and every violation they found with the hook or all three is a palette color in Dub, whose tokens 0.5.0 did not read. The benchmark page has every table, and bench/v2 the method, the per-run data and every generated file.

Docs

On the website, and as Markdown in docs/:

Contributing, security and the changelog are in the repository.

License

MIT © Diogo Esteves

Available Tools

5 tools
check_uiCheck UI code against the design systemA
Read-onlyIdempotent

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.

NameRequiredDescriptionDefault
codeNoTSX/JSX source to check (up to 1,000,000 characters).
pathNoPath of a file to check, relative to the project root (the monorepo root, when served from there).
limitNoMost diagnostics to return, errors first (default 50). The counts and byRule cover all of them.
filenameNoName to report `code` under; a .jsx extension parses it as JSX. At a monorepo root, the path the code will be saved under, which picks the project whose design system checks it.

Output Schema

NameRequiredDescription
okYesTrue when there are no errors.
fileYes
byRuleYesEvery finding per rule, shown or not.
noticeNoSet when no components or no color tokens were found, so rules did not run, or when components came from modules the model does not include.
omittedYesDiagnostics left out by `limit`.
skippedNoWhy the file was not checked: it renders an image (next/og) or an email.
uncheckedNoComponents imported from modules the model does not include, not checked.
errorCountYes
diagnosticsYesUp to `limit` diagnostics, errors first; `omitted` says how many more there are.
warningCountYes

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations declare a safe read (readOnlyHint=true, idempotentHint=true, destructiveHint=false), and the description is consistent with that. It adds real behavioral context beyond the annotations: the diagnostic payload shape (line/column, rule id, message, suggested fix) and the expectation that the agent act on findings. It does not discuss severity semantics or failure modes, so not a 5.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with the one-line purpose, then audience-facing detail and input routing. Four sentences with essentially no filler, though the long enumeration of diagnostic categories is denser than strictly needed.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With an output schema present, the description need not document return values, and it still summarizes them usefully. Inputs, the action expected after a run, and the diagnostic content are all covered, leaving nothing an agent needs in order to invoke it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3, but the description contributes meaning the schema lacks: the mutual-exclusivity/intent distinction between `code` (unsaved buffer) and `path` (project file), which shapes how an agent picks between the two. That is genuine added semantics.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a precise verb+resource ('Lint TSX/JSX against the design system') and then enumerates the exact classes of problem it detects (hardcoded colors/spacing/radius, native elements, unknown components/props/variants, inaccessible icon-only buttons). The sibling tools (list/get/search_components, get_tokens) are all lookup operations, so this diagnostic tool is unambiguously distinguishable.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives an explicit call-to-action ('Run it on every snippet or file you write and fix all errors') and a routing rule for inputs ('Pass `code` for unsaved code, or `path` for a file in the project'). It does not name a when-not condition or a sibling alternative, but the usage context is clear.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_componentGet a component contractA
Read-onlyIdempotent

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.

NameRequiredDescriptionDefault
nameYesComponent name, e.g. "Button" or "CardHeader".
pathNoIn a monorepo served from its root: the file you are editing, or a project folder, relative to the root, to answer from that project. Without it, every project is listed together. Ignored in a single project.

Output Schema

NameRequiredDescription
docsNo
nameYesHow the component is written in JSX: Button, CardHeader, Tabs.List.
propsYes
importYesThe import statement to use.
parentNo
sourceYes
tokensYesNames of the design tokens its classes use.
aliasesYes
cssVarsYes
elementNoThe native element it renders or wraps.
packageNoAt a workspace root: the package its source belongs to, e.g. "@acme/ui".
examplesYes
inheritsYes
projectsNoAt a workspace root: the folders of the projects that use it.
variantsYes
openPropsYesPart of the props type did not resolve; extra props may be accepted.
classNamesYes
deprecatedNo
exportNameYes
importPathYes
descriptionNo
subcomponentsYes
compoundVariantsYes

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint/idempotentHint/closed-world/no-destruction, so safety is covered. The description adds context the annotations cannot: that it accepts dotted names like 'Card.Header', and that at a monorepo root omitting `path` merges every project's answer. Those are real behavioral traits affecting how the agent calls it.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Dense but front-loaded: the returned contract is listed first, then the usage trigger, then name formats, then monorepo behavior. Nearly every clause earns its place, though the single unstructured paragraph is a bit heavy for the amount of information packed into it.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

An output schema exists, so return values need not be explained, yet the description still previews what the contract contains. With 100% parameter coverage and annotations covering the safety profile, an agent has everything needed to call this correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% and the `path` parameter is already well documented, so the baseline would be 3. The description adds genuine meaning beyond the schema by disclosing that `Card.Header` is an acceptable `name` form (the schema only shows 'Button'/'CardHeader') and by restating the project-scoping semantics of `path`.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb+resource ('Get the full contract of one component') and then enumerates the contract contents: import, typed props with defaults, cva variants and applied classes, parts, tokens, guidelines and examples. This clearly separates it from the sibling list_components and search_components, which cannot return a full single-component contract.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

'Call it before using a component' gives an explicit trigger condition, and the monorepo `path` sentence explains the situation in which the extra argument is needed. It does not explicitly name list_components/search_components as the alternatives, but the single-vs-many distinction is unambiguous from the purpose sentence.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_tokensGet design tokensA
Read-onlyIdempotent

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.

NameRequiredDescriptionDefault
pathNoIn a monorepo served from its root: the file you are editing, or a project folder, relative to the root, to answer from that project. Without it, every project is listed together. Ignored in a single project.
queryNoSubstring to match in names, usages or descriptions.
categoryNoOnly tokens of this category.

Output Schema

NameRequiredDescription
tokensYes

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint, idempotentHint, and destructiveHint=false, so safety is covered structurally. The description adds useful context that results include resolved dark-mode values and per-token usage guidance, which goes beyond annotations. It does not describe pagination, result-size limits, or how monorepo path scoping behaves, so it is adequate but not rich.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three tight sentences, front-loaded with purpose and result shape, then filters, then usage guidance. No wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

An output schema exists, so return values need not be explained; the description correctly focuses on selection and usage. Combined with full annotation coverage and full schema coverage, this is largely complete. Minor gap: no mention of result-size or how the path parameter behaves in monorepos appears in the description, though the schema covers it.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so parameters are fully documented in the schema and the baseline is 3. The description restates the category enum values and the substring filter, adding only marginal meaning beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb (List) and resource (design tokens) and enumerates what each result carries: resolved values, dark-mode values, and usage guidance. An agent can distinguish this from list_components or search_components without opening the schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides explicit when-to-use guidance for the output: 'Use these instead of hex codes, px values or Tailwind default palette classes.' It also names filter mechanisms. However, it does not name a sibling alternative or state when-not-to-use, so it stops short of a 5.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_componentsList design-system componentsA
Read-onlyIdempotent

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.

NameRequiredDescriptionDefault
pathNoIn a monorepo served from its root: the file you are editing, or a project folder, relative to the root, to answer from that project. Without it, every project is listed together. Ignored in a single project.

Output Schema

NameRequiredDescription
componentsYes

TDQS

A4.1/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already cover the safety profile (readOnly, idempotent, non-destructive). The description adds real value beyond them: it discloses the per-component fields returned (description, native element, variants, parts, import) and the monorepo aggregation behavior. It does not discuss ordering or size of results, but the output schema presumably covers shape.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three tight sentences, front-loaded with what the tool returns, then when to call it, then the monorepo edge case. Every sentence carries distinct, actionable information with no padding.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a one-parameter listing tool with an output schema and full annotation coverage, the description supplies everything needed: purpose, timing, and the monorepo scoping rule. Return-value explanation is a bonus since the output schema already exists.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% and the single `path` parameter is fully documented there, so the schema does the heavy lifting. The description restates the monorepo/`path` behavior (project of the file being edited) without adding syntax or format detail beyond the schema, so baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

Specific verb ("List") and resource ("every component in the project design system"), plus a precise enumeration of what each entry contains. The scope (all components vs the single-item get_component or filtered search_components) is inferable, but the description never explicitly names those siblings as alternatives.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

"Call this before writing UI in this project" gives clear when-to-use context, and the monorepo scoping note tells the agent how to invoke it correctly across projects. It stops short of explicitly contrasting with search_components or get_component, so no exclusions/alternatives are stated.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

search_componentsSearch components by intentA
Read-onlyIdempotent

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.

NameRequiredDescriptionDefault
pathNoIn a monorepo served from its root: the file you are editing, or a project folder, relative to the root, to answer from that project. Without it, every project is listed together. Ignored in a single project.
limitNoMaximum results.
queryYesWhat the UI should do, in plain words.

Output Schema

NameRequiredDescription
resultsYes

TDQS

A4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already cover the safety profile (readOnly, idempotent, non-destructive, non-open-world), so the bar is lower. The description still adds real context: the ranking is BM25 over names, descriptions, docs, props and variant values, and runs locally with no API key, corroborating and enriching the openWorldHint=false claim.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, front-loaded with the purpose and intent framing, examples inline, and the usage condition placed last. No filler or repetition of schema content.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

An output schema exists, so return shape need not be explained. Purpose, ranking mechanism and usage condition are all covered; only explicit sibling routing is missing, which is a minor gap for a three-parameter discovery tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents query, path (monorepo scoping) and limit. The description adds no syntax, format or scoping detail beyond that, so the baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource ('Find components') plus the intent-based framing with concrete query examples like "confirm a destructive action" and "text field with validation". It distinguishes itself from get_component implicitly by describing intent-based discovery, but never names list_components or get_component as the alternative.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives an explicit usage condition: 'Use it when you do not know which component fits.' That clearly frames the discovery scenario, but it offers no when-not guidance and never names a sibling (e.g. use list_components for a full inventory) to route the agent between tools.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 5 tool updatesv0.6.0
    • First observedcheck_ui
    • First observedget_component
    • First observedget_tokens
    • First observedlist_components
    • First observedsearch_components

TDQS

A4.3/5.0

Scored across 5 tools

Disambiguation5/5

Each tool occupies a clearly distinct niche: list_components (exhaustive catalog), get_component (single contract), search_components (intent-based discovery), get_tokens (token values), and check_ui (lint/validation). The list vs. get vs. search trio mirrors a well-understood pattern, and the descriptions explicitly state when to use each, so misselection is unlikely.

Naming Consistency5/5

All names follow a predictable snake_case verb_noun convention (list_components, get_component, search_components, get_tokens, check_ui). Verbs are well-chosen and resource nouns are used consistently across the set.

Tool Count5/5

Five tightly scoped tools cleanly cover the design-system consumption lifecycle: discover, inspect, search, read tokens, and validate. Nothing is redundant and nothing feels missing from a count standpoint.

Completeness4/5

The surface covers component discovery, contracts, tokens, and linting very well, which are the core consumption workflows. There is a minor gap around overall setup/theming guidance (e.g. provider wiring, global conventions), but agents can work around it via get_tokens and doc examples.

Maintenance

ActivityMaintained
ResponsivenessUnresponsive

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    C
    maintenance
    MCP server for the Lando Labs Design System, enabling AI agents to introspect and generate code for React components, hooks, icons, design tokens, and theme presets via 15 tools.
    15
    4 npm
    1
    Apache 2.0
  • A
    license
    Not graded
    quality
    B
    maintenance
    Enables coding agents to query a workspace's design system before writing UI and validate generated code against the same system afterward, using configurable token and component sources.
    4 npm
    1
    MIT
  • A
    license
    A
    quality
    B
    maintenance
    It lets AI coding agents look up design tokens, component specifications, and prohibition rules on demand, then validate generated HTML or JSX with the same lint logic used by CI and editor hooks so violations are caught and corrected immediately. It also exposes the design constitution and rule sets as resources for reference during generation.
    6
    120 npm
    202
    MIT