VS Code CSS Layout Standards
Build reliable VS Code-style CSS layouts and text truncation behavior
The skill provides CSS, TypeScript layout, and naming guidance only; it requests no network access, credentials, sensitive data, or destructive actions. It explicitly discourages new !important usage and promotes narrow selector ownership. Deducted 5 points because it does not specify user confirmation, rollback, dependency security, or data-flow handling; attribution is supplied mainly by repository metadata rather than versioned provenance in the skill itself.
The document is internally organized and includes examples for SplitView, Grid, scrolling, responsive constraints, and text truncation, along with preventative rules. Deducted 13 points because the supplied files contain no skill-specific key-path tests, execution results, or abnormal-input feedback; some claims are broad, such as VS Code not using CSS media queries, and cannot be verified from this skill alone.
The description clearly targets CSS authoring, layout construction, and text-truncation fixes, with concrete applicable components and anti-patterns. Deducted 5 points because non-fit cases, trigger priority, input/output boundaries, and compatibility ranges are not defined; Chinese localization and mainland-China network fit are not addressed.
The skill has good information architecture, tables, examples, key-file references, limitation-like rules, and design-token guidance. The README, LICENSE, and package.json provide MIT licensing, Microsoft attribution, and evidence of an actively updated repository. Deducted 7 points because the skill itself lacks versioning, changelog, explicit maintenance ownership, update path, installation notes, and FAQs; its canonical instruction dependency is not included in the supplied evidence.
The guidance is concrete enough to support VS Code CSS layout work, with directly reusable patterns such as min-width: 0, ellipsis, SplitView, and design-token usage. Deducted 9 points because no representative outputs, actual fixes, or comparative-benefit evidence are provided; several rules still require source-level developer judgment and review.
The skill names auditable SplitView, Grid, scrollbar, global-style, and design-token paths, while the repository includes general CI and test material. Deducted 7 points because those workflows and tests do not demonstrate the skill's key paths, and there are no skill-specific tests, pinpoint citations, corroboration, or explicit separation of static fact from inference; static calibration caps this dimension at 5.
- This assessment is based only on the supplied static files; no examples, builds, lint checks, or tests were executed.
- Before use, verify the referenced source files, design-token registry, and actual CSS conventions at the target revision; absolute rules may change across versions.
- The skill does not document boundaries for Chinese localization, RTL, narrow windows, or different VS Code build environments.
What it does & when to use it
This skill provides CSS and layout guidance for development in the VS Code source tree, covering file organization, class naming, standard dimensions, selector quality, and design-system size tokens. It explains SplitView, Grid, scrollable elements, and constraint-based responsive layout instead of CSS media queries. It also standardizes ellipsis handling, Flex item shrinking, and hover access to truncated text. It fits work on VS Code workbench and base UI styles, but it is guidance rather than a standalone build or test tool.
It guides developers to inspect and edit CSS files colocated with TypeScript components, use monaco- prefixes for major components, and apply state and kebab-case feature classes. It provides selection and usage examples for SplitView, Grid, SmoothScrollableElement, DomScrollableElement, and ScrollableElement, including view size constraints, layout priorities, snapping, and onDidChange. It requires truncated text to use overflow: hidden, white-space: nowrap, and text-overflow: ellipsis together, sets min-width: 0 on shrinking Flex children, and recommends IHoverService.setupDelayedHover() for full text in custom DOM. It also directs developers toward registered --vscode-* spacing, radius, font, Codicon, and stroke tokens and identifies relevant source files.
- A VS Code contributor is editing a workbench panel, title, or view and needs to colocate its CSS correctly.
- A developer is building a horizontal or vertical split interface with draggable sashes and needs to configure SplitView.
- A developer is implementing a two-dimensional editor-group layout and needs Grid.
- A developer is fixing clipped labels in lists, trees, tabs, status-bar items, notifications, or other bounded UI.
- A developer is building a narrow, responsive panel and needs minimumSize, maximumSize, LayoutPriority, and snap behavior.
- A developer is adjusting VS Code spacing, corner radii, fonts, icons, or borders and wants to follow the size-token system.
Pros & cons
- Covers the workflow from CSS organization, naming, and selector quality through SplitView, Grid, scrolling, constraint-based layout, and text overflow.
- States precise requirements for the ellipsis property combination, Flex child `min-width: 0`, and hover access to full text.
- Provides decision rules for VS Code spacing, corner-radius, font, Codicon, and stroke tokens.
- Names key source files and includes TypeScript API examples for locating the relevant implementations.
- Its scope is VS Code CSS and layout conventions, not general frontend frameworks, browser compatibility, or product design guidance.
- The supplied material includes no standalone installation command, build workflow, test suite, or automation script.
- Several rules depend on VS Code's directory structure, APIs, and registered design tokens, so other projects would require adaptation.
- The skill does not perform edits or tests by itself; it supplies instructions, examples, and constraints.
How to install
The skill is located at .github/skills/ux-css-layout/SKILL.md in the microsoft/vscode repository. The supplied material does not document a standalone installation or copying command; the README only describes the overall Code - OSS repository and its MIT license. In an Agent Skills-compatible client, provide the repository content using that client's skill-installation procedure. The exact procedure is not specified in the source.
How to use
In a client that supports the included Agent Skill, give it a concrete VS Code CSS or layout task, for example: "Apply the ux-css-layout guidance to fix a label that will not ellipsize inside this Flex row, and add a hover for the full text." When working in the VS Code source tree, consult the paths identified by the skill, including src/vs/base/browser/ui/splitview/splitview.ts, src/vs/base/browser/ui/grid/grid.ts, src/vs/base/browser/ui/scrollbar/scrollableElement.ts, and src/vs/workbench/browser/media/style.css. The source does not document a standalone CLI, build command, or automated validation workflow for this skill.