skills.rest
KevinHuangIsLearning
KevinHuangIsLearningCOMMUNITY
Explore all skills by this author →
GitHub

chat-customizations-editor

Guides development and testing of the Chat Customizations management editor in Code OSS.

10|1|Updated Jul 13, 2026
Search Tags:#playwright#layout debugging#extension api#code oss#component fixtures#chat customizations#workbench editor
One-click install
npx skills add https://github.com/KevinHuangIsLearning/shortestpath-ide --skill chat-customizations-editor-kevinhuangislearning
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chat-customizations-editor
Source: https://github.com/KevinHuangIsLearning/shortestpath-ide/tree/main/.github/skills/chat-customizations-editor
Command: npx skills add https://github.com/KevinHuangIsLearning/shortestpath-ide --skill chat-customizations-editor-kevinhuangislearning

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/cli.

What problem does it solve? Working on the Chat Customizations editor — the split-view management UI for agents, skills, instructions, hooks, prompts, MCP servers, and plugins — requires knowing where interfaces live, how harness descriptors drive behavior, and how to keep the five-layer extension API chain in sync. This Skill provides that architectural map plus concrete testing and debugging procedures. ## Core Features & Use Cases - Architecture guidance: Locates key folders and interfaces (IHarnessDescriptor, ISectionOverride, ICustomizationItemProvider) and explains the descriptor-driven design where widgets contain no harness-specific conditionals. - Extension API synchronization: Documents the five-layer chain (proposed .d.ts, IPC DTO, ExtHost, MainThread, internal interface) that must be updated together when adding fields to ICustomizationItem. - Testing and debugging workflows: Covers component fixture screenshots per tab, CI regression gates via blocksCi, mock service requirements, and live-product layout debugging with Playwright CLI over CDP. - Use Case: When adding a new customization tab, follow the fixture pattern with defineThemedFixtureGroup, populate mock data per customization type, and optionally gate the layout with blocksCi: true. ## Quick Start Ask the assistant to add a new section tab to the Chat Customizations management editor and create a screenshot fixture for it.

Frequently Asked Questions about chat-customizations-editor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new tab to the Chat Customizations management editor?▼

Add a variant to the defineThemedFixtureGroup in aiCustomizationManagementEditor.fixture.ts using defineComponentFixture with a selectedSection option. The selectedSection calls editor.selectSectionById() after setInput to navigate to the tab and re-layout.

How do I add a field to the chat session customization extension API?▼

Update all five layers: the proposed vscode.proposed.chatSessionCustomizationProvider.d.ts, the IPC DTO in extHost.protocol.ts, extHostChatAgents2.ts, mainThreadChatAgents2.ts, and the internal ICustomizationItem in customizationHarnessService.ts. New optional fields are backward-compatible.

Why does the list widget show zero rows in the real product but work in fixtures?▼

The layout() call bails out when offsetHeight returns 0 during a display:none to visible transition. Defer layout using DOM.getWindow(this.element).requestAnimationFrame(...) so the list receives the correct viewport height after reflow.

How do I debug the customizations editor layout in the live product?▼

Launch Code OSS with CDP enabled and connect @playwright/cli, using a separate --user-data-dir to avoid collisions. Navigate via the Open Customizations button, switch sections with eval-based DOM clicks, and inspect widget dimensions through document.title as a return channel.

Why is built-in grouping not showing in my component fixture?▼

Built-in regrouping requires three conditions: BUILTIN_STORAGE in the harness descriptor's visible sources, a mocked IProductService.defaultChatAgent.chatExtensionId, and mock items carrying matching extensionId provenance. Missing any one silently disables regrouping.

When should I add blocksCi to a component fixture?▼

Add blocksCi: true only to fixtures covering critical layout paths such as the default view, a section with list plus footer, or narrow viewports. Gating too many fixtures creates noisy CI failures on every pull request to main.

Related Skills

Explore More Software Engineering Skills→
az0512124155azz-sysaz0512124155azz-sys

chat-customizations-editor

Guides development and testing of the Chat Customizations management editor in Code OSS.

Community
Advanced
microsoftmicrosoft
190.1k

launch

Automate VS Code Insiders UI interactions via Playwright CLI and Chrome DevTools Protocol.

Official
Intermediate
microsoftmicrosoft
190.1k

chat-customizations-editor

Manage agents, skills, instructions, hooks, prompts, MCP servers, and plugins in the Chat Customizations editor.

Official
Advanced
dyad-shdyad-sh
21.4k

dyad:debug-with-playwright

Debugs Electron E2E tests by capturing Playwright screenshots at key execution points.

Official
Intermediate