Skills
.Work. You
Rest

react-resizable-panels-v3-to-v4

Community

Migrate react-resizable-panels to v4 fast

Software Engineering#typescript#react#upgrade guide#layout debugging#ui migration#css selectors#resizable panels
Authorwenerme
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Fixes broken layouts and type/runtime errors when upgrading react-resizable-panels from v3 to v4, including renamed components, removed props, and changed sizing/data attributes.

Core Features & Use Cases

  • Component migration: Converts PanelGroup → Group and PanelResizeHandle → Separator, with correct orientation usage.
  • Type-safe callback updates: Replaces removed onCollapse/onExpand patterns with the v4 onResize approach and updated handle type names.
  • Layout correctness fixes: Handles the breaking size unit change where numeric sizes must become explicit percentage strings (e.g., '30%') to prevent extreme panel resizing issues.
  • CSS selector and data attribute updates: Updates data-panel-group-direction/resize-handle-state selectors to the v4 aria-orientation and data-separator scheme to restore hover/drag styling.

Quick Start

Use the react-resizable-panels-v3-to-v4 skill to upgrade your v3 panels code by renaming components/props and converting all size values to explicit percentage strings.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: react-resizable-panels-v3-to-v4
Download link: https://github.com/wenerme/ai/archive/main.zip#react-resizable-panels-v3-to-v4

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.