MiHCM-only Next.js enforcement

Use this setup when a Next.js app must build UI only from the MiHCM Design System.

MCP provides current design-system facts and review. CI provides enforcement.

Styling contract

Consumer apps can use Tailwind CSS classes normally, but those classes must resolve through the MiHCM theme and documented tokens. The allowed styling surface is:

Components from @mihcm/ui.
Icons from @mihcm/icons.
Tailwind utility classes for layout, spacing, typography, state, responsive behavior, and tokenized colour, for example grid, gap-4, p-6, md:grid-cols-2, bg-background, text-foreground, border-border, ring-ring, bg-primary, and text-muted-foreground.
Documented component props and variants.

Every visual MiHCM component and visual sub-component accepts className. Those classes are merged after the component defaults, so standard Tailwind utilities and MiHCM token utilities can override borders, backgrounds, text, spacing, sizing, radius, and focus states without leaving the design-system contract.

<Card className="border-success bg-success/5">
  <CardHeader className="border-b border-success/20">
    <CardTitle className="text-success">Ready for approval</CardTitle>
  </CardHeader>
  <CardContent className="grid gap-3 md:grid-cols-2">
    <Button
      variant="outline"
      className="border-success text-success hover:bg-success/10 focus-visible:ring-success"
    >
      Approve
    </Button>
  </CardContent>
</Card>

Do not use raw design values. That means no hex/rgb/hsl colours, no arbitrary bracket utilities such as bg-[#003385] or w-[312px], no custom shadows, no pixel magic values, no local components/ui/* forks, and no separate CSS module/styled-component layer for product UI. If a needed value or variant is missing, add it to the MiHCM design system first or request it.

Install

pnpm add @mihcm/ui @mihcm/theme @mihcm/tokens @mihcm/icons
pnpm add -D @mihcm/mcp

/* app/globals.css */
@import "@mihcm/theme/globals.css";

Register MCP

claude mcp add --transport http mihcm https://designsystem.mihcm.com/mcp

Use this instruction in the consumer repo:

Use MiHCM MCP before creating UI.
Only use @mihcm/ui components, @mihcm/icons, and Tailwind classes backed by the MiHCM theme.
Tailwind utilities are allowed for layout, spacing, responsive behavior, typography, and semantic token styling.
Do not hardcode colours, arbitrary Tailwind values, raw spacing, custom shadows, CSS modules, styled-components, inline styles, or local UI primitives.
If MiHCM lacks a needed primitive, ask before creating local UI.
Before finalizing, call mihcm_review_frontend_snippet or mihcm_validate_component_usage on changed JSX/TSX.

Add project rules

# UI Rules
 
- Use only `@mihcm/ui` for UI primitives.
- Use `@mihcm/icons` for icons.
- Use Tailwind utility classes only when they come from Tailwind's standard utilities or MiHCM semantic tokens.
- Use MiHCM semantic token classes such as `bg-background`, `text-foreground`, `border-border`, `ring-ring`, `bg-primary`, and `text-muted-foreground`.
- No raw hex, rgb, hsl, arbitrary Tailwind bracket values, custom shadows, pixel magic values, CSS modules, styled-components, or inline styles.
- No local `components/ui/*` primitives unless approved.
- Query MiHCM MCP before creating UI.
- Review changed JSX/TSX with MiHCM MCP before final output.

Enforce imports

Block other UI systems and local primitive folders:

export default [
  {
    rules: {
      'no-restricted-imports': [
        'error',
        {
          patterns: [
            '@mui/*',
            '@chakra-ui/*',
            'antd',
            'react-bootstrap',
            'flowbite-react',
            '@/components/ui/*',
            '~/components/ui/*',
          ],
        },
      ],
      'no-restricted-syntax': [
        'error',
        {
          selector: 'Literal[value=/#[0-9a-fA-F]{3,8}/]',
          message: 'Use MiHCM semantic tokens instead of raw hex colours.',
        },
      ],
    },
  },
];

Run the MiHCM checker

{
  "scripts": {
    "mihcm:check": "mihcm-design-system-check app components src"
  }
}

The checker allows standard Tailwind classes and MiHCM token classes. It fails on non-MiHCM UI imports, local primitive imports, raw colours, arbitrary Tailwind values, and snippets that need a Client Component boundary.

Gate CI

name: verify
on: [pull_request]
jobs:
  verify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm typecheck
      - run: pnpm lint
      - run: pnpm test
      - run: pnpm mihcm:check

Protect main so these checks must pass before merge.

Server and client boundary

Server Components may render MiHCM component trees with serializable props. Use a Client Component wrapper for hooks, event handlers, browser APIs, table columns, chart callbacks, icon constructors, and non-serializable values.

Use mihcm_check_client_server_boundary when uncertain.

Tool map

Need	MCP tool
Find a primitive	`mihcm_search_components` or `mihcm_list_components`
Inspect examples	`mihcm_get_component_examples`
Choose a product pattern	`mihcm_search_patterns`
Review changed JSX	`mihcm_review_frontend_snippet`
Enforce tokens	`mihcm_audit_tokens`
Check RSC usage	`mihcm_check_client_server_boundary`
Get setup guidance	`mihcm_get_installation_guide`