@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):

{
  "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