ORBCAFE UI Router
Workflow
- 1. 执行安装与接入基线(必须)。
- 使用
references/skill-routing-map.md 判定目标模块 skill。 - 使用
references/module-contracts.md 先确认目标模块的公共入口、hook 策略、标准 example 与验证方式。 - 只加载目标模块所需 references,不加载无关内容。
- 使用
references/public-export-index.md 约束导入边界。 - 使用
references/integration-baseline.md 执行 Next.js 与 hydration 检查。 - 输出模块决策、最小可运行代码、验收步骤、排障步骤。
Installation Baseline (Mandatory)
每次都先给出可执行安装方式,不允许省略:
CODEBLOCK0
如果是本仓库联调(以 examples 为准):
CODEBLOCK1
Tailwind 项目必须包含:
CODEBLOCK2
Output Contract
Always provide:
- 1.
Decision: 选择哪个模块 skill,并说明依据。 - INLINECODE6 : 仅从
orbcafe-ui 入口导入。 - INLINECODE8 : 最小必需字段结构。
- INLINECODE9 : 至少 3 条可执行验收步骤(启动、交互、持久化/回调)。
- INLINECODE10 : 至少 3 条“没效果”排查点。
Before writing code, explicitly state one of:
- -
Hook-first: 该模块以公开 hook 为主入口。 - INLINECODE12 : 该模块以公开组件 + callbacks 为主入口。
Examples-First Rules
- - 先复用官方 examples 的骨架,再做业务改造。
- 优先参考:
-
examples/README.md
- - INLINECODE14
- INLINECODE15
- INLINECODE16
- 强制遵守 Next.js App Router 经验:
- 在 Server Page 解包
params/searchParams 后再传入 Client 组件。
- 首屏避免
Date.now()/Math.random()/window/localStorage/usePathname 直接决定结构。
- 必要时使用
mounted 防止 hydration mismatch。
ORBCAFE UI 路由
工作流程
- 1. 执行安装与接入基线(必须)。
- 使用 references/skill-routing-map.md 判定目标模块 skill。
- 使用 references/module-contracts.md 先确认目标模块的公共入口、hook 策略、标准示例与验证方式。
- 只加载目标模块所需 references,不加载无关内容。
- 使用 references/public-export-index.md 约束导入边界。
- 使用 references/integration-baseline.md 执行 Next.js 与 hydration 检查。
- 输出模块决策、最小可运行代码、验收步骤、排障步骤。
安装基线(必须)
每次都先给出可执行安装方式,不允许省略:
bash
npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs
如果是本仓库联调(以 examples 为准):
bash
仓库根目录
npm run build
examples 应用
cd examples
npm install
npm run dev
Tailwind 项目必须包含:
js
// tailwind.config.js
content: [./node_modules/orbcafe-ui/dist//*.{js,mjs}]
输出契约
始终提供:
- 1. 决策:选择哪个模块 skill,并说明依据。
- 可直接粘贴的代码:仅从 orbcafe-ui 入口导入。
- 数据形状:最小必需字段结构。
- 验证:至少 3 条可执行验收步骤(启动、交互、持久化/回调)。
- 排障:至少 3 条没效果排查点。
在编写代码前,明确声明以下之一:
- - Hook优先:该模块以公开 hook 为主入口。
- 组件优先:该模块以公开组件 + callbacks 为主入口。
示例优先规则
- - 先复用官方示例的骨架,再做业务改造。
- 优先参考:
- 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 不匹配。