Tools Catalog

Every tool exposed by the UI Guideline MCP server, with its inputs and a real example of the output it returns. Use this as a reference when wiring the server into your workflow.

find_prop

Looks up the canonical prop on a UI Guideline component matching a described behavior.

Inputs

component_name*

string

behavior*

string

Example 1

Prompt"I want the floating menu to close when I click outside. use UI Guideline"

Response

Prop: onInteractOutsidePart: Menu.ContentType: (event: Event) => voidRequired: falseDefault: -Description: Event handler called when an interaction occurs outside the menu.

Example 2

Prompt"How can I render the menu items in the dropdown as my own button components? use UI Guideline"

Response

The prop "asChild" exists on multiple Menu parts. Listed by semantic relevance to your intent. Pick the part matching what you're rendering — your context is richer than this ordering.— Menu.Item  Type: boolean | Required: false | Default: false  Description: Change the default rendered element for the one passed as a child, merging their props and behavior.— Menu.CheckboxItem  Type: boolean | Required: false | Default: false  Description: Change the default rendered element for the one passed as a child, merging their props and behavior.— Menu.RadioItem  Type: boolean | Required: false | Default: false  Description: Change the default rendered element for the one passed as a child, merging their props and behavior.— Menu.Trigger  Type: boolean | Required: false | Default: false  Description: Change the default rendered element for the one passed as a child, merging their props and behavior....and 8 more parts.

audit_component

Audits a UI component against the UI Guideline Gold Standard.

Inputs

component_name*

string

Example

Prompt"Can you audit my DropdownMenu component? use UI Guideline"

Response

# Audit: DropdownMenu## Score8.2/10## AnatomyEssential parts: 5/5 ✅Enhancer parts: 3/4Edge case parts: 1/3## NamingMain component: 1/1 ✅Parts: 4/5## Actions### Critical1. [MISSING PART]: DropdownMenu.Group is not implemented.   Add it to support logical grouping of menu items.### Nice to Have1. [NAMING]: DropdownMenuTrigger → DropdownMenu.Trigger   (compound component pattern).2. [MISSING PROP]: modal prop missing on DropdownMenu.Root.3. [MISSING PROP]: defaultOpen not implemented.---Audited against UI Guideline Gold Standard v0.1https://mcp.uiguideline.com

compare_systems

Compares a component anatomy across multiple design systems side by side.

Inputs

component_name*

string

systems

array

Example

Prompt"How do Radix, MUI and Mantine each implement Combobox? use UI Guideline"

Response

# Compare: Combobox## Systems compared- ui-guideline (gold standard)- radix-ui- mui- mantine## Anatomy mappingEach row leads with the UI Guideline canonical part, followed by how every other system implements it.### Combobox.Root- ui-guideline: <Combobox.Root>- radix-ui: <Combobox.Root>- mui: <Autocomplete>- mantine: <Combobox>### Combobox.Trigger- ui-guideline: <Combobox.Trigger>- radix-ui: <Combobox.Trigger>- mui: implicit (rendered via renderInput)- mantine: <Combobox.Target>### Combobox.Input- ui-guideline: <Combobox.Input>- radix-ui: <Combobox.Input>- mui: TextField (rendered via renderInput)- mantine: <Combobox.Search>### Combobox.Content- ui-guideline: <Combobox.Content>- radix-ui: <Combobox.Content>- mui: Popper- mantine: <Combobox.Dropdown>### Combobox.Item- ui-guideline: <Combobox.Item>- radix-ui: <Combobox.Item>- mui: <li> (rendered via renderOption)- mantine: <Combobox.Option>## Prop divergences### value- ui-guideline: controlled string- radix-ui / mantine: controlled string- mui: object { label, id } by default### onChange- ui-guideline: (value: string) => void- radix-ui / mantine: (value: string) => void- mui: (event, value) => void### filter- ui-guideline: `filter` callback- radix-ui: `filter` callback- mui: `filterOptions`- mantine: handled via internal store---UI Guideline gold standard is the `ui-guideline:` row in every mapping above. Use it as the target shape when building or migrating.

generate_component_spec

Turns a free-form UI need into the canonical UI Guideline spec.

Inputs

description*

string

complexity

string

Example

Prompt"I need a multi-step wizard with progress indicator. use UI Guideline"

Response

# Spec: Stepper (advanced)Closest canonical match for "multi-step wizard with progress indicator".## AnatomyStepper.Root├── Stepper.Progress├── Stepper.List│   └── Stepper.Step (repeatable)│       ├── Stepper.StepIndicator│       ├── Stepper.StepLabel│       └── Stepper.StepDescription (optional)├── Stepper.Panels│   └── Stepper.Panel (one per step, lazy)└── Stepper.Controls    ├── Stepper.PrevButton    └── Stepper.NextButton## Critical props### Stepper.Root.activeStepType: numberRequired: yesDescription: Current step index, 0-based.### Stepper.Root.onStepChangeType: (step: number) => voidRequired: noDescription: Fires on next, prev, or jump.### Stepper.Root.orientationType: enum (horizontal | vertical)Default: horizontal### Stepper.Root.linearType: booleanDefault: trueDescription: When false, allows jumping to non-completed steps.## A11y notes1. The progress indicator MUST expose aria-valuenow / aria-valuemax.2. Panels are hidden via the `hidden` attribute — not display:none — so screen readers ignore inactive content.3. Each StepIndicator gets aria-current="step" when active.

audit_figma

Audits a Figma node against the UI Guideline gold standard.

Inputs

figma_url*

string

component_hint

string

Example

Prompt"Audit this Figma button: https://figma.com/file/abc123/Design?node-id=42:7 use UI Guideline"

Response

# Audit: Figma ButtonMatch: Button (gold standard) — confidence 0.87## Anatomy gaps1. [MISSING SLOT]: Leading-icon slot.   UI Guideline Button supports an optional leading icon container.2. [MISSING STATE]: Loading state.   No spinner variant detected; gold standard exposes `isLoading`.## Token mismatches1. [DRIFT]: padding-x: 14px   Closest token: spacing.4 (16px). Off by 2px.2. [DRIFT]: border-radius: 6px   Closest token: radius.md (8px). Drift of 2px.3. [UNMAPPED]: background (primary): #3D5AFE   Does not map to any color.primary shade in your tokens.## A11y findings### Critical1. [CONTRAST]: Focus ring 2.1:1 vs background.   Fails WCAG AA (3:1 minimum for focus indicators).### Passing- Hit area 44×44 — passes.- aria-disabled documented in component description.---Suggested next step: align padding and radius to tokens, then re-audit.

disambiguate_component

Resolves which canonical component matches an ambiguous term.

Inputs

term*

string

context

string

Example

Prompt"I need a 'tag' to show user roles next to their name. use UI Guideline"

Response

# Disambiguate: "tag"Recommended: Badge## WhyYou're displaying a piece of read-only metadata (a role) attached to another element (a name).Badges are the canonical UI Guideline component for status / category indicators that are NOT user-removable. That fits "user roles" — they're assigned by the system, not picked by the user.## Ruled out### TagUsed for user-removable selections (e.g. an "x" to remove). User roles aren't removable in this context.### ChipAlias used by some systems (MUI). Not a canonical UI Guideline component; consolidated into Badge / Tag.### LabelSemantic HTML `<label>` for form fields, not a visual indicator.---Disambiguated against UI Guideline Gold Standard v0.1

migrate_component

Translates a component between design systems via the UI Guideline gold standard.

Inputs

from_system*

string

to_system*

string

code*

string

Example

Prompt"Migrate this MUI Button to Radix UI: <Button variant="contained" color="primary" startIcon={<Save />} onClick={save}>Save</Button> use UI Guideline"

Response

# Migrate: mui → radix-ui## Translated code```tsx<Button variant="primary" onClick={save}>  <Save aria-hidden />  Save</Button>```## Prop mapping (via UI Guideline gold standard)### variant="contained"- mui: variant="contained"- ui-guideline: variant="primary"- radix-ui: variant="primary"### color="primary"Folded into variant in the gold standard. No direct equivalent.### startIcon={<Save />}- mui: `startIcon` prop- ui-guideline: leading slot- radix-ui: child `<Save aria-hidden />`### onClickUnchanged across all three.## Omitted from source1. [REDUNDANT]: `color="primary"`   Redundant with variant on UI Guideline's gold standard. Dropped.## Notes1. MUI's startIcon wraps the icon in a span with margin tokens; radix-ui relies on flex gap from the Button's base styles. Visual spacing should match within 2px.2. If your codebase uses a wrapper around radix-ui's Button, prefer importing yours so styling stays consistent across the app.---Migrated against UI Guideline Gold Standard v0.1