🪟

FrontendGo

Drag Pane

Drag Pane is a Frontend skill for Claude Code, published by marcus in sidecar.

1K stars79 forkson marcus/sidecarAdded 2026/08/21Repository updated 2026/08/21

View source on GitHub Download repo ZIP

agentic-aiagentic-workflowsclaude-codetui

Install in seconds

Install Drag Pane

Copy Drag Pane into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/marcus/sidecar/tree/main/.claude/skills/drag-pane ~/.claude/skills/drag-pane

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/marcus/sidecar.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: .claude/skills/drag-pane/SKILL.md in marcus/sidecar
Installs to: ~/.claude/skills/drag-pane
Collection: One of 16 skills cataloged from this repository
Category: Frontend — 567 skills

What Drag Pane does

Drag Pane implements drag-to-resize behavior for two-pane layouts. Use it when adding or fixing divider dragging, width clamping, mouse hit regions, or saved pane widths.

Drag Pane is cataloged under Frontend on DirSkills. Drag Pane comes from a repository tagged agentic-ai, agentic-workflows, claude-code and tui.

Documentation

README

Excerpt

Drag-to-Resize Pane Implementation

Overview

Add drag-to-resize support for two-pane plugin layouts (sidebar + main content). Users click and drag the divider between panes to resize them.

Prerequisites

Plugin already has a two-pane layout (sidebar + main content)
State persistence functions exist in internal/state/state.go (each plugin has its own getter/setter)
Familiarity with internal/mouse package

Existing Implementations

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Drag Pane

What else does marcus publish alongside Drag Pane?
Drag Pane is one of 16 skills that DirSkills catalogs from marcus/sidecar, the repository it ships in. Its siblings there include Create Adapter, Create Modal and Create Plugin. Each one is a separate skill with its own page in this directory, installs the same way Drag Pane does, and is maintained by marcus in that same repository. The rest of the collection is listed on the marcus/sidecar page.
How does Drag Pane compare to other Frontend skills?
Drag Pane ranks #320 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Drag Pane against them. Open each page to compare what they document and how they install.

More from marcus/sidecar

Drag Pane is one of 16 skills cataloged on DirSkills from marcus/sidecar.

See all 16 skills →

Create Adapter

Create Adapter covers building conversation adapters that import AI chat history from tools like Claude Code, Cursor, Warp, and Codex. Use it when creating or debugging an adapter’s parsing, caching, watch handling, or performance behavior.

Create Modal

Create Modal builds declarative dialogs with the internal/modal library, including confirm, input, select, form, and custom sections. Use it when adding modals or dialogs that need built-in keyboard, mouse, and overlay handling.

Create Plugin

Create Plugin explains how to build Sidecar plugins that implement the plugin interface, render Bubble Tea views, and wire keyboard input, footer hints, event bus, and lifecycle hooks. Use it when adding a plugin or debugging plugin rendering and init/stop behavior.

Create Theme

Create Theme configures Sidecar color themes, including base theme selection, color overrides, gradient borders, tab styles, and syntax themes. Use it when creating or adjusting UI appearance or troubleshooting color and style issues.

Feature Flags

Feature Flags gates experimental functionality in Sidecar with user-configurable settings. Use it to register flags, check them in code, and manage config or CLI overrides with clear priority rules.

Inline Editor

Inline Editor adds in-pane file editing in the file browser preview using a tmux PTY backend. Use it when working on inline editing flows, text input, or editor input and rendering issues.

More Frontend skills

Drag Pane is one of 567 Frontend skills cataloged on DirSkills, ranked #320 by stars among them.

Browse all Frontend skills →

Angular Developer

Angular Developer generates Angular code and provides architectural guidance for Angular projects. Use it for creating projects, components, or services, or for best practices on reactivity, forms, DI, routing, SSR, accessibility, animations, styling, testing, and CLI tooling.

Android Clean Architecture

Android Clean Architecture provides patterns for structuring Android and Kotlin Multiplatform projects, covering module boundaries, UseCases, Repositories, and data layer with Room, SQLDelight, and Ktor. Use it when setting up layered architecture in Android or KMP projects.

Accessibility

Accessibility helps design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards for keyboard, contrast, and screen-reader support. Use it when building or auditing UI that must meet WCAG 2.2 Level AA or reviewing changes for accessibility.