| 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:
Create a new subdirectory where the app will go. Check to see that this is a new directory.
Write the React app using Opal SDK in that subdirectory. Rules for app crafting
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
Learn how to design and write custom agent templates (sub-agents) inside your workspace, so you can delegate specialized work to custom sub-agents.
Uplevel your researching abilities and learn how to research properly.
How authenticated HTTP calls to the Opal backend work — the host/guest architecture, fetchWithCreds, the fetch allowlist, and the OpalBackendClient migration. Read this before adding, modifying, or debugging any backend call.
Produce high-quality React apps from natural language descriptions.
Learn how to make widgets on canvas
Learn how to present your work as a structured surface — a curated manifest of artifacts that the user's application renders in real time.