build-widgets

Name: Build Widgets
Author: breadboard-ai

// Learn how to make widgets on canvas

Manus에서 실행

$ git log --oneline --stat

stars:399

forks:72

updated:2026년 5월 4일 04:43

SKILL.md

readonly

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

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.

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.

related-skills.json

같은 저장소

build-widgets.md

from "breadboard-ai/breadboard"

Learn how to make widgets on canvas

2026-05-25399

create-task-type.md

from "breadboard-ai/breadboard"

Learn how to design and write custom agent templates (sub-agents) inside your workspace, so you can delegate specialized work to custom sub-agents.

2026-05-18399

research.md

from "breadboard-ai/breadboard"

Uplevel your researching abilities and learn how to research properly.

2026-05-18399

opal-backend-api.md

from "breadboard-ai/breadboard"

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.

2026-05-13399

build-react-apps.md

from "breadboard-ai/breadboard"

Produce high-quality React apps from natural language descriptions.

2026-05-04399

surface.md

from "breadboard-ai/breadboard"

Learn how to present your work as a structured surface — a curated manifest of artifacts that the user's application renders in real time.

2026-05-04399

package.json