Space Widgets

Create, patch, inspect, and remove widget UI in the current open space.

1.4k|316|Updated Mar 27, 2026

Search Tags:#debugging #widgets #layout management #ui editing #renderer patching #workspace state

One-click install

npx skills add https://github.com/agent0ai/space-agent --skill space-widgets-agent0ai

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: Space Widgets
Source: https://github.com/agent0ai/space-agent/tree/main/app/L0/_all/mod/_core/spaces/ext/skills/space-widgets
Command: npx skills add https://github.com/agent0ai/space-agent --skill space-widgets-agent0ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Space Widgets eliminates the friction of manually creating, editing, and troubleshooting UI widgets by letting you discover widget IDs and then patch or reload their source in the current open space.

Core Features & Use Cases

Create and rewrite widgets: Use renderWidget() to add new widgets or rebuild them with a fresh renderer.
Patch existing widgets safely: Use patchWidget() for bounded edits to a widget renderer based on exact numbered source readback.
Inspect and debug widget state: Use listWidgets(), readWidget(), and seeWidget() to compare live rendered HTML versus the numbered source (including metadata when present).
Manage widget lifecycle: Reload widgets, reposition them, and remove single widgets or all widgets in the space.

Quick Start

Use the Space Widgets skill to patch a specific widget in the current open space by first reading the widget source (or rendered DOM if needed), then applying your renderer edits with patchWidget() and stopping after the widget updates successfully.

Frequently Asked Questions about Space Widgets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I patch a widget renderer without manual UI editing?▼

Debug live widget output by comparing the rendered DOM using seeWidget() against the numbered source from readWidget(). This helps identify discrepancies between live HTML and the source code.

Can I fix widget layout and positioning issues programmatically?▼

Inspect widget state by listing all widgets with listWidgets(), reading source with readWidget(), and viewing rendered HTML with seeWidget(). This provides a complete view of widget metadata and output.

What is the best way to update a widget renderer after code changes?▼

Remove widgets from the workspace state by using the removal functions to delete a single widget or clear all widgets in the space. This manages the widget lifecycle without manual intervention.

Why does my widget renderer not match the live output?▼

Yes, you can create new widgets by using renderWidget() to add them to the current open space with a fresh renderer. This eliminates the friction of manual widget creation.