A high-performance layout and navigation framework for building consistent application shells with integrated i18n and page transitions.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install orbcafe-layout-navigation
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install orbcafe-layout-navigation using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is orbcafe-layout-navigation?
The orbcafe-layout-navigation skill is a specialized toolkit designed for developers building complex web application frames using Openclaw Skills. It leverages the Hook-first modular approach to streamline the creation of application shells, navigation islands, and user menus. By focusing on official example patterns, it ensures that UI behavior remains active and responsive, preventing common pitfalls like inactive navigation or hydration mismatches.
This skill provides a standardized way to handle locale switching, route transition UX, and navigation trees. It integrates seamlessly with Material UI and motion-based page transitions to deliver a native-app feel within a web environment. Whether you are building a full application shell or a standalone navigation component, this skill ensures consistency and high-quality user experiences.
orbcafe-layout-navigation Use Cases
- Building a standardized application shell with sidebars and top navigation using Openclaw Skills.
- Implementing internationalization (i18n) and locale switching for multi-language dashboard support.
- Creating smooth, performant route transitions to improve perceived application speed.
- Developing interactive navigation islands that remain responsive across different device types.
- Managing complex user menus and account-related actions within the main application frame.
How orbcafe-layout-navigation Works
- Contract Validation: The process begins by confirming the Hook-first module status via module contracts to ensure architectural compliance.
- Installation: Core dependencies and the orbcafe-ui library are installed to provide the necessary layout primitives.
- Pattern Selection: Developers choose between a full shell or a navigation-only implementation based on reference patterns.
- Guardrail Check: The workflow applies strict checks for hydration safety, locale consistency, and menu interactivity.
- Implementation: The final code is generated using official skeletons for layouts, providers, and page transitions.
- Verification: Automated or manual verification of route highlights, user actions, and animation performance.
orbcafe-layout-navigation Setup
To get started with this skill, install the necessary dependencies using npm:
npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs
For local development and testing within the repository:
npm run build
cd examples
npm install
npm run dev
orbcafe-layout-navigation Data Schema & Taxonomy
The skill organizes its output and runtime logic based on a Hook-first contract, focusing on the following data structures:
| Component | Responsibility |
|---|---|
| CAppPageLayout | Centralized shell container managing menu, user logo, and children injection. |
| NavigationIsland | Isolated navigation logic used to prevent inactive UI behavior. |
| Providers | Global wrapper for ThemeProvider, LocalizationProvider, and GlobalMessage. |
| CPageTransition | Standardized animation settings (160-260ms) using transform and opacity. |
orbcafe-layout-navigation Advanced Features
- Hook-first Architecture: Prioritizes logic hooks over heavy UI components for maximum flexibility in Openclaw Skills.
- Hydration Guardrails: Implements mounted-state debouncing for usePathname to ensure SSR and CSR consistency.
- Optimized Transitions: Uses high-performance CSS transforms to maintain stability during route changes.
- Centralized Provider Management: Reduces boilerplate by consolidating theme and localization settings in a single layer.
- Server-to-Client Layering: Optimizes App Router performance by preventing direct promise consumption in client components.
SKILL.md
Loading
Related Openclaw Skills
SpacetimeDB Memory Integration
A high-performance WebAssembly-powered memory system that replaces static file storage with a robust database for AI agents.
Football Transfer Intel
A high-intelligence football transfer tracking skill providing real-time rumour analysis and AI-driven credibility scoring for global football deals.
Bounded Researcher
A specialized evidence-first research workflow for AI agents to reduce uncertainty and localize issues without overstepping into implementation.
Artifact Signing
A professional-grade security skill for generating detached digital signatures for files and binaries using PEM-encoded private keys.
LogTail Smart Log Monitor & Analyzer
A sophisticated log monitoring and pattern recognition engine designed to extract meaningful insights from noisy system data in real-time.
translator-pro-test — Bilingual Enhanced Edition
An advanced translation evaluation tool for testing quality and managing bilingual documentation with AI-optimized interaction.
Featured*
