メニュー
Build ORBCAFE touch-first pad experiences with PAppPageLayout, PNavIsland, PWorkloadNav, PTable, PNumericKeypad, PBarcodeScanner. Use for iPad/平板端, 触控交互, 扫码录入.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.
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.
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.
Build ORBCAFE touch-first pad experiences with PAppPageLayout, PNavIsland, PWorkloadNav, PTable/PSmartFilter including CValueHelp/F4 lookup fields, PNumericKeypad, PBarcodeScanner. Use for iPad/平板端, 触控交互, 主数据值帮助, 扫码录入.
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.
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.
| name | orbcafe-pad-workflow |
| description | Build ORBCAFE touch-first pad experiences with PAppPageLayout, PNavIsland, PWorkloadNav, PTable, PNumericKeypad, PBarcodeScanner. Use for iPad/平板端, 触控交互, 扫码录入. |
This skill guides the creation of touch-first, iPad-optimized applications using orbcafe-ui's Pad components. The Pad framework focuses on large tap targets, card-based lists, and hardware integrations (camera scanner, numpad).
A standard Pad page uses a specific component hierarchy. Do not use desktop layouts (CAppPageLayout, CTable) for Pad routes.
PAppPageLayout: The root layout wrapper for Pad pages. It handles the responsive shell, safe areas, and background.
navigation (usually PNavIsland), workloads (usually PWorkloadNav), header (brand logo/title).PNavIsland: The left-side vertical navigation bar. Designed for thumb reachability.
items (TreeMenuItem[]), activeId, onItemClick, collapsed (optional).PWorkloadNav: The top horizontal tab/card navigation for switching between major workflows (e.g., Receiving, Picking, Packing).
items (PWorkloadNavItem[]), activeId, onItemClick.PTable: The touch-friendly alternative to CTable. It renders rows as large PTouchCard elements instead of a data grid, but shares the same powerful features (variants, smart filters, quick operations).
cardTitleField, cardSubtitleFields, renderCardFooter, cardActionSlot.PNumericKeypad: An on-screen numpad for quick quantity/data entry without invoking the OS keyboard.PBarcodeScanner: A dialog component that uses the device camera to scan barcodes/QR codes (uses html5-qrcode under the hood).orbcafe-ui Pad components heavily rely on Tailwind utility classes (e.g., rounded-2xl, backdrop-blur). The host project must configure Tailwind to scan the library:
globals.css): @source "../../node_modules/orbcafe-ui/dist";tailwind.config.js): content: ["./node_modules/orbcafe-ui/dist/**/*.{js,mjs}"]ThemeProvider, CssBaseline, and LocalizationProvider (MUI) are wrapped at the root level.npm install orbcafe-ui @mui/material@^7.3.9 @mui/icons-material@^7.3.9 lucide-react@^0.575.0