Skip to main content
affpapa.org
RU EN
skill CX Codex

isolet-widget-isolation — Claude Code skill: isolated widgets

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill isolet-widget-isolation -a claude-code
Open on GitHub

What isolet-widget-isolation 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.

What it helps with

  • 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 for the agent

  • 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

How to install isolet-widget-isolation

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill isolet-widget-isolation -a claude-code

2Manually: put the files in place

~/.claude/skills/isolet-widget-isolation/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/isolet-widget-isolation/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about isolet-widget-isolation

How do I install isolet-widget-isolation in Claude?

Run npx skills add reason-machines/trending-skills --skill isolet-widget-isolation -a claude-code. The skill lands in ~/.claude/skills/isolet-widget-isolation/SKILL.md.

What does isolet-widget-isolation do?

It packages a component into a self-contained widget with shadow DOM and its own styles. React, Solid, Svelte and vanilla JS are supported.

What isolation modes does isolet-js offer?

Three: shadow-dom for full CSS isolation, scoped with global styles, and none without isolation. The default is shadow-dom.

Similar skills

Everything for Frontend and UI →
platform-mcp-tool-widget-coordinate forcedotcom Coordinates Lightning Type and HXL widget generation so a custom MCP server tool backed by an Apex Invocable Action renders as rich UI. CX Codex +1 2,300installs webflow-code-component:component-audit webflow Reviews Webflow code components for architecture: what should be a prop, how state is wired, where slots are missing, and what breaks in Shadow DOM. CX Codex +1 1,000installs webflow-code-component:convert-component webflow Turns an existing React component into a Webflow Code Component: reads the props, writes the .webflow.tsx definition and flags what has to change. CX Codex +1 995installs react-vite-best-practices agent-skills A skill with 23 rules for optimizing React apps built with Vite: build config, code splitting, HMR, assets, env variables and bundle analysis. Useful when an agent writes or reviews components. CX Codex +1 2,900installs opentui anomalyco Gives your agent OpenTUI reference documentation: Core, React and Solid bindings, components, application APIs, testing and deployment. CX Codex +1 3,700installs mapbox-web-integration-patterns mapbox Official Mapbox GL JS integration patterns for React, Vue, Svelte, Angular and vanilla JavaScript. Useful when a map leaks memory or refuses to initialize in the right hook. CX Codex +1 2,600installs

From the same set49

x-mentor-skill-nuwa A skill that turns six creators' methods and open-source algorithm data into concrete advice on hooks, threads and account growth. CX Codex +1 594installs bluehammer-vulnerability-poc A skill that walks the agent through the BlueHammer repo: building the C exploit, running it, and reading the vulnerability code. For isolated labs only. CX Codex +1 570installs 3dsvg-interactive-react Turns SVGs and text into interactive 3D React components with the 3dsvg library. Useful for a dimensional logo or hero badge. CX Codex +1 529installs rattles-terminal-spinners A Claude skill covering rattles, a minimal Rust library for terminal spinners. Useful when a CLI needs a loading indicator without extra dependencies. CX Codex +1 497installs ntwarden-windows-analysis-toolkit A skill for digging into Windows internals: processes, services, network, ETW, kernel. Useful when you need to break down what a suspicious process is doing. CX Codex +1 443installs tech-doc-style-chinese Style rules for Chinese technical writing: spacing between CJK and Latin, corner brackets, no buzzwords. Ships with a Python linter. CX Codex +1 434installs anubis-android-app-manager A skill for building and configuring Anubis, an Android app manager that freezes app groups through Shizuku depending on VPN state. CX Codex +1 427installs huashu-design-html-native Turns a plain-language request into a finished file: prototype, slide deck, animation or infographic in HTML/CSS/JS. No Figma involved. CX Codex +1 426installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor