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

ux-css-layout

Applies VS Code CSS conventions for layouts, sizing tokens, and text truncation patterns.

1|Updated Aug 27, 2026
Search Tags:#vscode#layout#css#flexbox#design-tokens#text-overflow#splitview
One-click install
npx skills add https://github.com/Niiihuel/openide --skill ux-css-layout-niiihuel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-css-layout
Source: https://github.com/Niiihuel/openide/tree/main/vscode/.github/skills/ux-css-layout
Command: npx skills add https://github.com/Niiihuel/openide --skill ux-css-layout-niiihuel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing CSS in the VS Code codebase requires following strict conventions for file organization, class naming, layout systems, and text truncation. This Skill prevents common mistakes like clipped text without ellipsis, broken flex truncation, off-scale spacing values, and improper use of !important. ## Core Features & Use Cases - CSS Conventions & Naming: Enforces co-located CSS files, monaco- prefixed class naming, and selector quality rules including the ban on new !important declarations. - Programmatic Layout Guidance: Covers SplitView, Grid, and scrollable element APIs for building resizable, constraint-based layouts without CSS media queries. - Text Overflow & Design Tokens: Provides the required ellipsis pattern (including the min-width: 0 flex fix) and the design-system size token ramps for spacing, radius, font, codicon, and stroke values. - Use Case: When building a new 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 spacing uses --vscode-spacing-* tokens. ## Quick Start Use the ux-css-layout skill to write the CSS for my new workbench view pane with a truncating title label and standard VS Code spacing tokens.

Frequently Asked Questions about ux-css-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make text truncate with ellipsis in a flex container?▼

Set overflow: hidden, white-space: nowrap, and text-overflow: ellipsis on the element, plus min-width: 0 on the flex child. Without min-width: 0, flex items refuse to shrink below content width and the ellipsis never triggers.

How does VS Code handle responsive layout without media queries?▼

VS Code uses a programmatic constraint-based layout system instead of CSS media queries. Views declare minimumSize and maximumSize, and SplitView or Grid distribute space using LayoutPriority, snap behavior, and ResizeObserver for container-aware sizing.

What CSS class naming conventions does VS Code use?▼

Major components use the monaco- prefix like .monaco-workbench, with modifier classes such as .vertical and state classes like .focused or .active. Feature-specific classes use kebab-case without a prefix, and CSS files are co-located with their TypeScript components.

Can I use !important in VS Code CSS?▼

No, new !important declarations are not allowed. Resolve cascade conflicts by increasing selector specificity with component or state-class prefixes instead. The only exception is shared focus-outline suppression using outline: 0 !important.

What spacing values are allowed in VS Code CSS?▼

Spacing must land on the design-system scale: 0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 36, or 40px, available as --vscode-spacing-* tokens. Off-scale values like 5px or 14px should snap to the nearest scale value, with ties rounding up.

Why is my codicon the wrong size in VS Code UI?▼

Codicons are only ever 16px or 12px, never intermediate values like 14px. For the compact 12px size, also swap to the glyph's Compact variant when one exists, since CSS font-size alone does not switch to the visually optimized compact glyph.

Related Skills

Explore More Software Engineering Skills→
THRISHAL12345THRISHAL12345

ux-css-layout

Fix VS Code CSS layout and truncation issues with co-located styling and ellipsis-safe flex behavior.

Community
Advanced
microsoftmicrosoft
188.5k

hygiene

Validate staged files against VS Code hygiene standards with the build/hygiene.ts script.

Official
Basic
microsoftmicrosoft
190.1k

ux-theming

Register colors, apply theme tokens, and enforce high-contrast compliance in VS Code widgets.

Official
Intermediate
jimehjimeh

ux-css-layout

Applies VS Code CSS conventions for layouts, sizing tokens, and text truncation patterns.

Community
Intermediate