skills.rest
yyy0107
yyy0107COMMUNITY
Explore all skills by this author →
GitHub

extend-workbench-ui

Implement typed frontend extension contributions for the Pi Workbench extension platform.

2|Updated Aug 17, 2026
Search Tags:#typescript#frontend#react#extension#workbench#ui contribution#plugin platform
One-click install
npx skills add https://github.com/yyy0107/pi-workbench --skill extend-workbench-ui-yyy0107
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extend-workbench-ui
Source: https://github.com/yyy0107/pi-workbench/tree/main/.agents/skills/extend-workbench-ui
Command: npx skills add https://github.com/yyy0107/pi-workbench --skill extend-workbench-ui-yyy0107

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Adding UI features to Pi Workbench requires choosing the correct contribution type, respecting browser/runtime boundaries, and registering extensions in static catalogs without breaking the core chat flow. This Skill guides that process so new capabilities land in the right layer with the right contracts. ## Core Features & Use Cases - Contribution type selection: Decide between Slot, Panel, Command, Composer Command, Renderer, Settings, Main View, Opener, and Workspace Surface contributions based on the feature's behavior. - Boundary enforcement: Keep Shell, Core, and Extension SDK free of Pi-specific imports, route tool execution through owning backend capabilities, and avoid deep-importing sibling builtin features. - Contract and recipe references: Consult references/contracts.md for the current public API surface and references/recipes.md for implementation patterns such as Slot-only features, installable Toolbox entries, and Tool Renderers. - Use Case: When asked to add a token-usage indicator or a review inspector, use this Skill to register a typed Slot or Workspace Surface contribution, wire it into the static extension catalog, localize strings, and validate with oxfmt, oxlint, and typecheck. ## Quick Start Use the extend-workbench-ui skill to add a new status bar indicator extension to the Workbench frontend.

Frequently Asked Questions about extend-workbench-ui

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

FAQPage Schema
How do I add a new UI extension to Pi Workbench?▼

Define the extension with defineExtension from @workbench/extension-sdk, register contributions synchronously in setup(), and add the stable extension object to the owning package's semantic group and the installed-workbench-extensions catalog. Choose the contribution type (Slot, Panel, Command, Workspace Surface) based on the feature's behavior.

How do I choose between a Slot, Panel, and Workspace Surface contribution?▼

Use a Slot for small buttons or indicators, a Panel for host-managed left or bottom surfaces, and a Workspace Surface for persistent inspector capabilities like review or file views. The current shell does not mount a right Panel host, so persistent inspector content belongs in RightWorkspace.

Can a Workbench extension import Pi runtime packages directly?▼

No. Shell, Core, and Extension SDK/Host must not import Pi packages or parse Pi raw events. Only Pi-specific contributions use the narrow @workbench/agent-runtime-pi-client facades, and server-side SDK work routes through the pi-coding-agent-sdk or pi-ai-sdk skills.

Does registering a Renderer define or execute a tool?▼

No. A Renderer only displays an existing Message Block; it does not define a tool, expose it to a model, or execute it. Tool definition and execution must be routed through the owning Pi/backend capability.

Why should I avoid registering a Panel with defaultLocation right?▼

The current shell mounts Panel hosts only for left and bottom locations, so a Panel moved to right has no visible host. New persistent inspector content should be registered as a Workspace Surface through context.workspace.register instead.

What validation should I run after changing a Workbench extension?▼

Run pnpm exec oxfmt --check and oxlint on changed files, plus pnpm --filter <owner-package> run typecheck. For contract or composition changes, also check affected consumers, and reserve full builds for bundling or cross-host verification.

Related Skills

Explore More Software Engineering Skills→
agentjidoagentjido
48

builder-ecosystem-page-author

Create or update workbench ecosystem package pages with boundaries and companion links.

Official
Intermediate
johinsDevjohinsDev

tooling

Enforce linting, formatting, typechecking, and commit-message rules via lefthook and commitlint.

Community
Intermediate
hemoryhemory

pi

Route user-defined tasks and skills through Pi for comparison with Claude Code.

Community
Intermediate
zap-studiozap-studio

uaa

Standardize software project architecture by separating Core, Adapters, and Shared Capabilities.

Official
Advanced