skills.rest
nielsbrakel
nielsbrakelCOMMUNITY
Explore all skills by this author →
Website𝕏@nielsbrakelGitHub

widgetbox

Define patterns and standards for developing Homey dashboard widgets in WidgetBox.

Updated Feb 9, 2026
Search Tags:#frontend#design system#ui/ux#component library#widget development#homey
One-click install
npx skills add https://github.com/nielsbrakel/WidgetBox --skill widgetbox
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: widgetbox
Source: https://github.com/nielsbrakel/WidgetBox/tree/main/.agent/skills/widgetbox
Command: npx skills add https://github.com/nielsbrakel/WidgetBox --skill widgetbox

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized framework and set of best practices for developing custom widgets for the Homey Pro dashboard, ensuring consistency and efficiency across all WidgetBox applications.

Core Features & Use Cases

  • Standardized Settings: Defines common settings like size, color, and alignment with consistent UI patterns.
  • Height Strategies: Implements predictable methods for calculating widget height based on content or aspect ratio.
  • Code Structure & Patterns: Enforces uniform code organization, initialization, and styling using shared CSS.
  • Use Case: When developing a new clock widget for Homey, use this Skill to ensure it adheres to all WidgetBox conventions for settings, styling, and initialization, making it seamlessly integrate with other WidgetBox widgets.

Quick Start

Use the widgetbox skill to understand the standard settings for widget size and color.

Frequently Asked Questions about widgetbox

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize settings for Homey dashboard widgets?▼

To standardize Homey dashboard widgets, apply consistent UI patterns for size, color, and alignment settings. This ensures predictable behavior and uniform styling across multiple WidgetBox applications.

What is the best way to calculate widget height in Homey?▼

Calculating widget height in Homey requires predictable strategies based on content volume or aspect ratio. Implementing these standardized calculation methods prevents layout shifts on the dashboard.

How do I structure initialization code for Homey Pro widgets?▼

Structuring initialization code for Homey Pro widgets involves following uniform code organization patterns and shared CSS. This enforces consistent behavior and styling across the WidgetBox ecosystem.

Does WidgetBox work with custom Homey Pro dashboard components?▼

WidgetBox works with custom Homey Pro dashboard components by providing a standardized framework for development. It defines conventions for settings, initialization, and styling to ensure seamless integration.

Why do my Homey widgets have inconsistent styling across applications?▼

Inconsistent styling across Homey widgets happens when shared CSS and code structure conventions are not applied. Using a standardized framework enforces uniform organization and styling across applications.

Related Skills

Explore More Software Engineering Skills→
nielsbrakelnielsbrakel

homey

Develop custom dashboard widgets for the Homey platform using the Homey App SDK.

Community
Intermediate
vendurehqvendurehq
8.3k

Migrating to Vendure Dashboard

Migrate Angular Vendure Admin UI extensions to the React Dashboard.

Official
Intermediate
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
AmplifyAutomationAmplifyAutomation
1

webapp-dev:react-components

Generate React components with TypeScript typings and consistent structure patterns.

Official
Advanced