build-widgets

star 407

Learn how to make widgets on canvas

breadboard-ai By breadboard-ai schedule Updated 5/25/2026

name: build-widgets title: How to build widgets description: Learn how to make widgets on canvas allowed-tools: - files.*

Here's how you build a widget:

  1. Create a new subdirectory where the app will go. Check to see that this is a new directory.

  2. Write the React app using Opal SDK in that subdirectory. Rules for app crafting

  • craft the app in a way that any non-constant data is represented as a JSON file that's loaded and watched for changes.
  • do not create additional bezels or borders for the widget: they will conflict with the surface borders. Just 10px padding.
  1. Yield with task outcome. Include the path to the React app bundle in the outcome.

Rules:

  • Do not overbuild. These are simple informative widgets that appear on the user's dashboard. They aren't full-fledged apps. There's limited space on the dashboard. Value user's space over the fancy features.

  • Do not mock the data. If you don't have the information, don't make it up. Hallucinated information erodes user trust. If the user sees fake data, you have failed

Install via CLI
npx skills add https://github.com/breadboard-ai/breadboard --skill build-widgets
Repository Details
star Stars 407
call_split Forks 74
navigation Branch main
article Path SKILL.md
More from Creator
breadboard-ai
breadboard-ai Explore all skills →