一键在 Manus 中运行任何 Skill

开始使用

$pwd:

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月25日 01:24

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.

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

related-skills.json

同仓库

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

build-widgets.md

from "breadboard-ai/breadboard"

Learn how to make widgets on canvas

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

"author": "breadboard-ai"

"repository": "breadboard-ai/breadboard"

打开 GitHub 仓库查看创作者相关仓库

$ install --global

$ download --local

在 Manus 中运行

$ useful --forSOC

软件开发工程师计算机与数学类职业15-1252L4

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.

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

build-widgets

同仓库更多 Skills

同仓库更多 Skills