An AI agent skill designed to help customize, style, and integrate widgets on self-hosted Homarr dashboards while maintaining robust CSS and secure setups.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install homarr
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 homarr 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 Homarr?
The Homarr skill empowers AI coding agents to expertly build, configure, and maintain Homarr dashboard environments. This includes executing board styling, scoped custom CSS, embedding responsive iframe mini-apps, and developing native integrations. By utilizing this capability within the ecosystem of Openclaw Skills, developers and home lab enthusiasts can safely modify dashboard appearances without breaking layout integrity.
This skill ensures that code assistants adhere to native Homarr best practices instead of writing brittle, unmaintainable styling rules. It provides clear execution pathways for dealing with third-party service embeds, server-side data synchronization, and native widget development.
Homarr Use Cases
- Customizing board layouts, background colors, and component borders using scoped custom CSS.
- Embedding third-party web tools or custom HTML mini-apps securely using iframe widgets.
- Connecting native Homarr integrations to display real-time data from self-hosted applications.
- Extending Homarr capabilities with source-level modifications and custom widgets.
- Automating dashboard configuration workflows using Openclaw Skills to streamline homelab orchestration.
How Homarr Works
- Classification: Analyze the user's dashboard modification request to determine if it requires scoped CSS, iframe embedding, native integration, or source-code adjustments.
- Configuration Check: Prioritize native Homarr features and settings over custom code interventions to keep the setup robust.
- Safe Styling Application: Use specific widget custom classes and board-scoped custom CSS while avoiding generated Mantine suffixes.
- Iframe & Integration Verification: Check protocol, theme compatibility (such as
theme=dark), CORS headers, and server reachability for seamless embeddings. - Validation & Testing: Run tests, check for console errors or network warnings in Developer Tools, and ensure all changes are minimally invasive and reversible. This structured methodology is a hallmark of Openclaw Skills.
Homarr Setup
To set up your local development environment for contributing or managing Homarr configurations:
# Clone the official Homarr repository for custom native widget development
git clone https://github.com/homarr-labs/homarr.git
cd homarr
# Install dependencies and start the development environment
npm install
npm run dev
Review the official styling documentation (https://homarr.dev/docs/advanced/styling/) and board settings to ensure custom CSS is loaded within your target instance. Ensure your AI agent has access to this skill inside your Openclaw Skills folder configuration.
Homarr Data Schema & Taxonomy
The skill structures Homarr configurations, custom stylesheets, and integration settings using the following taxonomy:
| Config Type | Description | Key Properties / Best Practices |
|---|---|---|
| Board Config | Defines board layout, order, and items | Stored in Homarr database; managed via UI first |
| Custom CSS | Board-scoped styles and custom classes | Avoid Mantine suffixes; target scoped classes |
| Iframe Widget | External embedded URLs | Check transparent background, mixed-content headers, and enable only needed permissions (e.g., fullscreen, autoplay) |
| Integrations | Server-side secure connections | Keep API keys and secrets stored server-side to prevent client-rendered exposure |
Homarr Advanced Features
- Secure Integration Handling: Automatically moves API keys and sensitive credentials to server-side configs to prevent front-end leaks.
- Responsive Multi-Theme Iframes: Configures dynamic query parameters (like
theme=dark) and body transparency to prevent unwanted white flash backgrounds. - Robust CSS Scoping: Writes sustainable CSS selectors targeted to custom widget classes, avoiding updates from breaking the visual aesthetics of the board.
- Local Development Automation: Leverages structured workflows in Openclaw Skills to compile, lint, typecheck, and validate source-level widget contributions efficiently.
SKILL.md
Loading
Related Openclaw Skills
Word LaTeX Formula
Convert manually typed mathematical formulas in Word files (.docx, .doc, .wps) into native, editable Word equations through OOXML edits without breaking document layout.
Opulse Link Starter Skill
An essential starter skill enabling AI agents to collaborate, complete bounty tasks, and monetize services within the Opulse Link ecosystem.
Daozheji Grill Intelligent Customer Service Skill
An AI customer service agent skill designed for restaurant automation, featuring friendly conversational workflows and real-time structured data lookup.
Tella CLI Integration
Manage Tella videos, edit interactive clips, generate transcripts, configure webhooks, and orchestrate playlists via a powerful developer CLI.
SenseAudio Video Gen
A developer tool that compiles HTML templates, website captures, and AI narration into frame-accurate, production-grade MP4 video files.
M-Pesa Daraja Advisory Skill
An expert advisory and reference skill for planning, implementing, and securing Safaricom M-Pesa Daraja integrations in your development pipeline.
Featured*
