← Back to Skills Marketplace
48
Downloads
1
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install homarr
Description
Work on Homarr dashboards, board styling, custom CSS, iframe widgets, embedded mini-apps, native widgets, apps, and integrations. Use when requests mention H...
README (SKILL.md)
Homarr
Use this skill to choose the right Homarr path, avoid fragile CSS, and verify iframe/widget/integration work.
Start with the right category
Classify the request first:
- Board visual tweak: use Homarr board appearance settings first; use scoped custom CSS only when needed. Read styling.md.
- Unsupported UI or custom mini-widget: host a separate page/app and embed it with the iFrame widget. Read iframe-widgets.md.
- Supported third-party data: configure a Homarr integration and matching native widget. Read native-widgets-integrations.md.
- Unsupported service but native Homarr behavior is required: modify/contribute Homarr source; keep secrets server-side. Read native-widgets-integrations.md.
Do not promise runtime custom widgets/plugins: official Homarr does not support arbitrary custom widgets as runtime extensions. Practical alternatives are built-in widgets, iFrame embeds, custom CSS, or source contributions.
Core concepts
Keep these distinct:
- Board: dashboard page containing items.
- App: link/bookmark entry with URL, icon, description, optional ping URL.
- Integration: Homarr server-side connection to a supported third-party service.
- Widget: board item that shows data or controls an integration.
- iFrame widget: browser embed of an external URL; Homarr does not proxy traffic.
General workflow
- Identify whether the task is CSS, iframe, app, integration, or native widget work.
- Prefer official Homarr settings and built-in integrations before custom code.
- For CSS, use widget custom classes and board-scoped CSS; avoid generated Mantine suffix classes.
- For iframes, verify client-reachable URL, protocol, frame headers, theme, and transparent body.
- For integrations, verify base URL, secrets, server/container reachability, and test connection.
- For native widgets, verify supported integrations, options, loading/empty/error states, edit/preview mode, and permissions.
- Make minimal reversible changes.
- Verify with curl/headers/DevTools and, for Homarr source work, lint/typecheck/test.
- Document any fragile selectors, unsupported CSS assumptions, or reverse-proxy/header requirements.
Quick decisions
| Need | Use |
|---|---|
| Change board/item colors/radius/background | Board appearance first, then scoped custom CSS |
| Style one widget | Widget custom class + board custom CSS |
| Embed unsupported web UI | iFrame widget |
| Embed custom mini-widget | Separate HTML/app + iFrame widget |
| Show data from supported service | Integration + supported native widget |
| Show unsupported service natively | Homarr source contribution |
| Hide unauthorized control | Permissions, not CSS |
| Fix white iframe background | theme=dark, transparent body, inner container, headers/mixed-content checks |
| Fix “card inside card” | Remove inner wrapper background/border/radius/shadow/blur |
Official docs to check
- Styling:
https://homarr.dev/docs/advanced/styling/ - Boards:
https://homarr.dev/docs/management/boards/ - iFrame widget:
https://homarr.dev/docs/widgets/iframe/ - Apps:
https://homarr.dev/docs/management/apps/ - Integrations:
https://homarr.dev/docs/management/integrations/ - Widgets catalog:
https://homarr.dev/docs/category/widgets/ - Integrations catalog:
https://homarr.dev/docs/category/integrations/ - FAQ/custom widgets:
https://homarr.dev/docs/community/faq/ - Developer setup:
https://homarr.dev/docs/advanced/development/getting-started/ - Third-party iframe reference:
https://github.com/diogovalentte/homarr-iframes
Safety rules
- Treat custom CSS as unsupported and potentially fragile after updates.
- Do not use CSS as security or permissions.
- Do not expose API keys in CSS, iframe URLs, or client-rendered code.
- For native integrations, keep secrets server-side through Homarr integration APIs.
- For iframes, enable only needed permissions such as fullscreen, autoplay, microphone, camera, geolocation, payment, or modals.
- Remember public boards may expose visible embedded content to unauthenticated users if board access allows it.
Usage Guidance
Safe to install for Homarr-related assistance. Review any proposed Docker, pnpm, git, curl, or configuration changes before running them, and keep API keys or integration secrets server-side as the skill recommends.
Capability Assessment
Purpose & Capability
The skill's Homarr dashboard, styling, iframe, widget, app, and integration guidance matches its stated purpose; command examples are tied to troubleshooting or source development.
Instruction Scope
Instructions are user-directed, emphasize minimal reversible changes, and explicitly warn against using CSS as security or exposing secrets client-side.
Install Mechanism
The artifact contains only Markdown files and reference material, with no executable scripts, dependencies, or install-time hooks.
Credentials
It discusses curl, pnpm, Docker, git, iframe permissions, and integration secrets, but these are disclosed and proportionate for Homarr troubleshooting and development.
Persistence & Privilege
No background workers, persistence mechanisms, privilege escalation, credential harvesting, destructive actions, or broad local indexing behavior are present.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install homarr - After installation, invoke the skill by name or use
/homarr - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
Initial release of the Homarr skill.
- Provides clear guidance for handling Homarr dashboard tasks: board styling, custom CSS, iframe widgets, embedded mini-apps, native widgets, apps, and integrations.
- Outlines classification steps to choose safe and maintainable customization methods.
- Details best practices and workflows for CSS tweaks, iframe embeds, and native integrations.
- Includes decision tables, safety rules, and direct links to official Homarr documentation.
Metadata
Frequently Asked Questions
What is homarr?
Work on Homarr dashboards, board styling, custom CSS, iframe widgets, embedded mini-apps, native widgets, apps, and integrations. Use when requests mention H... It is an AI Agent Skill for Claude Code / OpenClaw, with 48 downloads so far.
How do I install homarr?
Run "/install homarr" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is homarr free?
Yes, homarr is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does homarr support?
homarr is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created homarr?
It is built and maintained by Kretka (@kretkas); the current version is v1.0.0.
More Skills