关于 build-gpui-apps
面向使用 GPUI 构建原生桌面应用的技能,指导选择 GPUI Kit 或上游 GPUI、实现界面行为并验证运行中的应用。强调核实 API、明确状态归属和无障碍交互。
主要功能
- 01框架选择与迁移指导
- 02GPUI Kit 配置和组件使用
- 03状态与任务归属模式
- 04设计与无障碍指导
- 05构建、交互和视觉验证
适用场景
- 01创建 GPUI 桌面应用
- 02为现有应用添加界面功能
- 03评估迁移到 GPUI Kit
- 04验证应用行为和视觉效果
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ lassejlv/ skills --skill build-gpui-apps安装后在 Claude Code 中输入/build-gpui-apps确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
agents/openai.yamlassets/spring.rsassets/reference-app/.gitignoreCargo.lockCargo.tomlREADME.mdassets/reference-app/src/main.rsreferences/accessibility-platform.mdapple-glass.mdarchitecture-state.mdasync-performance.mdcomponents-layout.mdreferences/gpui-kit/conventions.mddesign.mdreferences/gpui-kit/gpui/action.mdasync.mdcontext.mdelement-advanced.mdelement-api.mdelement-best-practices.mdelement-examples.mdelement-id.mdelement-patterns.mdelement.mdentity-advanced.mdentity-api.mdentity-best-practices.mdentity-patterns.mdentity.mdevent.md详细介绍
构建 GPUI 应用
使用明确的状态所有权、无障碍交互,以及运行中应用的证据,构建原生桌面软件。建议将 GPUI Kit 作为应用入口,并在采用前征求用户同意。 GPUI Kit 重新导出 GPUI;它不会取代 GPUI 的渲染引擎。
此技能将 gpui-kit 和 gpui-kit-design-guides 合并为一个自包含的软件包。完整文档索引涵盖官方索引中的所有英文应用、Component、Base 和 Shell 页面。只阅读相关页面,不要一次读完整个文档包。
先选择框架
-
检查仓库说明、未提交的更改、清单、锁文件、当前导入项、入口点、主题、组件系统和支持的平台。使用
scripts/inspect_gpui_project.sh /path/to/project生成只读清单。 -
遵从本次对话或项目中已明确作出的选择。现有的
gpui-kit用法即为既定选择;不要反复询问。明确要求使用上游 GPUI,也是一项应尊重的选择。 -
对于没有既定选择的新应用,或计划从上游 GPUI 或单独接入的组件迁移时,在更改依赖或编写新的框架专用实现之前,先征求同意:
我建议使用 GPUI Kit:它通过
gpui_kit提供 GPUI,并包含组件、主题、资源和共享行为。使用 GPUI Kit(推荐),还是继续直接使用上游 GPUI?对于现有应用,请明确说明迁移会影响哪些依赖、导入路径、引导代码和测试。等待用户答复后再采用;沉默不代表同意。等待期间可以继续检查和独立规划。修复现有直接使用 GPUI 的应用中的特定问题,不需要迁移,也不需要重新决定框架。
-
选定 Kit 后,将
gpui-kit用作 UI 技术栈依赖,并将gpui_kit用作导入根路径。不要仅为照搬旧示例而添加直接的gpui、gpui-pre、gpui_platform、gpui-component或gpui-base依赖。其他应用依赖照常处理;如果要托管 JavaScript 扩展,则需单独使用gpui-shell。 -
如果选择上游 GPUI,请使用现有固定版本的上游 API,并遵循版本管理路径。不要暗中迁移,也不要混用不兼容的 GPUI 类型体系。
上述选择适用于创建或采用应用,而不是每次普通编辑都要征求许可。遵从先前的授权和用户要求的范围。
核心约定
- 目标锁文件和源代码是 API 的权威依据。绝不要从 React、CSS、旧版 GPUI 或其他版本的示例中臆造方法。使用前请核实构造函数、扩展 Trait、功能门控、回调和重新导出内容。
- 保留现有命令、快捷键、状态、持久化行为、窗口行为和无关工作。视觉方面的要求并不意味着可以重写架构。
- 做出相关决策前,先阅读实际具有规范效力的指南;摘要和组件目录不能替代它们。
- 将保留的状态、任务、订阅、焦点和标识放在持久的所有者中。确保渲染过程具有确定性、开销低且不执行阻塞式 I/O。
- 为重复控件使用基于领域的 ID,为呈现使用主题令牌,并支持键盘操作和可见焦点,同时明确显示加载、错误和禁用状态。
- 优先使用 Kit 组件和 Base 行为,再考虑自行创建控件、动效、虚拟列表、叠加层或原生桥接。先核实相应能力确实存在。
- 分别验证构建、交互、启动和视觉效果。报告所有未经验证的平台或运行时路径。绝不要将 UI 栅格化来伪造保真度。
- 打包和更新安装属于应用程序与发行流程的职责;文档不是内置的安装器或更新器 API。
先阅读指南
| 指南 | 阅读时机 |
|---|---|
| 设计指南 | 在进行可见变更之前:组件选择、布局、间距、层级、颜色、密度、状态、叠加层、动效或文案。新建屏幕或重新设计时,请通读全文;其他情况请阅读“设计理念”“从任务出发”以及相关章节。 |
| 编码指南 | 在确定架构、所有权、公共 API、命名或测试方案之前。新建 crate、模块或功能时,请通读全文;其他情况请阅读“架构概览”“编码 Agent 规则”以及相关章节。 |
| 设计章节索引与不可妥协事项 | 用于浏览整合后的设计技能及其评审清单。 |
| 组件系列 | 用于选择构造函数、状态所有者、回调和布局约定;然后阅读相应的组件页面。 |
| 组件与 GPUI 机制 | 用于浏览整合后的组件目录、编码章节索引,以及更深入的实体、元素和测试参考资料。 |
对于可见功能,先阅读设计指南,再阅读编码指南。最后完成两份相关的
评审清单。在应用内执行命令时使用 Button,外部 URL 或电子邮件地址使用
Link;使用语义化主题令牌和基于 rem 的间距;让状态清晰可见;定义叠加层的
关闭方式和焦点恢复;在确认文案中注明对象和操作动词。这些只是最低要求,
不能替代指南。
为任务选择路线
以下所有链接均指向随附的参考资料。 完整索引涵盖所有页面, 包括此精简路由器中未列出的组件和原语。
| 任务 | 优先阅读 | 相关时也阅读 |
|---|---|---|
| 安装、选择功能或迁移导入 | 安装、入门指南、项目版本管理 | 用法、生产环境起步指南 |
| 将 GPUI Kit 升级到 0.7.0 | 0.7.0 迁移与功能指南、项目版本管理 | 阅读受影响的组件/Base/Shell 页面,并核实所选版本的源代码 |
| 状态、架构、上下文、事件、操作、焦点、任务 | 编码指南、机制概览 | Entity、Context、Action、Task |
| 控件、表单、数据、导航、聊天、图表、编辑器、停靠栏 | 组件目录、系列约定 | 具体的组件页面、应用配方 |
| 自定义设计系统或可复用行为 | Base、Base 原语与基础设施 | 编码指南、设计指南 |
| 布局、样式、主题、排版、图标、图片、本地化 | 样式、主题 | 字体、资源、图片、I18N |
| 窗口、覆盖层、持久化、文本/IME、剪贴板、菜单、拖放 | 窗口、多窗口 | 输入与窗口约定,以及具体的 Input/Dialog/Sheet/Menu 文档 |
| 无障碍、焦点、快捷键、平台约定 | 无障碍、焦点、KeyBinding | 平台验收 |
| 动画、弹簧、存在状态、过渡、手势 | 动画、Base 动效 | 动效与输入约定 |
| 虚拟化、缓存、渲染、测量、性能 | 视图缓存、FPS、VirtualList | 异步/性能约定、Element、Paint、Geometry |
| 原生通知、操作系统扩展、嵌入式浏览器 | 系统通知、原生扩展、WebView | Apple 材质;承诺功能表现前先检查平台限制 |
| JavaScript 扩展、权限、依赖项、宿主 API | Shell、Shell 指南索引 | 独立的 gpui-shell 依赖项、功能权限与沙箱限制 |
| 打包、签名、分发、更新、重启、恢复 | 打包、自动更新 | 生产环境验收、平台签名与软件包所有者规则 |
| WebAssembly 或移动端目标 | WebAssembly、移动端 | 遵循文档中说明的成熟度与平台限制;不要推断其与桌面端一致 |
| 单元、上下文或 UI 集成测试 | 测试、测试机制 | 测试/QA、视觉验证 |
| 将 Paper 作为更广泛应用开发的输入 | Paper 工作流、Paper MCP | 视觉验证 |
| 将单个 Paper 画面忠实转换为主要任务 | 使用独立的 paper-to-gpui skill | 保留本项目选定的导入根路径和状态所有权 |
| 明确选择直接使用上游 GPUI | 项目版本管理、架构、组件/布局 | 示例模式;这些示例针对较早固定的上游测试夹具 |
GPUI Kit 应用路径
确定框架选择后:
- 记录准确的 Kit 版本、匹配的 GPUI 快照、工具链、功能和平台。经审计的 0.7.0 版本将 GPUI 固定为
=0.3.7;升级时请使用版本迁移指南。捆绑网站中的依赖示例可能落后于正式版本(有些仍写着0.6);请以版本清单为准,而非这些代码片段。快照并不意味着可以升级现有应用。 - 使用
use gpui_kit::*;导入 GPUI API。从gpui_kit::component导入组件,从gpui_kit::base导入行为,从gpui_kit::assets导入资源,从gpui_kit::platform导入平台 API。部分保留的上游文档中展示了内部的gpui、gpui_component或gpui_base导入。在应用代码中,请将这些调整为经过验证的 Kit 再导出项;不要将内部依赖声明复制到应用中。 - 注册资源,在构造组件或窗口之前调用一次
gpui_kit::init(cx),并遵循固定版本的窗口辅助函数约定。当前的gpui_kit::open_window接受一个内容实体闭包并提供Root;当前的Root会渲染覆盖层。不要重复包装,也不要再次渲染覆盖层。较旧版本在迁移前需要先通过源代码确认。 - 使用完整的当前引导流程和保留状态方案。将输入框/选择器状态实体及订阅保留在其所有者中;绝不要在渲染时重新创建它们。
- 使用相关方法时,导入实际的扩展 trait,例如
ButtonVariants、ActiveTheme、Sizable或WindowExt。组件并不会自动支持所有 trait。 - 优先选择最小且正确的单元:普通元素组合、用于可复用值组件的
RenderOnce、用于保留独立状态的Entity<T>,仅在现有层无法提供所需行为时才使用自定义Element/canvas 或原生桥接。 - 实现一个垂直切片:领域操作 → 动作/事件 → 实体更新 → 通知 → 渲染状态 → 指针/键盘/焦点行为 → 错误/取消处理 → 有意义的测试。
- 在预期生命周期内保留
Task和Subscription句柄。适当使用弱实体捕获,通过后台工作线程处理阻塞任务,并在前台编排 UI 更新。拒绝过时结果。 - 在自定义绘制或弹簧动画之前,优先使用现有设计令牌/组件和有文档记录的动效。保留对减少动态效果、减少透明度、对比度以及不依赖颜色区分等偏好的支持,并提供不透明的材质回退方案。
生产与平台工作
对于入门项目,请结合 production-starter.md 和 Kit 打包/自动更新指南。根据产品需求,确定产品身份、应用/软件包 ID、支持的操作系统/架构、工具链、锁文件、可观测的启动过程、存储/迁移、密钥、CI、分发和更新责任归属。保持小型应用的精简;当复杂功能的责任归属需要拆分时,按能力划分功能。
direct-GPUI 入门项目是参考资料,不是 Kit 应用的依赖模板。不要将其中的 gpui 或 gpui_platform 声明复制到 Kit 路径中。
对于 Apple 素材,优先选择现有组件,然后选择受支持的原生材质、忠实的跨平台近似方案,最后采用不透明回退方案。针对操作系统可用性添加保护,并保持桥接层精简。不要将整窗模糊或半透明矩形描述为原生的逐控件 Liquid Glass。
对于更新,应与安装程序的责任归属相匹配:完整的已签名 macOS 软件包、Windows 安装程序、Linux 软件包管理器,或明确标注的便携式安装。验证所选版本、目标平台、完整载荷、真实性、重启和恢复行为。切勿将替换单个二进制文件视为适用于所有软件包格式的更新策略。
如果更广泛的工作涉及 Paper 输入,请确认确切的实时文件/画板,采集截图/树结构/样式/字体/资源,然后在保持责任归属的同时实现几何布局、排版、绘制和交互。确保比较时逻辑边界一致。如果无法使用 Paper,请说明提取限制并继续独立工作;不要臆造缺失的设计。
验证并报告
运行仓库原生检查;根据所属 crate 调整以下基线:
cargo fmt --check
cargo check -p <owning-crate> --locked
cargo test -p <owning-crate> --locked
cargo clippy -p <owning-crate> --all-targets -- -D warnings
对于 Kit UI 行为,请使用 #[gpui_kit::test] 和 gpui_kit::test,并采用 Testing 中的功能配置。UI 集成测试会在无头窗口中渲染真实组件、模拟输入,并断言结果、焦点、状态和布局。使用生产视图;仅调用私有方法并不能测试 UI 流程。对于直接使用上游 GPUI 的情况,请采用该固定版本的 #[gpui::test] 配置。
启动真实应用并测试任务涉及的交互路径,包括调整大小、滚动、焦点、浅色/深色、非活动窗口、缩放系数和辅助功能偏好设置。若涉及文本/IME、剪贴板、菜单、窗口或更新程序路径,请验证这些路径。截图和无头测试可补充原生运行时检查。在所声明支持的发布平台上安装并升级真实构件;仅交叉编译不足以作为证明。
报告所选技术栈/版本、变更边界、实际运行的检查、可见效果/交互结果,以及未解决的平台或发布限制。按用户影响和证据对审查发现排序;不要将风格偏好说成正确性缺陷。
现有的 assets/reference-app 是一个在记录的 Zed 修订版本上通过编译检查的 直接上游 GPUI 示例,保留供所选路径使用。scripts/validate_reference_app.sh 验证的是该示例,而非 Kit。不要将其清单复制到 Kit 应用中,也不要声称它能验证随附的 Kit 文档。
维护此技能
source ledger 区分了当前的 Kit 快照、合并后的技能和较早的上游 fixture。更新文档时,请保留来源归属信息和许可证声明。
python3 scripts/sync_gpui_kit_docs.py # refresh all indexed English pages
python3 scripts/sync_gpui_kit_docs.py --check # offline coverage and hash check
来源索引保留了翻译链接;图片仍为远程图片。如果 API 存在差异,请检查当前官方页面和锁定的来源。如果仓库说明要求使用 Context7,请先用 library 解析官方库,再用 docs 获取特定概念;每次查询都应聚焦于单一主题。
进行重大更改后,请使用新的 Agent 运行 forward-tests.md 中的提示词,并分别审核评分标准。在确认合并完成前,还请运行仓库的技能/链接验证器、文档覆盖率检查和脚本冒烟测试。