Agent skill · design visual · microsoft
ux-css-layout
VS Code CSS conventions, file organization, class naming, standard sizes, SplitView/Grid layout, scrollable content, responsive layout, and text overflow/ellipsis patterns. Use when writing CSS, building layouts, or fixing text truncation issues.
Why this skill is useful
Provides specific CSS layout patterns and naming conventions that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-08-07. 188,455 stars on the source repository.
What this skill does
This skill covers CSS file organization, naming, standard sizes, programmatic layout (SplitView, Grid, scrollable), responsive patterns, and text overflow handling. --- 1. File Organization CSS files are co-located with their TypeScript components: Import CSS directly in the TS file: Workbench-level global styles live in src/vs/workbench/browser/media/. 2. Class Naming monaco- prefix for all major components: .monaco-workbench, .monaco-split-view2, .monaco-scrollable-element Modifier classes: .monaco-split-view2.vertical, .monaco-split-view2.horizontal State classes: .visible, .focused, .active, .highlight Feature-specific classes use kebab-case without prefix: .my-feature, .outline-pane, .welcome-view-content 3. Standard Sizes Element Size --------- ------ Part title height 35px Title padding (horizontal) 8px Title label inner padding 12px Action area padding 5px Action icon size 16px Body font-size 13px (workbench), 11px (HTML body) Line height 1.4em Validation message font-size 12px (line-height: 17px) For padding/margin/gap, border-radius, font-size/font-weight, codicon size and border width, prefer the design-system size tokens over raw px — see §10 Design-System Size Tokens. Canonical reference: .github/instructions/design-tokens.instructions.md (auto-injected for src/vs//.css). 4. CSS Selector Quality Anti-pattern (flagged) Correct pattern ------------------------ ----------------- ID selectors for styling (#my-widget) Class selectors (.my-widget) Overly specific selectors Minimal specificity needed Styles in the wrong file Co-located with the component Missing min-width: 0 on flex children Prevents truncation issues Forgetting pointer-events: none on hidden overlays Prevents click-through bugs Never Add New !important Do not introduce !important in new or modified CSS. When a declaration loses the cascade, inspect the competing selector and increase specificity with the smallest appropriate component, workbench, or state-class prefix instead. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills microsoft/ux-css-layout