---
name: mihcm-component-review
description: >
  Use this skill when reviewing a new, changed, or proposed MiHCM primitive,
  composition, or AI-UI descriptor surface. Trigger for component audits,
  accessibility review, token compliance, Storybook/docs coverage, server/client
  compatibility, MCP output changes, and release readiness.
metadata:
  short-description: Review MiHCM components for contract, docs, a11y, and security
---

# MiHCM Component Review Skill

## Use When

- A MiHCM component source file changed.
- A component docs page, Storybook story, AI-UI schema, or MCP component response changed.
- A consumer contribution proposes a new primitive or component variation.
- A release requires component contract verification.

## Required Context

- `/components/<slug>/usage`
- `/components/<slug>/examples`
- `/components/<slug>/api`
- `/components/<slug>/accessibility`
- `/agent-tooling`
- `/ai-ui`
- `docs/components/<Name>.md`

## Review Gates

1. Query `mihcm_check_contract` for the component.
2. Confirm source files exist and use named exports.
3. Confirm web/native support or a documented web-only rationale.
4. Confirm the prop API is stable and typed without `any`.
5. Confirm `className` and Tailwind override behavior are supported where applicable.
6. Confirm Storybook has default, edge, disabled/error, long text, and responsive examples.
7. Confirm docs-site usage, examples, API, and accessibility pages exist.
8. Confirm wiki page exists under `docs/components/<Name>.md`.
9. Confirm `docs/index.md` lists the component.
10. Confirm semantic HTML: real headings/paragraphs, `Link` for navigation, `Button` for side effects, semantic lists/tables/forms, and no empty headings.
11. Confirm accessibility: keyboard behavior, focus states, ARIA/RN accessibility roles, labelled fields, `aria-describedby` for helper/error text, image alt text, icon-only labels, contrast, reduced motion, and 44px touch targets.
12. Call `mihcm_review_semantics_accessibility` on representative JSX/TSX and treat every error as a release blocker.
13. Confirm semantic tokens and standard Tailwind classes are used; reject raw colours, arbitrary visual values, local CSS layers, and inline design styles.
14. Confirm the component uses the approved underlying library when one exists: TanStack Form for forms, TanStack Table/Virtual for data grids, DayPicker v10 for all date/time pickers, cmdk for command palettes, d3/Recharts for charts, dnd-kit for reorderable UI, Lexical-backed RichTextEditor for rich text, Motion for animation, and react-dropzone for file drop input.
15. Reject duplicate dependencies for solved areas, especially React Hook Form, `@hookform/resolvers`, `react-datepicker`, custom table state engines, custom command palettes, custom drag-and-drop engines, and ad hoc contenteditable editors.
16. Confirm Server Component compatibility notes are correct for Next.js.
17. Confirm changeset exists if package code changed.
18. Query `mihcm_get_component_matrix` for platform, Storybook, wiki, and AI-UI coverage across related primitives.
19. Query `mihcm_get_changesets` when release notes or version impact matters.

## AI-UI Gate

If the component can be rendered from a model descriptor:

- schema must live in `@mihcm/ai-ui`;
- descriptor must validate through Zod;
- renderer must use an explicit allowlist;
- no dynamic component imports from model input;
- no raw HTML injection or eval-like behavior.

## Security Gate

Reject changes that:

- log prompts, secrets, descriptors, tokens, or private user data;
- expose source through hosted MCP;
- add public MCP mutation tools;
- read arbitrary files from user input;
- add unpinned risky dependencies without a security rationale;
- use `dangerouslySetInnerHTML` without a documented sanitizer boundary.

## Verification

Run the narrowest reliable checks first, then broaden if package code changed:

- component tests or Storybook interaction checks;
- `mihcm_review_semantics_accessibility` for representative JSX/TSX;
- `pnpm -F @mihcm/ui typecheck` when UI code changed;
- docs build/typecheck when docs changed;
- MCP tests/typecheck when MCP output changed;
- `git diff --check`.

## Output

Lead with findings ordered by severity. Each finding must include:

- file path and line when available;
- impact;
- required remediation.

Then include:

- coverage status;
- checks run;
- residual risks;
- whether release docs or changesets are required.

## Distribution Gate

If external agent guidance changed, also verify:

- `skills/*/SKILL.md`;
- public downloads under `/downloads/skills/`;
- docs-site Agent Tooling install links;
- `mihcm_get_agent_setup` MCP output;
- `mihcm-skill-pack.json`.