원클릭으로 Manus에서 모든 스킬 실행

시작하기

$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 저장소 열기 Creator 저장소 보기

$ 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