# Orbcafe UI Component Usage

> Route ORBCAFE UI requests to the correct module skill and enforce official examples-based integration baseline. Use when requests are ambiguous, cross-module, or when prior attempts had "no effect"; classify to StdReport, Graph+Detail+Agent, Layout+Navigation, or Pivot+AINav and require install/startup/verification steps.

- Skill: `dvcrn/orbcafe-ui-component-usage` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add dvcrn/orbcafe-ui-component-usage`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dvcrn/orbcafe-ui-component-usage/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dvcrn (https://skillmd.com/u/dvcrn)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/dvcrn/orbcafe-ui-component-usage

---


# ORBCAFE UI Router

## Workflow

1. 执行安装与接入基线（必须）。
2. 使用 `references/skill-routing-map.md` 判定目标模块 skill。
3. 只加载目标模块所需 references，不加载无关内容。
4. 使用 `references/public-export-index.md` 约束导入边界。
5. 使用 `references/integration-baseline.md` 执行 Next.js 与 hydration 检查。
6. 输出模块决策、最小可运行代码、验收步骤、排障步骤。

## Installation Baseline (Mandatory)

每次都先给出可执行安装方式，不允许省略：

```bash
npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs
```

如果是本仓库联调（以 `examples` 为准）：

```bash
# repo root
npm run build

# examples app
cd examples
npm install
npm run dev
```

Tailwind 项目必须包含：

```js
// tailwind.config.js
content: ["./node_modules/orbcafe-ui/dist/**/*.{js,mjs}"]
```

## Output Contract

Always provide:

1. `Decision`: 选择哪个模块 skill，并说明依据。
2. `Paste-ready code`: 仅从 `orbcafe-ui` 入口导入。
3. `Data shape`: 最小必需字段结构。
4. `Verify`: 至少 3 条可执行验收步骤（启动、交互、持久化/回调）。
5. `Troubleshooting`: 至少 3 条“没效果”排查点。

## Examples-First Rules

- 先复用官方 examples 的骨架，再做业务改造。
- 优先参考：
  - `examples/README.md`
  - `examples/app/layout.tsx`
  - `examples/app/providers.tsx`
  - `examples/app/_components/*.tsx`
- 强制遵守 Next.js App Router 经验：
  - 在 Server Page 解包 `params/searchParams` 后再传入 Client 组件。
  - 首屏避免 `Date.now()/Math.random()/window/localStorage/usePathname` 直接决定结构。
  - 必要时使用 `mounted` 防止 hydration mismatch。