菜单
Learn how to make widgets on canvas
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
Teaches you how to properly operate in the sandboxed environment you're in.
Learn how to present your work as a structured surface — a curated manifest of artifacts that the user's application renders in real time.
Learn how to use `window.opalSDK` inside your sandboxed React component to read files, call host services, and listen for events from the application.
Learn how to design and write custom agent templates (sub-agents) inside your workspace, so you can delegate specialized work to custom sub-agents.
| 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
