Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

orbcafe-layout-navigation

Estrelas2

Forks0

Atualizado5 de abril de 2026 às 04:03

Build ORBCAFE application shell and navigation with CAppPageLayout, NavigationIsland, useNavigationIsland, i18n, markdown renderer, and CPageTransition using official examples patterns. Use for app frame, user menu, locale switching, navigation tree, and route transition UX, especially when UI renders but behavior looks inactive.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

SHENRUIYANG

SHENRUIYANG/orbcafe-ui

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores webInformática e Matemática·SOC 15-1254

Explorador de arquivos

4 arquivos

SKILL.md

readonly

name	orbcafe-layout-navigation
description	Build ORBCAFE application shell and navigation with CAppPageLayout, NavigationIsland, useNavigationIsland, i18n, markdown renderer, and CPageTransition using official examples patterns. Use for app frame, user menu, locale switching, navigation tree, and route transition UX, especially when UI renders but behavior looks inactive.

ORBCAFE Layout + Navigation

Workflow

先对照 skills/orbcafe-ui-component-usage/references/module-contracts.md，确认这是 Hook-first 模块。
执行安装与基础壳层接入。
用 references/patterns.md 选择 full shell 或 nav-only。
用 references/guardrails.md 逐条检查 locale、hydration、菜单动作和动效。
以官方 examples 的 layout/providers/page 骨架产出代码。

Installation and Bootstrapping (Mandatory)

npm install orbcafe-ui @mui/material@^7.3.9 @mui/icons-material@^7.3.9 @mui/x-date-pickers@^8.27.2 @emotion/react@^11.14.0 @emotion/styled@^11.14.1 dayjs@^1.11.20 lucide-react@^0.575.0 tailwind-merge@^3.5.0 clsx@^2.1.1 class-variance-authority@^0.7.1 @radix-ui/react-slot@^1.2.4

本仓库联调：

npm run build
cd examples
npm install
npm run dev

参考实现：

examples/app/layout.tsx
examples/app/providers.tsx
examples/app/_components/HomeDemoClient.tsx
examples/app/_components/StdReportExampleClient.tsx

Output Contract

Mode: Hook-first.
Layout decision: full shell vs nav-only.
Code snippet: app frame with minimal props.
Runtime safety: locale、hydration、route 高亮安全策略。
Verify: 菜单跳转、locale 切换、用户菜单动作、过渡动画。
Troubleshooting: 至少包含 3 条“页面看起来没反应”排查项。

Examples-Based Experience Summary

在 App Router 下优先采用 Server page -> Client page 分层，不在 client 首屏直接消费 Promise 语义路由参数。
usePathname 高亮逻辑使用 mounted 防抖策略，避免 SSR/CSR 首帧不一致。
CAppPageLayout 内部负责壳层，业务页只注入 menu/user/logo/children，避免重复造壳。
CPageTransition 持续使用 160-260ms，仅用 transform/opacity 变换，性能更稳。
Providers 层集中挂载 ThemeProvider + LocalizationProvider + GlobalMessage，避免每页重复配置。

Mais deste repositório

mesmo repositório

orbcafe-agentui-chat

SHENRUIYANG/orbcafe-ui

Build ORBCAFE AgentUI experiences with AIPanel/AgentPanel as the no-input AI dialogue window, AgentPanel status visuals and optional draggable header, AIBrowserGlow viewport AI-running effect, StdChat as the input-included Chat surface, CopilotChat content inside a host shell, ChatMessage streaming flow, and AgentUICardHooks using official Next.js examples patterns. Use for AIPanel, browser-edge Glow, full chat, floating copilot, streaming replies, markdown/cards rendering, and when chat UI appears but send, stream, glow, card actions, drag, or resize behavior has no effect.

2026-07-072

orbcafe-auth-workflow

SHENRUIYANG/orbcafe-ui

Build ORBCAFE authentication entry pages with CAuthPage/useAuthPage, typed AuthLoginPayload/AuthRegisterPayload/AuthForgotPasswordPayload callbacks, logo/copy customization, loading/mode orchestration, and official examples patterns. Use for login, registration, forgot-password, demo auth flows, or host-auth integration where the UI renders but mode changes, loading, or submit callbacks have no effect.

2026-07-072

orbcafe-layout-navigation

