React Webview Architecture

microsoft/vscode-documentdb/.github/skills/react-webview-architecture

Çoklu dosya

codingResmi

Resmi Sağlayıcı Skill'iView repo

Architecture patterns for React-based webviews in the vscode-documentdb extension. Use when creating new webview components, modifying existing views (CollectionView, DocumentView), working with state management (Context API), integrating Fluent UI components, handling Monaco Editor or SlickGrid, solving stale closure bugs with refs, or debugging webview rendering issues. Does NOT cover tRPC messaging (see webview-trpc-messaging skill) or accessibility/ARIA (see accessibility-aria-expert skill).

Dosyalar2 dosya

SKILL.md249 satır

Loading editor…

Kurulum

Önerilen

Tek komut — ajanınız otomatik olarak devreye alır.

AI aracını seç

Kurulum komutunu görmek için yukarıdan bir AI aracı seçin.

veya

Manuel Kurulum

Daha fazla adım

Arşivi indirin ve dosyaları projenize manuel olarak ekleyin.

Skill detayları

Versiyonv1.0.0

YazarMicrosoft

Kategoricoding

Skill IDmicrosoft/vscode-documentdb/.github/skills/react-webview-architecture

Dosyalar2 dosya

İlgili skill'ler

Detecting Accessibility IssuesDetects and fixes accessibility issues in React/Fluent UI webviews. Use when reviewing code for screen reader compatibility, fixing ARIA labels, ensuring keyboard navigation, adding live regions for status messages, or managing focus in dialogs.FluentuiPatterns for FluentUI React v9 components in VS Code webviews. Use when working with any FluentUI component (Toolbar, Overflow, Menu, Button, Dialog, etc.), debugging layout or styling issues with FluentUI, implementing toolbar overflow (collapsing items into a "..." menu), or integrating FluentUI components in webview panels.Review External PrTriage an external contributor's PR and prepare it for merge. Detects push permission, base branch, draft state, size, and history quality, then picks one of three paths (review-only, direct push to contributor branch, or a `reviews/` staging branch). Use when triaging or reviewing a community PR, deciding whether maintainer changes are needed, choosing a merge strategy (squash/merge/rebase), or merging an external contribution.Skill CreatorGuide for creating effective GitHub Copilot skills (.github/skills/) in this repository. Use when creating a new skill, updating an existing skill, or when asked about skill structure, format, or best practices for the vscode-documentdb project.Telemetry InstrumentationInstrumentation patterns for telemetry in the vscode-documentdb extension. Use when adding telemetry to a feature, enriching existing telemetry with properties or measurements, linking related events with correlation IDs, instrumenting commands or tree views, suppressing noisy events, or deciding what data points to capture. Also use when asked to "add telemetry" or "improve telemetry" for any feature.Webview Trpc MessagingImplements tRPC-based communication between VS Code extension host and React webviews. Use when creating new webview procedures (queries, mutations, subscriptions), adding a new webview router, wiring up a webview controller, using the tRPC client from React components, applying telemetry middleware (trpcToTelemetry), or supporting AbortSignal-based cancellation in webview operations.