Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

orbcafe-kanban-detail

Sterne2

Forks0

Aktualisiert5. April 2026 um 04:03

Build ORBCAFE Kanban boards with CKanbanBoard/CKanbanBucket/CKanbanCard/useKanbanBoard and wire card clicks into DetailInfo using official examples patterns. Use for bucket-card styling, drag-drop workflow boards, controlled board state, and Kanban-to-detail navigation, especially when UI renders but drag or click behavior has no effect.

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

SHENRUIYANG

SHENRUIYANG/orbcafe-ui

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

WebentwicklerInformatik- und Mathematikberufe·SOC 15-1254

Datei-Explorer

4 Dateien

SKILL.md

readonly

name	orbcafe-kanban-detail
description	Build ORBCAFE Kanban boards with CKanbanBoard/CKanbanBucket/CKanbanCard/useKanbanBoard and wire card clicks into DetailInfo using official examples patterns. Use for bucket-card styling, drag-drop workflow boards, controlled board state, and Kanban-to-detail navigation, especially when UI renders but drag or click behavior has no effect.

ORBCAFE Kanban + Detail

Workflow

先对照 skills/orbcafe-ui-component-usage/references/module-contracts.md，确认这是 Hook-first 模块。
执行安装与最小可运行接入。
用 references/recipes.md 输出实现骨架。
用 references/guardrails.md 检查受控状态、拖拽移动、空 bucket 接收和 DetailInfo 路由。
输出验收步骤与“没效果”排障。

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/kanban/page.tsx
examples/app/_components/KanbanExampleClient.tsx
examples/app/detail-info/[id]/DetailInfoExampleClient.tsx
src/components/Kanban/README.md

Output Contract

Mode: Hook-first.
Chosen module: Kanban and whether DetailInfo chaining is required.
Minimal implementation: useKanbanBoard + CKanbanBoard first.
Data model: buckets/cards/tools shape.
Verify: 至少包括拖拽跨 bucket、生效后的状态更新、空 bucket 可接收、点击进入 DetailInfo。
Troubleshooting: 至少 3 条“能看到 UI 但拖拽/点击没效果”的排查项。

Examples-Based Experience Summary

优先 useKanbanBoard + CKanbanBoard，不要只渲染组件而不托管 model。
bucket 与 card 的样式能力分别通过 CKanbanBucket / CKanbanCard 暴露，但拖拽交互由 CKanbanBoard 统一编排。
需要 reducer/store/optimistic update 时优先复用 createKanbanBoardModel 和 moveKanbanCard。
Detail 链接放在 Client Component 的 onCardClick 中，避免把路由行为写进 Server 层。

Mehr aus diesem Repository

gleiches Repository

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-kanban-detail
description	Build ORBCAFE Kanban boards with CKanbanBoard/CKanbanBucket/CKanbanCard/useKanbanBoard and wire card clicks into DetailInfo using official examples patterns. Use for bucket-card styling, drag-drop workflow boards, controlled board state, and Kanban-to-detail navigation, especially when UI renders but drag or click behavior has no effect.

ORBCAFE Kanban + Detail

Workflow

先对照 skills/orbcafe-ui-component-usage/references/module-contracts.md，确认这是 Hook-first 模块。
执行安装与最小可运行接入。
用 references/recipes.md 输出实现骨架。
用 references/guardrails.md 检查受控状态、拖拽移动、空 bucket 接收和 DetailInfo 路由。
输出验收步骤与“没效果”排障。

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/kanban/page.tsx
examples/app/_components/KanbanExampleClient.tsx
examples/app/detail-info/[id]/DetailInfoExampleClient.tsx
src/components/Kanban/README.md

Output Contract

Mode: Hook-first.
Chosen module: Kanban and whether DetailInfo chaining is required.
Minimal implementation: useKanbanBoard + CKanbanBoard first.
Data model: buckets/cards/tools shape.
Verify: 至少包括拖拽跨 bucket、生效后的状态更新、空 bucket 可接收、点击进入 DetailInfo。
Troubleshooting: 至少 3 条“能看到 UI 但拖拽/点击没效果”的排查项。

Examples-Based Experience Summary

优先 useKanbanBoard + CKanbanBoard，不要只渲染组件而不托管 model。
bucket 与 card 的样式能力分别通过 CKanbanBucket / CKanbanCard 暴露，但拖拽交互由 CKanbanBoard 统一编排。
需要 reducer/store/optimistic update 时优先复用 createKanbanBoardModel 和 moveKanbanCard。
Detail 链接放在 Client Component 的 onCardClick 中，避免把路由行为写进 Server 层。