Token导航 LogoToken导航TokenDH.com
中转站排行榜
效率执行命令clawhub未标认证来源可访问clear审计通过

orbcafe-layout-navigation（orbcafe 布局导航）

Agent Skill

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务，不应只堆装饰元素；涉及真实页面改动时，应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

总安装

9,435

周安装

378

GitHub Stars

公开资料未说明

下载量

3,054
OpenClaw

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

2

许可证

MIT-0

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：orbcafe-layout-navigation（orbcafe 布局导航）
来源仓库：https://github.com/shenruiyang/orbcafe-layout-navigation
安装命令：
openclaw skills install orbcafe-layout-navigation
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 OpenClaw 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

ClawHubOpenClaw
openclaw skills install orbcafe-layout-navigation

简介

构建 ORBCAFE 应用壳体和导航结构，支持多语言和 Markdown 渲染。

  • 适合统一界面风格和提升页面可维护性。orbcafe-layout-navigation 属于效率类 Skill，可作为该场景下的辅助能力补充。
  • 集成 CAppPageLayout 和 NavigationIsland 等模块。
  • 需配置 i18n 文件和样式表，避免文本溢出问题。
  • 建议通过截图验证不同分辨率下的显示效果。

SKILL.md

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

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

Installation and Bootstrapping (Mandatory)

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

本仓库联调：

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

  1. Mode: Hook-first.
  2. Layout decision: full shell vs nav-only.
  3. Code snippet: app frame with minimal props.
  4. Runtime safety: locale、hydration、route 高亮安全策略。
  5. Verify: 菜单跳转、locale 切换、用户菜单动作、过渡动画。
  6. 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，避免每页重复配置。

适合场景

01

OpenClaw 用户查找和安装 Skill 时

02

用户想查找某类 Agent Skill 时

03

需要根据任务场景推荐可安装能力包时

04

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

OpenClaw

71.26%
按下载量换算2,176

安全审计

VirusTotal

通过

ClawScan

通过

Static analysis

通过

权限和风险

执行命令

安装流程涉及命令执行，可能通过 openclaw skills install orbcafe-layout-navigation 联网下载 Skill 或依赖。用户安装前应确认命令来源、仓库内容和执行环境。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/shenruiyang/orbcafe-layout-navigation

SKILL.md 来源

clawhub.ai

/shenruiyang/orbcafe-layout-navigation

继续浏览同类 Skills

更多效率 Skills（21,003）返回 Skills 目录

上一个 Skill

orange（orange 效率）

orange 用于补充效率相关能力，适合在 OpenClaw 中需要让 Agent 承接效率相关任务时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

orbcafe-pivot-ainav（Orbcafe 枢轴 ainav）

orbcafe-pivot-ainav 用于辅助前端页面、组件、样式和交互逻辑开发，适合在 OpenClaw 中需要维护前端项目、生成组件或检查界面实现时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。