# MiHCM Design System Instructions

Use these instructions with VS Code / GitHub Copilot agent mode for projects that consume the MiHCM Design System.

## MCP

Register the hosted MCP endpoint:

```json
{
  "servers": {
    "mihcm": {
      "type": "http",
      "url": "https://designsystem.mihcm.com/mcp"
    }
  }
}
```

## Rules

- Search MiHCM components before inventing new UI.
- Use `@mihcm/ui` components and `@mihcm/icons`.
- Use standard Tailwind utilities and MiHCM semantic tokens only.
- Use approved MiHCM-backed libraries through components: TanStack Form, TanStack Table/Virtual, DayPicker v10 Calendar/DatePicker, cmdk Command, d3/Recharts charts, dnd-kit SortableList, react-dropzone Dropzone, and Lexical-backed RichTextEditor.
- Do not add React Hook Form, `@hookform/resolvers`, `react-datepicker`, custom table engines, custom command palettes, custom drag/drop engines, or ad hoc contenteditable editors when a MiHCM primitive exists.
- Do not use raw colors, arbitrary values, inline style objects, CSS modules, styled-components, or local UI forks.
- For brand work, use the official Logo component or `/brand/logos/manifest.json`; never recolor or redraw a MiHCM mark.
- Validate AI-UI descriptors with Zod/MCP before render.
- Check semantics and accessibility with `mihcm_review_semantics_accessibility`: real headings/paragraphs, Link for navigation, Button for side effects, labelled fields, image alt text, icon-only labels, keyboard focus, contrast, and 44px touch targets.
- Review final JSX with `mihcm_review_frontend_snippet`.