SHENRUIYANG/orbcafe-ui

Build ORBCAFE application shell and navigation with CAppPageLayout, NavigationIsland, TreeMenu, useNavigationIsland, pin/favorites, fixed/floating navigation modes, i18n, markdown renderer, and CPageTransition using official Next.js examples patterns. Use for app frame, user menu, locale switching, navigation tree, pinned menu items, Navigation Island display mode, route transition UX, and when navigation renders but pin/search/expand/click behavior has no effect.

2026-07-072

orbcafe-pad-workflow

SHENRUIYANG/orbcafe-ui

Build ORBCAFE touch-first pad experiences with PAppPageLayout, PNavIsland, PWorkloadNav, PTable/PSmartFilter including CValueHelp/F4 lookup fields, PNumericKeypad, PBarcodeScanner. Use for iPad/平板端, 触控交互, 主数据值帮助, 扫码录入.

2026-07-072

orbcafe-planning-gantt

SHENRUIYANG/orbcafe-ui

Build ORBCAFE project-management or production-planning pages with CPlanningLayout/usePlanningLayout (or custom CPlanningGantt/usePlanningGantt), CSmartFilter including CValueHelp/F4 lookup filters, unified appId/tableKey persistence, CTable-style layout controls, resizable table/timeline panes, aligned Gantt rows, and drag-reorderable task rows.

2026-07-072

orbcafe-stdreport-workflow

SHENRUIYANG/orbcafe-ui

Build ORBCAFE standard report/list pages with CStandardPage, CTable, CSmartFilter, CValueHelp/F4 search help fields, useStandardReport, persistence, and quickCreate/quickEdit/quickDelete using official Next.js examples-proven patterns. Use for filters, value help lookup, pagination, variants/layout, or report orchestration, especially when prior implementation had no visible effect.

2026-07-072

name	orbcafe-layout-navigation
description	Build ORBCAFE application shell and navigation with CAppPageLayout, NavigationIsland, useNavigationIsland, i18n, markdown renderer, and CPageTransition using official examples patterns. Use for app frame, user menu, locale switching, navigation tree, and route transition UX, especially when UI renders but behavior looks inactive.

ORBCAFE Layout + Navigation

Workflow

先对照 skills/orbcafe-ui-component-usage/references/module-contracts.md，确认这是 Hook-first 模块。
执行安装与基础壳层接入。
用 references/patterns.md 选择 full shell 或 nav-only。
用 references/guardrails.md 逐条检查 locale、hydration、菜单动作和动效。
以官方 examples 的 layout/providers/page 骨架产出代码。

Installation and Bootstrapping (Mandatory)

npm install orbcafe-ui @mui/material@^7.3.9 @mui/icons-material@^7.3.9 @mui/x-date-pickers@^8.27.2 @emotion/react@^11.14.0 @emotion/styled@^11.14.1 dayjs@^1.11.20 lucide-react@^0.575.0 tailwind-merge@^3.5.0 clsx@^2.1.1 class-variance-authority@^0.7.1 @radix-ui/react-slot@^1.2.4

本仓库联调：

npm run build
cd examples
npm install
npm run dev

参考实现：

examples/app/layout.tsx
examples/app/providers.tsx
examples/app/_components/HomeDemoClient.tsx
examples/app/_components/StdReportExampleClient.tsx

Output Contract

Mode: Hook-first.
Layout decision: full shell vs nav-only.
Code snippet: app frame with minimal props.
Runtime safety: locale、hydration、route 高亮安全策略。
Verify: 菜单跳转、locale 切换、用户菜单动作、过渡动画。
Troubleshooting: 至少包含 3 条“页面看起来没反应”排查项。

Examples-Based Experience Summary

在 App Router 下优先采用 Server page -> Client page 分层，不在 client 首屏直接消费 Promise 语义路由参数。
usePathname 高亮逻辑使用 mounted 防抖策略，避免 SSR/CSR 首帧不一致。
CAppPageLayout 内部负责壳层，业务页只注入 menu/user/logo/children，避免重复造壳。
CPageTransition 持续使用 160-260ms，仅用 transform/opacity 变换，性能更稳。
Providers 层集中挂载 ThemeProvider + LocalizationProvider + GlobalMessage，避免每页重复配置。