skills.rest
Niiihuel
NiiihuelCOMMUNITY
Explore all skills by this author →
GitHub

chat-customizations-editor

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

1|Updated Aug 27, 2026
Search Tags:#vscode#playwright#layout debugging#screenshot testing#extension api#component fixtures#chat customizations
One-click install
npx skills add https://github.com/Niiihuel/openide --skill chat-customizations-editor-niiihuel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chat-customizations-editor
Source: https://github.com/Niiihuel/openide/tree/main/vscode/.github/skills/chat-customizations-editor
Command: npx skills add https://github.com/Niiihuel/openide --skill chat-customizations-editor-niiihuel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/cli.

What problem does it solve? Working on the Chat Customizations editor requires knowing where interfaces live, how harness descriptors drive the UI, and how to keep the extension API chain in sync across five layers. This Skill consolidates that knowledge so changes to agents, skills, instructions, hooks, prompts, MCP servers, and plugins management UI are made correctly and tested reliably. ## Core Features & Use Cases - Architecture guidance: Maps key folders, interfaces (IHarnessDescriptor, ISectionOverride, ICustomizationItemProvider), and the spec file that defines ownership contracts. - Extension API sync checklist: Details the five-layer chain (proposed .d.ts, IPC DTO, ExtHost, MainThread, internal interface) that must be updated together when adding fields to customization items. - Testing and debugging workflows: Covers component fixtures with themed screenshot variants, CI regression gates via blocksCi labels, and live-product layout debugging with Playwright CLI over CDP. - Use Case: When adding a new field to ICustomizationItem, follow the documented five-layer update table, then add a fixture variant and run the gated screenshot tests to catch layout regressions. ## Quick Start Ask the agent to add a new 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 field to the chat customization extension API?▼

Update all five layers in the chain: the proposed .d.ts type, the IPC DTO in extHost.protocol.ts, the ExtHost mapping in extHostChatAgents2.ts, the MainThread callback in mainThreadChatAgents2.ts, and the internal ICustomizationItem interface. New optional fields are backward-compatible and need no version bump.

How do I create a screenshot fixture for a customizations editor tab?▼

Add a variant to the defineThemedFixtureGroup in aiCustomizationManagementEditor.fixture.ts using defineComponentFixture with a selectedSection option. The render calls editor.selectSectionById() after setInput, and Dark/Light variants are generated automatically.

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

The list layout() call bails out when offsetHeight returns 0 during a display:none to visible transition, which fixtures do not reproduce. Defer layout using requestAnimationFrame from the widget's window so it runs after reflow.

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

Launch Code OSS with CDP enabled and connect @playwright/cli, using a separate --user-data-dir to avoid collisions. Use snapshot to find the Open Customizations button, then eval with DOM queries to inspect list rows, container heights, and scrollable element styles.

Why is built-in grouping not showing in my 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.

Related Skills

Explore More Software Engineering Skills→
jimehjimeh

launch

Launch Code OSS builds with isolated profiles and unique debug ports for Playwright automation and dap-cli debugging.

Community
Advanced
go-to-kgo-to-k
97

verify-pr

Run typecheck, lint, build, tests, and CI checks before merging pull requests.

Community
Advanced
az0512124155azz-sysaz0512124155azz-sys

component-fixtures

Create themed component fixtures for screenshot testing of VS Code UI widgets.

Community
Intermediate
gharam1234gharam1234

tdd-playwright

Automates the TDD loop for Playwright test development.

Community
Advanced