Skip to main content

Migrating to Next Version

Use the widget-nextgen-setup skill to migrate a legacy widget to the Next Version stack — Tailwind CSS 4, @invent/wl-ui-kit-next, and @invent/tailwind-integration with the WidgetRootWrapper component (supports Shadow DOM or light-mode style isolation).

Use this when you have an existing widget and want to bring it onto the current production stack (≥ 2026-04).

When to use​

  • Adding Tailwind CSS to an existing widget.
  • Moving an existing widget to WidgetRootWrapper / Next Version.
  • Troubleshooting widget style isolation issues (Shadow DOM vs light mode).
  • Setting up PostCSS with @invent/tailwind-integration.

Install​

In Claude Code (start it by running claude in your terminal first if it isn't already open), run:

/plugin install widget-nextgen-setup@invent-skills

This is a Claude Code slash command — not a shell command. It only works at the Claude Code prompt.

Migrate the widget​

In your terminal, navigate to the existing widget's repository and start Claude Code there:

cd path/to/your-widget
claude
  1. At the Claude Code prompt, ask: 
    setup next version
    Other phrasings work — "add Tailwind to this widget", "create next version", "migrate to next version". (Natural-language requests to Claude, not shell commands.)
  2. Claude will read widget-config.json to determine the widget name, exposes, and dev port.
  3. Choose a style isolation mode when prompted:
    • Shadow DOM (shadow={true}) — fully isolates widget styles from the host page.
    • Light mode (shadow={false}) — styles inject globally; lighter, but no isolation.
  4. Grant permission for the file changes. The skill will:
    • Create src/{widget-name}-next/ with the new Next Version structure.
    • Add WidgetRootWrapper with correct TypeScript types.
    • Create SettingsNext that re-exports existing settings.
    • Configure PostCSS with prune: true for deduplication.
    • Add the required dependencies (@invent/wl-ui-kit-next, @invent/tailwind-integration, tw-animate-css).

Reference​

For a working example, see widgets-core-ms-teams v1.18.0 — all patterns the skill applies are sourced from this widget.