npm package: @omnifyjp/ui-mcp
Description: MCP server for the @omnifyjp/ui design system. Gives Claude deep knowledge of 67 components, design tokens, layout patterns, and validation rules.
Latest version: 2.3.3

# @omnifyjp/ui-mcp

MCP server for the @omnifyjp/ui design system. Gives Claude deep knowledge of 67 components, design tokens, layout patterns, and validation rules.

## Installation

Add to your Claude Code configuration (`~/.claude.json` or project `.mcp.json`):

```json
{
  "mcpServers": {
    "omnify-ui": {
      "command": "npx",
      "args": ["-y", "@omnifyjp/ui-mcp@latest"]
    }
  }
}
```

## Tools

| Tool | Description | Key Parameters |
|------|-------------|----------------|
| `lookup_component` | Get API details for a specific component by name | `name: string` (e.g. "Button", "CalendarMini") |
| `search_components` | Search components by category or keyword | `query?: string`, `category?: enum` (data-entry, data-display, actions, navigation, overlays, feedback, layout, calendar, workflow, rbac) |
| `get_design_rules` | Get design system rules for a specific topic | `topic: enum` (cheat-sheet, do, dont, visual-patterns, sidebar, typography, icons, interaction, naming, code-quality, anti-patterns, checklist, audit-color, audit-density, audit-layout, audit-pattern, audit-exceptions) |
| `get_layout_pattern` | Get a layout pattern or page template with full code | `pattern: enum` (page-layout, card, dialog, table, selection-state, sidebar-layout, header, drawer, avatar-border, responsive, list-card, list-table, detail, dashboard, settings, kanban, overview, common-patterns, page-header, action-buttons, comment-item, avatar-stack, empty-state, status-badge-map, slash-commands) |
| `validate_code` | Validate TSX/JSX against design token rules | `code: string`, `ruleset?: enum` (color, density, layout, pattern, accessibility, shadcn, nielsen) |
| `get_domain_guidance` | Get domain-specific data models, routes, and component assembly | `domain: string` (pm, calendar, rbac, cms, org, attendance, approvals, products) |

## Example: Build a Settings Page

This workflow shows how to use the tools together to build a complete, correct page.

1. **Get the settings page template** — `get_layout_pattern("settings")`

   Returns the full TSX template for a settings page: tab layout, form sections, save button placement. Copy this as your starting structure.

2. **Look up components you need** — `lookup_component("Tabs")`, `lookup_component("Form")`

   Returns the component API: props, variants, usage notes. Tells you which sub-components to use (TabsList, TabsTrigger, TabsContent) and how to wire up react-hook-form with Form/FormField/FormItem.

3. **Check the design rules** — `get_design_rules("do")`

   Returns the DO list: semantic color tokens, density classes, icon sizing, sidebar rules. Apply these as you write the component.

4. **Write the page** using the template structure and component APIs from steps 1-2, following the rules from step 3.

5. **Validate your code** — `validate_code(code, "color")` then `validate_code(code, "accessibility")`

   Returns a list of violations with line numbers and suggested fixes. Fix each one before shipping.

## CLI

```
npx @omnifyjp/ui-mcp            # Start MCP server (stdio)
npx @omnifyjp/ui-mcp --version  # Print version
npx @omnifyjp/ui-mcp --help     # Print help
```

## License

MIT