# isolet-widget-isolation

This skill packages a component into a self-contained widget with shadow DOM and scoped styles, ready to embed on any page.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 474 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/isolet-widget-isolation/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/isolet-widget-isolation

## What it does

The skill builds on the `isolet-js` library. It bundles a React, Solid, Svelte or vanilla JS component into a single widget that renders inside shadow DOM, so page styles and widget styles stay apart. Output formats are IIFE for a script tag, ESM and CommonJS.

Inside you get the `createIsolet` API with `mount`, `update` and `unmount`, framework adapters, and a CLI with `init` and `build`. The `isolet.config.ts` file sets the entry point, output formats, and inlining of CSS and assets. Isolation modes are `shadow-dom`, `scoped` and `none`.

What you need first: `isolet-js` installed via npm and a config in place. If you build with Vite directly instead of the CLI, you have to wire up `cssTextPlugin`, `inlineAssetsPlugin` and `autoStylesPlugin` yourself — skip that and CSS and assets never reach the bundle. Worth checking before you drop the widget onto a live page.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill isolet-widget-isolation -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/isolet-widget-isolation/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/isolet-widget-isolation/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill isolet-widget-isolation -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/isolet-widget-isolation/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill isolet-widget-isolation -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/isolet-widget-isolation/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills isolet-widget-isolation
```

2. **Manually: put the files in place**
- File: `.github/skills/isolet-widget-isolation/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill isolet-widget-isolation -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/isolet-widget-isolation
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/isolet-widget-isolation/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill isolet-widget-isolation -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/isolet-widget-isolation/SKILL.md

## When to use it
- package a React component as a widget without style clashes
- build an IIFE bundle for a script tag embed
- keep component styles away from the host page
- reuse one widget across different frameworks
- inline fonts and images into the widget CSS

## Example prompts
- create an isolated widget from my React component
- package this component as a shadow DOM widget
- build a drop-in widget I can embed with a script tag

## Similar
- [platform-mcp-tool-widget-coordinate](https://affpapa.org/en/nevibecode/skills/platform-mcp-tool-widget-coordinate.md) — skill · 2300 installs
- [webflow-code-component:component-audit](https://affpapa.org/en/nevibecode/skills/webflow-code-componentcomponent-audit.md) — skill · 1000 installs
- [webflow-code-component:convert-component](https://affpapa.org/en/nevibecode/skills/webflow-code-componentconvert-component.md) — skill · 995 installs
- [react-vite-best-practices](https://affpapa.org/en/nevibecode/skills/react-vite-best-practices.md) — skill · 2900 installs
- [opentui](https://affpapa.org/en/nevibecode/skills/anomalyco-opentui.md) — skill · 3700 installs
- [mapbox-web-integration-patterns](https://affpapa.org/en/nevibecode/skills/mapbox-web-integration-patterns.md) — skill · 2600 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 139 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md