agent-sessions-layout

When working on the Agents workbench layout, always follow these guidelines:

microsoft/vscode|Updated Apr 8, 2026

Works with

Claude CodeCursorClineWindsurfCodexGoose

Installation Guide

Select your AI agent

How to use agent-sessions-layout on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add agent-sessions-layout

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/microsoft/vscode --skill agent-sessions-layout

Fetches agent-sessions-layout from microsoft/vscode and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/agent-sessions-layout

Restart Cursor to activate agent-sessions-layout. Access via /agent-sessions-layout in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

Documentation

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

User Story & Requirements Generation

Create detailed user stories, acceptance criteria, and feature specs

Example

Generate user stories for 'password reset feature' with acceptance criteria, edge cases, and test scenarios

✓

Reduce spec writing time by 50%, ensure comprehensive coverage

Competitive Analysis

Research competitors, compare features, identify gaps

Example

Analyze 5 competitor products, create feature comparison matrix, suggest differentiation opportunities

✓

Complete competitive research in 2 hours instead of 2 days

Roadmap Prioritization

Evaluate features using frameworks (RICE, ICE, Kano) and create prioritized backlogs

Example

Score 20 feature ideas using RICE framework, generate prioritized roadmap with rationale

1. Read the Specification First

The authoritative specification for the Agents layout lives at:

src/vs/sessions/LAYOUT.md

Before making any changes to the layout code, read and understand the current spec. It defines:

The fixed layout structure (grid tree, part positions, default sizes)

Which parts are included/excluded and their visibility defaults

Titlebar configuration and custom menu IDs

Editor modal overlay behavior and sizing

Part visibility API and events

Agent session part classes and storage keys

Workbench contributions and lifecycle

CSS classes and file structure

2. Keep the Spec in Sync

If you modify the layout implementation, you must update LAYOUT.md to reflect those changes. The spec should always match the code. This includes:

Adding/removing parts or changing their positions

Changing default visibility or sizing

Adding new actions, menus, or contributions

Modifying the grid structure

Changing titlebar configuration

Adding new CSS classes or file structure changes

Update the Revision History table at the bottom of LAYOUT.md with a dated entry describing what changed.

3. Implementation Principles

When proposing or implementing changes, follow these rules from the spec:

Maintain fixed positions — Do not add settings-based position customization

Panel must span the right section width — The grid structure places the panel below Chat Bar and Auxiliary Bar only

Sidebar spans full height — Sidebar is in the main content branch, spanning from top to bottom

New parts go in the right section — Any new parts should be added to the horizontal branch alongside Chat Bar and Auxiliary Bar

Preserve no-op methods — Unsupported features (zen mode, centered layout, etc.) should remain as no-ops, not throw errors

Handle pane composite lifecycle — When hiding/showing parts, manage the associated pane composites

Use agent session parts — New part functionality goes in the agent session part classes (SidebarPart, AuxiliaryBarPart, PanelPart, ChatBarPart, ProjectBarPart), not the standard workbench parts

Use separate storage keys — Agent session parts use their own storage keys (prefixed with workbench.agentsession. or workbench.chatbar.) to avoid conflicts with regular workbench state

Use agent session menu IDs — Actions should use Menus.* menu IDs (from sessions/browser/menus.ts), not shared MenuId.* constants

4. Key Files

File

Purpose

sessions/LAYOUT.md

Authoritative layout specification

sessions/browser/workbench.ts

Main layout implementation (Workbench class)

sessions/browser/menus.ts

Agents menu IDs (Menus export)

sessions/browser/layoutActions.ts

Layout actions (toggle sidebar, panel, secondary sidebar)

sessions/browser/paneCompositePartService.ts

AgenticPaneCompositePartService

sessions/browser/media/style.css

Layout-specific styles

sessions/browser/parts/parts.ts

AgenticParts enum

sessions/browser/parts/titlebarPart.ts

Titlebar part, MainTitlebarPart, AuxiliaryTitlebarPart, TitleService

sessions/browser/parts/sidebarPart.ts

Sidebar part (with footer and macOS traffic light spacer)

sessions/browser/parts/chatBarPart.ts

Chat Bar part

sessions/browser/parts/auxiliaryBarPart.ts

Auxiliary Bar part (with run script dropdown)

sessions/browser/parts/panelPart.ts

Panel part

sessions/browser/parts/projectBarPart.ts

Project Bar part (folder entries, icon customization)

sessions/contrib/configuration/browser/configuration.contribution.ts

Sets workbench.editor.useModal to 'all' for modal editor overlay

sessions/contrib/sessions/browser/sessionsTitleBarWidget.ts

Title bar widget and agent picker

sessions/contrib/chat/browser/runScriptAction.ts

Run script split button for titlebar

sessions/contrib/accountMenu/browser/account.contribution.ts

Account widget for sidebar footer

sessions/electron-browser/parts/titlebarPart.ts

Desktop (Electron) titlebar part

5. Testing Changes

After modifying layout code:

Verify the build compiles without errors via the VS Code - Build task

Ensure the grid structure matches the spec's visual representation

Confirm part visibility toggling works correctly (show/hide/maximize)

Test that editors open in the ModalEditorPart overlay and that it closes properly

Verify sidebar footer renders with account widget

agent-sessions-layout

Installation Guide

How to use agent-sessions-layout on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

Documentation

List & Monetize Your Skill

Use Cases

User Story & Requirements Generation

Competitive Analysis

Roadmap Prioritization

Install Skill

1. Read the Specification First

2. Keep the Spec in Sync

3. Implementation Principles

4. Key Files

5. Testing Changes

Stakeholder Communication

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

grill-me

premortem

deslop

framer-motion

write-a-prd

travel-planner

Reviews

Discussion