메뉴
Learn how to make widgets on canvas
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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.
Learn how to make widgets on canvas
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.
SOC 직업 분류 기준
| 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
Create or update the surface to include the widget.
Get back to the user with a friendly message notifying them that the widget was added.
