ux-css-layout

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

Updated Apr 14, 2026

Search Tags:#vscode #layout #css #design tokens #text-overflow #splitview #styling conventions

One-click install

npx skills add https://github.com/jimeh/hucode --skill ux-css-layout-jimeh

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: ux-css-layout
Source: https://github.com/jimeh/hucode/tree/main/.github/skills/ux-css-layout
Command: npx skills add https://github.com/jimeh/hucode --skill ux-css-layout-jimeh

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. Without guidance, contributors produce off-scale spacing values, broken ellipsis truncation, new `!important` declarations, and layouts that ignore the programmatic SplitView/Grid constraint system. ## Core Features & Use Cases - CSS Conventions & Organization: Enforces co-located CSS files, `monaco-` prefixed class naming, standard part sizes, and selector quality rules including the ban on new `!important` declarations. - Programmatic Layout Patterns: Documents SplitView, Grid, and scrollable element APIs with code examples for building resizable, constraint-based layouts without CSS media queries. - Text Overflow & Design Tokens: Provides the required three-property ellipsis pattern, flex `min-width: 0` fixes, hover tooltip requirements, and the full `--vscode-*` design-system size token ramps for spacing, radius, font, codicon, and stroke values. - Use Case: When adding a new view pane header with a truncated title label, use this Skill to write the flex row CSS with `min-width: 0`, snap padding to the spacing scale, and wire up a delayed hover showing the full text. ## Quick Start Ask the AI to write or review CSS for a VS Code workbench component following the ux-css-layout conventions, such as creating a truncating label inside a resizable sidebar row.

Frequently Asked Questions about ux-css-layout

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

FAQPage Schema

Why is my codicon the wrong size at 12px?▼

Codicons are only ever 16px or 12px. At the compact 12px size you should also swap the registered glyph to its *Compact variant, since CSS font-size alone scales the icon without switching to the visually optimized compact glyph.