Applies VS Code CSS conventions for layouts, sizing tokens, and text truncation.
npx skills add https://github.com/Tyrizx/Tyrizx --skill ux-css-layout-tyrizx
Please help me install this Agent Skill. Skill: ux-css-layout Source: https://github.com/Tyrizx/Tyrizx/tree/main/.github/skills/ux-css-layout Command: npx skills add https://github.com/Tyrizx/Tyrizx --skill ux-css-layout-tyrizx
monaco- prefixed class naming, standard sizes, and bans new !important declarations. - Programmatic Layout Guidance: Covers SplitView, Grid, and scrollable element APIs plus the constraint-based responsive layout model used instead of media queries. - Text Overflow & Design Tokens: Provides the required ellipsis pattern with flex min-width: 0 fixes, hover tooltips for truncated text, and the --vscode-* size token scales 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 on-scale design tokens. ## Quick Start Use the ux-css-layout skill to write the CSS for my new workbench view pane so the title truncates correctly and spacing follows the design tokens.High-intent search queries and answers about installing and using this skill.
Text truncation in flexbox requires overflow: hidden, white-space: nowrap, and text-overflow: ellipsis on the label, plus min-width: 0 on the flex child. Without min-width: 0, the flex item refuses to shrink below its content width and the ellipsis never triggers.
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.
VS Code prefixes major component classes with monaco-, such as .monaco-workbench and .monaco-split-view2, with modifier and state classes like .vertical, .focused, and .active. Feature-specific classes use kebab-case without a prefix, and CSS files are co-located with their TypeScript components.
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.
Every --vscode-* size variable must be registered in build/lib/stylelint/vscode-known-variables.json under the sizes array, alphabetically sorted. Adding a new token requires updating both baseSizes.ts and that JSON file, otherwise stylelint and hygiene checks fail.
Use SplitView for one-dimensional layouts with draggable sashes in a single orientation, such as sidebar panels. Use Grid for two-dimensional layouts like editor groups, where views are added relative to a reference view in a given direction.
NITRR-OfficialGuide developers through CampusOS local environment setup with Node.js, pnpm, and MongoDB.
compozyReviews and fixes UI code for keyboard, ARIA, form, and screen-reader accessibility.
posit-devRegisters VS Code theme colors and styles widgets with theme tokens and high-contrast support.
auxi-wardrobeGenerate accessible, responsive UIs with shadcn/ui and Tailwind CSS.