skills.rest
oligamiq
oligamiqCOMMUNITY
Explore all skills by this author →
GitHub

ux-css-layout

Applies VS Code CSS conventions for layout, naming, sizing, and text truncation.

Updated Apr 22, 2024
Search Tags:#vscode#layout#css#styling#design-tokens#text-overflow#splitview
One-click install
npx skills add https://github.com/oligamiq/fast-explorer --skill ux-css-layout-oligamiq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-css-layout
Source: https://github.com/oligamiq/fast-explorer/tree/main/.agents/skills/ux-layout
Command: npx skills add https://github.com/oligamiq/fast-explorer --skill ux-css-layout-oligamiq

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 primitives, 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, state classes, and selector quality rules including the no-new-!important policy. - Programmatic Layout Patterns: Documents SplitView, Grid, and scrollable element APIs for constraint-based responsive 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 resizable header label, use this Skill to apply the correct ellipsis CSS, hover tooltip for truncated text, and token-based spacing so the component passes stylelint and review. ## Quick Start Ask the AI to write or review CSS for a VS Code workbench component following the ux-css-layout conventions, including ellipsis handling and design 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 CSS flex containers?▼

Flex text truncation requires four properties: set min-width: 0 on the flex child plus overflow: hidden, white-space: nowrap, and text-overflow: ellipsis. Without min-width: 0, the flex item refuses to shrink below its 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, SplitView and Grid distribute space using LayoutPriority, and ResizeObserver handles container-aware sizing.

What are the VS Code design-system size tokens for CSS?▼

VS Code exposes --vscode-* CSS variables for spacing (0-40px scale), corner radius (xSmall through circle), font size and weight (regular 400 and semiBold 600 only), codicon sizes (16px or 12px), and a single 1px stroke thickness. Tokens must exist in vscode-known-variables.json or stylelint fails.

Can I use !important in VS Code CSS?▼

New !important declarations are not allowed in VS Code CSS. Resolve cascade conflicts by increasing selector specificity with component or state-class prefixes instead. The only exception is outline: 0 !important for shared focus-indicator suppression.

Why is my text clipping without an ellipsis in a resizable panel?▼

Clipped text without ellipsis happens when overflow: hidden is set without text-overflow: ellipsis and white-space: nowrap. All three properties are required together, and truncated text must also expose the full string via a hover tooltip.

Related Skills

Explore More Software Engineering Skills→
sf-bccasf-bcca

scaffold-flat

Scaffold React components and co-located tests in flat project layouts.

Community
Intermediate
KevinHuangIsLearningKevinHuangIsLearning
10

ux-theming

Registers VS Code theme colors and styles widgets with theme tokens and high-contrast support.

Community
Intermediate
posit-devposit-dev
4.2k

ux-theming

Registers VS Code theme colors and styles widgets with theme tokens and high-contrast support.

Official
Intermediate
hb9397hb9397

create-prototype

Generates standalone interactive HTML prototypes with Tailwind CSS from requirement IDs and descriptions.

Community
Advanced