VS Code CSS 布局规范
用 VS Code 规范构建稳健的 CSS 布局与文本截断体验
该技能仅提供 CSS、TypeScript 布局和命名建议，不要求网络、凭据、敏感数据或破坏性操作；明确禁止新增 !important，并强调最小选择器范围。扣 5 分：未说明用户确认、变更回滚、依赖安全或数据流；来源归属主要依赖仓库元数据，技能自身没有版本化出处。
文档结构清晰，包含 SplitView、Grid、滚动、弹性布局和文本截断示例，也给出若干失败预防规则。扣 13 分：静态材料没有针对该技能关键路径的测试、执行结果或异常输入反馈；部分断言较绝对，例如 VS Code 不使用 CSS media queries，无法仅凭该文件验证。
描述明确覆盖编写 CSS、构建布局和修复文本截断，且列出适用组件与反模式。扣 5 分：未明确非适用场景、触发优先级、输入输出边界或版本兼容范围；未提供中文本地化或中国大陆网络环境适配说明。
信息组织良好，包含分节、表格、代码示例、关键文件路径、限制性规则和设计令牌说明；仓库 README、LICENSE 和 package.json 提供 MIT、Microsoft 归属及持续更新背景。扣 7 分：技能自身没有版本、变更日志、维护责任、更新流程、安装说明或 FAQ，且依赖的 canonical instruction 文件未随证据提供。
针对 VS Code CSS 布局工作的建议较具体，包含可直接复用的代码模式，如 min-width: 0、ellipsis、SplitView 和 token 使用，核心任务大体可完成。扣 9 分：没有代表性输出、实际修复结果或对比替代方案的静态验证；部分规则仍需开发者结合源码判断，可能需要较多复核。
技能指向 SplitView、Grid、Scrollbar、全局样式和设计令牌等可审计路径，仓库还提供通用 CI 与测试材料。扣 7 分：提供的 CI/测试并未证明该技能的关键路径，缺少技能专属测试、引用定位、交叉验证和静态事实与推断的明确分离；按静态校准不得超过 5 分。
- 该评估仅基于提供的静态文件，未执行示例、构建、lint 或测试。
- 使用前应核对目标 revision 中所引用的源码、设计令牌清单和实际 CSS 约定；文档中的绝对化规则可能随版本变化。
- 该技能未说明中文本地化、RTL、窄窗口及不同 VS Code 构建环境下的边界行为。
它能做什么 & 适用场景
这是一个面向 VS Code 源码开发的 CSS 与布局规范技能，覆盖样式文件组织、类名、标准尺寸、设计系统尺寸令牌和选择器质量。它说明如何使用 SplitView、Grid、可滚动元素以及基于约束的响应式布局，而不是 CSS 媒体查询。它还规定了文本省略号、Flex 子项收缩和悬停查看完整文本的处理方式。适合需要修改 VS Code 工作台或基础 UI 样式的开发者，但它只聚焦 CSS 与布局指导，不包含独立的构建或测试工具。
它指导开发者检查并修改与 TypeScript 组件同目录的 CSS 文件，使用 monaco- 组件前缀、状态类和 kebab-case 功能类名。它提供 SplitView、Grid、SmoothScrollableElement、DomScrollableElement 和 ScrollableElement 的选择与示例，并说明如何设置视图尺寸约束、布局优先级、吸附关闭和 onDidChange。它要求可截断文本同时使用 overflow: hidden、white-space: nowrap 和 text-overflow: ellipsis，在 Flex 子项上设置 min-width: 0，并为自定义截断文本配置 IHoverService.setupDelayedHover()。它还指导开发者优先使用已注册的 --vscode-* 尺寸、圆角、字体、Codicon 和描边令牌，并列出相关源码文件。
- 正在修改 VS Code 工作台面板、标题或视图时，需要把 CSS 放在正确的组件目录中。
- 正在构建带可拖拽 sash 的水平或垂直分栏界面，需要选择并配置 SplitView。
- 正在实现编辑器组等二维视图布局，需要使用 Grid 管理视图。
- 正在修复列表、树、标签页、状态栏或通知文本被截断但没有省略号的问题。
- 正在制作窄容器中的响应式面板，需要用 minimumSize、maximumSize、LayoutPriority 和 snap 管理空间。
- 正在调整 VS Code UI 的间距、圆角、字体、图标或边框，希望遵循设计系统尺寸令牌。
优缺点一览
- 覆盖从 CSS 文件组织、命名和选择器质量到 SplitView、Grid、滚动、响应式约束和文本溢出的完整工作流。
- 对省略号三属性组合、Flex 子项 `min-width: 0` 和完整文本悬停访问提出了明确要求。
- 提供 VS Code 设计系统的间距、圆角、字体、Codicon 和描边令牌决策规则。
- 给出关键源码文件和 TypeScript API 示例，便于在 VS Code 源码中定位实现。
- 范围限定在 VS Code CSS 与布局规范，不能替代通用前端框架、浏览器兼容性或产品设计指南。
- 资料没有提供独立安装命令、构建流程、测试套件或自动化校验脚本。
- 部分规则依赖 VS Code 源码中的具体 API、目录结构和已注册设计令牌，不适合未经调整地用于其他项目。
- 技能本身不执行布局修改或测试；它提供的是指导、示例和约束。
如何安装
该技能位于 microsoft/vscode 仓库的 .github/skills/ux-css-layout/SKILL.md。提供的资料没有说明单独安装或复制技能的命令；README 只说明整个仓库是 Code - OSS，并采用 MIT 许可证。若使用已支持 Agent Skills 的客户端，应按该客户端的技能安装方式提供包含此路径的仓库内容，具体安装步骤在资料中未记录。
如何使用
在包含该技能的 Agent Skills 客户端中，提出与 VS Code CSS 或布局相关的具体任务，例如："请按 ux-css-layout 规范修复这个 Flex 行中标签无法显示省略号的问题，并为完整文本添加悬停提示。" 处理 VS Code 源码时，可根据技能中的路径检查 src/vs/base/browser/ui/splitview/splitview.ts、src/vs/base/browser/ui/grid/grid.ts、src/vs/base/browser/ui/scrollbar/scrollableElement.ts 和 src/vs/workbench/browser/media/style.css。资料没有规定独立 CLI、构建命令或自动验证流程。