webrobot-frontend-plugin-dev

Builds ESM-bundled React UI plugins that hot-load into the WebRobot Next.js dashboard.

Updated Apr 29, 2026
One-click install
npx skills add https://github.com/WebRobot-Ltd/claude-code-webrobot-skills --skill webrobot-frontend-plugin-dev-webrobot-ltd
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: webrobot-frontend-plugin-dev
Source: https://github.com/WebRobot-Ltd/claude-code-webrobot-skills/tree/main/skills/webrobot-frontend-plugin-dev
Command: npx skills add https://github.com/WebRobot-Ltd/claude-code-webrobot-skills --skill webrobot-frontend-plugin-dev-webrobot-ltd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Extending the WebRobot dashboard with custom views normally requires modifying and rebuilding the host Next.js application. This Skill guides you through building partner UI plugins that ship as ZIP files with ESM bundles, upload to MinIO, and hot-load in the dashboard via blob-URL import() with no host rebuild. ## Core Features & Use Cases - Plugin Scaffolding: Generates a Vite React-TS project configured in library mode with ESM output, one bundle per view, and React bundled inline as required by the v1 contract. - Manifest Authoring: Produces a valid manifest.json declaring views, rolesAllowed, settings flags, sidebar menu slots, and home widgets that the host validates on upload. - Contract Compliance & Troubleshooting: Enforces the bundle contract (ESM only, default exports, no bare import specifiers, no embedded credentials) and diagnoses common failures like unmounted components, auth errors, and stale ZIP caches. - Use Case: A partner wants a sentiment analytics dashboard with an overview chart, a timeseries view, and an admin-only settings page. The Skill scaffolds the project, writes the components, configures Vite, builds the ZIP, and explains how to upload and enable it. ## Quick Start Ask the assistant to scaffold a WebRobot dashboard UI plugin for your use case, for example a sentiment dashboard with a timeseries chart and an admin settings view.

Frequently Asked Questions about webrobot-frontend-plugin-dev

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

FAQPage Schema
How do I build a custom UI plugin for the WebRobot dashboard?

Scaffold a Vite React-TS project, configure it in library mode with ESM output and one entry per view, then zip the dist folder with a manifest.json declaring your views. Upload the ZIP through the dashboard's plugin admin and enable it to hot-load without rebuilding the host.

How do I add a sidebar menu entry from a dashboard plugin?

Declare entries in the manifest's ui.menu array with a whitelisted slot such as extensions, settings, marketplace, or partner. Each entry supports label, icon, path, rolesAllowed, and order; unknown slots are silently dropped and main or admin slots require super_admin approval.

Can a WebRobot plugin share React with the host dashboard?

No, in v1 the plugin must bundle React inline because blob-URL imports cannot resolve bare specifiers without import maps. Import maps for shared React are planned for v2, which will reduce bundle sizes from roughly 200-300KB to about 30KB per view.

Why does my plugin bundle fail to load in the dashboard?

The most common cause is a bare import like import "react" left in the bundle, which the browser cannot resolve from a blob URL. Remove rollupOptions.external from your Vite config so React is bundled inline, and ensure the output format is ESM with a default export.

How does a dashboard plugin authenticate API calls?

Use the token prop passed by the host in the Authorization header, or call the dashboard's /api proxy routes which reuse the user's session cookie. Never embed API keys in the bundle since it ships to every browser.

Why are my plugin changes not showing after re-upload?

The dashboard caches uploaded ZIPs in memory for one hour. Disable and re-enable the plugin to clear the cache and force a reload of the new bundle.