Agent skill · software engineering · aradotso
isolet-widget-isolation
Package any component into a self-contained, isolated widget with shadow DOM, scoped styles, and multi-framework support
Why this skill is useful
Provides specific commands and patterns for packaging components into isolated widgets that the AI wouldn't reliably generate on its own.
What it needs
Requires isolet-js installed locally. About 5k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
isolet Widget Isolation Skill by ara.so — Daily 2026 Skills collection. isolet-js packages any component (React, Solid, Svelte, vanilla JS, etc.) into a self-contained, isolated widget. Widgets render inside shadow DOM by default, so styles are fully scoped. Output formats include IIFE (script tag), ESM, and CommonJS. Install Core API: createIsolet Framework Adapters React Vanilla JS Solid Svelte Isolation Modes CLI Config File Multiple Widgets CSS & Asset Handling The build pipeline handles everything automatically: styles in config → CSS is read, url() references (fonts, images) inlined as data URIs, result available as ISOLETCSS in your entry .css imports → converted to JS string exports (shadow DOM safe) Asset imports (.png, .woff2, .mp3, etc.) → inlined as data URIs styles: "./path.css" in createIsolet → resolved and inlined at build time Or reference the CSS path directly (auto-resolved at build time): Manual Vite Plugin Setup If using Vite directly instead of the CLI: Script Tag (IIFE) Usage For a bundled custom widget via IIFE: Common Patterns Lazy-mount on demand z-index overlay widget Reactive props updates Troubleshooting Styles leaking in or out Use isolation: "shadow-dom" (default). Verify your css option or styles path is correctly set — without CSS in the shadow root, the host page styles will not apply inside. ISOLETCSS is undefined This variable is only injected by the isolet build CLI when styles is set in config. For manual Vite builds, add autoStylesPlugin() to your Vite config. Component not rendering Ensure the mount function appends to container, not to document.body. In shadow DOM mode, the container is inside the shadow root. Cleanup not running Return a cleanup function from your mount callback. Without it, widget.unmount() cannot tear down framework internals (timers, subscriptions, etc.). IIFE global not found Check globalName in config matches what you reference in HTML. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/isolet-widget-isolation