A sophisticated routing and integration skill designed to enforce official baselines and resolve architectural ambiguity when using the Orbcafe UI library.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install orbcafe-ui-component-usage
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-ui-component-usage 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 UI Component Usage?
Orbcafe UI Component Usage is a specialized utility within the Openclaw Skills ecosystem designed to streamline the integration of Orbcafe UI components into complex web applications. It serves as an intelligent router that classifies user requests into specific architectural patterns like StdReport, Graph+Detail, or AgentUI Chat, ensuring that developers always follow the most efficient implementation path.
By enforcing a strict integration baseline, this skill eliminates common development hurdles such as hydration mismatches in Next.js and incorrect module boundaries. It bridges the gap between raw library documentation and production-ready code by prioritizing official examples and established module contracts.
Orbcafe UI Component Usage Use Cases
- Resolving ambiguous or cross-module UI requests within a React/Next.js environment.
- Fixing 'no effect' integration attempts by re-aligning with the official installation baseline.
- Selecting the correct module skill (e.g., Layout, Navigation, or Pivot) based on architectural needs.
- Standardizing Next.js App Router implementations to avoid hydration errors.
How Orbcafe UI Component Usage Works
- Initialization of the mandatory installation baseline and system environment checks.
- Consultation of the skill routing map to identify the target module based on the specific UI request.
- Validation of the target module's public entry points and hook strategies via official contracts.
- Targeted loading of necessary reference files to maintain a lean context window.
- Constraint enforcement using the public export index to prevent illegal imports.
- Execution of hydration and Next.js compatibility checks to ensure runtime stability.
- Generation of decision logic, paste-ready code, and structured verification steps.
Orbcafe UI Component Usage Setup
To get started with this skill in your project, ensure the core dependencies are installed:
npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs
For local development and link-testing within a repository, follow these steps:
# Build the core library from the root
npm run build
# Navigate to the examples directory and start the dev server
cd examples
npm install
npm run dev
Ensure your Tailwind configuration includes the Openclaw Skills compatible path:
// tailwind.config.js
module.exports = {
content: ["./node_modules/orbcafe-ui/dist/**/*.{js,mjs}"]
}
Orbcafe UI Component Usage Data Schema & Taxonomy
The skill organizes its operations around a strict output contract to ensure consistency and maintainability:
| Field | Description |
|---|---|
| Decision | Justification for the selected module skill. |
| Paste-ready code | Implementation code using only official entry points. |
| Data shape | The minimal required interface/schema for the component. |
| Verify | A 3-step checklist covering startup, interaction, and persistence. |
| Troubleshooting | A list of 3 specific checks for cases where the UI 'has no effect'. |
Orbcafe UI Component Usage Advanced Features
- Support for Hook-first vs Component-first architectural prioritization.
- Automatic resolution of Next.js hydration mismatches using mounted-state patterns.
- Strict enforcement of the official integration baseline to prevent technical debt.
- Multi-module routing logic that intelligently maps complex UI requests to the correct Openclaw Skills submodule.
SKILL.md
Loading
Related Openclaw Skills
OzBargain Deal Monitor
An automated monitoring system for OzBargain that uses smart filtering and cron scheduling to deliver high-value deal alerts to your preferred channels.
Excel Formula — Bilingual Enhanced Edition
A professional bilingual tool for generating, optimizing, and debugging complex Excel formulas through AI-driven natural language processing.
Writers Room Story Engine
A modular orchestration engine for AI agents designed to manage the end-to-end creative writing process from foundation to revision.
translator-pro-test — Bilingual Enhanced Edition
An advanced translation evaluation tool for testing quality and managing bilingual documentation with AI-optimized interaction.
PracticePanther MCP
A specialized Model Context Protocol server providing read-only access to the PracticePanther legal practice management API.
Pengbo Space Skill
A professional SMM automation tool for managing social media growth services through the pengbo.space API.
Featured*
