What problem does it solve? Writing CSS in the VS Code codebase requires following strict conventions for file organization, class naming, layout primitives, and text truncation, and violating them causes visual bugs like clipped text, broken flex layouts, and stylelint failures. ## Core Features & Use Cases - CSS Conventions & Naming: Enforces co-located CSS files, monaco- prefixed class naming, standard sizes, and bans new !important declarations. - Programmatic Layout Patterns: Documents SplitView, Grid, and ScrollableElement APIs for constraint-based responsive layouts without CSS media queries. - Text Overflow & Ellipsis Rules: Provides the required overflow/white-space/text-overflow trio, the min-width: 0 flex fix, and hover tooltip requirements for truncated text. - Design-System Size Tokens: Maps spacing, border-radius, font size/weight, codicon size, and stroke width to --vscode-* CSS variables with off-scale snapping rules. - Use Case: When building a new workbench view pane with a header label and action buttons, use this Skill to structure the flex row so the label truncates with ellipsis, icons stay fixed, and all spacing uses design tokens. ## Quick Start Ask the AI to write or review CSS for a VS Code workbench component following the ux-css-layout conventions, for example to fix a label that fails to truncate inside a flex container.
