---
description: Use the MiHCM Design System with hosted MCP and tokenized Tailwind.
globs:
  - "**/*.{ts,tsx,js,jsx,mdx}"
---

Before building UI, query the MiHCM MCP server at https://designsystem.mihcm.com/mcp.

Rules:

- Use `@mihcm/ui` components and `@mihcm/icons`.
- Use standard Tailwind utilities and MiHCM semantic token classes.
- 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 hardcode colors, arbitrary Tailwind values, inline styles, CSS modules, styled-components, or local UI primitive forks.
- For brand work, use the official Logo component or `/brand/logos/manifest.json`; never recolor or redraw a MiHCM mark.
- Validate AI-generated descriptors with `mihcm_validate_descriptor`.
- 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`.