mcpField
B
build-gpui-apps

build-gpui-apps

github.com/lassejlv开发69145 次安装4 周前更新
代码仓库

关于 build-gpui-apps

面向使用 GPUI 构建原生桌面应用的技能,指导选择 GPUI Kit 或上游 GPUI、实现界面行为并验证运行中的应用。强调核实 API、明确状态归属和无障碍交互。

主要功能

  1. 01框架选择与迁移指导
  2. 02GPUI Kit 配置和组件使用
  3. 03状态与任务归属模式
  4. 04设计与无障碍指导
  5. 05构建、交互和视觉验证

适用场景

  1. 01创建 GPUI 桌面应用
  2. 02为现有应用添加界面功能
  3. 03评估迁移到 GPUI Kit
  4. 04验证应用行为和视觉效果

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/lassejlv/skills --skill build-gpui-apps

安装后在 Claude Code 中输入/build-gpui-apps确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
spring.rs
assets/reference-app/
.gitignore
Cargo.lock
Cargo.toml
README.md
assets/reference-app/src/
main.rs
references/
accessibility-platform.md
apple-glass.md
architecture-state.md
async-performance.md
components-layout.md
references/gpui-kit/
conventions.md
design.md
references/gpui-kit/gpui/
action.md
async.md
context.md
element-advanced.md
element-api.md
element-best-practices.md
element-examples.md
element-id.md
element-patterns.md
element.md
entity-advanced.md
entity-api.md
entity-best-practices.md
entity-patterns.md
entity.md
event.md

详细介绍

构建 GPUI 应用

使用明确的状态所有权、无障碍交互,以及运行中应用的证据,构建原生桌面软件。建议将 GPUI Kit 作为应用入口,并在采用前征求用户同意。 GPUI Kit 重新导出 GPUI;它不会取代 GPUI 的渲染引擎。

此技能将 gpui-kit 和 gpui-kit-design-guides 合并为一个自包含的软件包。完整文档索引涵盖官方索引中的所有英文应用、Component、Base 和 Shell 页面。只阅读相关页面,不要一次读完整个文档包。

先选择框架

  1. 检查仓库说明、未提交的更改、清单、锁文件、当前导入项、入口点、主题、组件系统和支持的平台。使用 scripts/inspect_gpui_project.sh /path/to/project 生成只读清单。

  2. 遵从本次对话或项目中已明确作出的选择。现有的 gpui-kit 用法即为既定选择;不要反复询问。明确要求使用上游 GPUI,也是一项应尊重的选择。

  3. 对于没有既定选择的新应用,或计划从上游 GPUI 或单独接入的组件迁移时,在更改依赖或编写新的框架专用实现之前,先征求同意:

    我建议使用 GPUI Kit:它通过 gpui_kit 提供 GPUI,并包含组件、主题、资源和共享行为。使用 GPUI Kit(推荐),还是继续直接使用上游 GPUI?

    对于现有应用,请明确说明迁移会影响哪些依赖、导入路径、引导代码和测试。等待用户答复后再采用;沉默不代表同意。等待期间可以继续检查和独立规划。修复现有直接使用 GPUI 的应用中的特定问题,不需要迁移,也不需要重新决定框架。

  4. 选定 Kit 后,将 gpui-kit 用作 UI 技术栈依赖,并将 gpui_kit 用作导入根路径。不要仅为照搬旧示例而添加直接的 gpui、gpui-pre、gpui_platform、gpui-component 或 gpui-base 依赖。其他应用依赖照常处理;如果要托管 JavaScript 扩展,则需单独使用 gpui-shell。

  5. 如果选择上游 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.00.7.0 迁移与功能指南、项目版本管理阅读受影响的组件/Base/Shell 页面,并核实所选版本的源代码
状态、架构、上下文、事件、操作、焦点、任务编码指南、机制概览Entity、Context、Action、Task
控件、表单、数据、导航、聊天、图表、编辑器、停靠栏组件目录、系列约定具体的组件页面、应用配方
自定义设计系统或可复用行为Base、Base 原语与基础设施编码指南、设计指南
布局、样式、主题、排版、图标、图片、本地化样式、主题字体、资源、图片、I18N
窗口、覆盖层、持久化、文本/IME、剪贴板、菜单、拖放窗口、多窗口输入与窗口约定,以及具体的 Input/Dialog/Sheet/Menu 文档
无障碍、焦点、快捷键、平台约定无障碍、焦点、KeyBinding平台验收
动画、弹簧、存在状态、过渡、手势动画、Base 动效动效与输入约定
虚拟化、缓存、渲染、测量、性能视图缓存、FPS、VirtualList异步/性能约定、Element、Paint、Geometry
原生通知、操作系统扩展、嵌入式浏览器系统通知、原生扩展、WebViewApple 材质;承诺功能表现前先检查平台限制
JavaScript 扩展、权限、依赖项、宿主 APIShell、Shell 指南索引独立的 gpui-shell 依赖项、功能权限与沙箱限制
打包、签名、分发、更新、重启、恢复打包、自动更新生产环境验收、平台签名与软件包所有者规则
WebAssembly 或移动端目标WebAssembly、移动端遵循文档中说明的成熟度与平台限制;不要推断其与桌面端一致
单元、上下文或 UI 集成测试测试、测试机制测试/QA、视觉验证
将 Paper 作为更广泛应用开发的输入Paper 工作流、Paper MCP视觉验证
将单个 Paper 画面忠实转换为主要任务使用独立的 paper-to-gpui skill保留本项目选定的导入根路径和状态所有权
明确选择直接使用上游 GPUI项目版本管理、架构、组件/布局示例模式;这些示例针对较早固定的上游测试夹具

GPUI Kit 应用路径

确定框架选择后:

  1. 记录准确的 Kit 版本、匹配的 GPUI 快照、工具链、功能和平台。经审计的 0.7.0 版本将 GPUI 固定为 =0.3.7;升级时请使用版本迁移指南。捆绑网站中的依赖示例可能落后于正式版本(有些仍写着 0.6);请以版本清单为准,而非这些代码片段。快照并不意味着可以升级现有应用。
  2. 使用 use gpui_kit::*; 导入 GPUI API。从 gpui_kit::component 导入组件,从 gpui_kit::base 导入行为,从 gpui_kit::assets 导入资源,从 gpui_kit::platform 导入平台 API。部分保留的上游文档中展示了内部的 gpui、gpui_component 或 gpui_base 导入。在应用代码中,请将这些调整为经过验证的 Kit 再导出项;不要将内部依赖声明复制到应用中。
  3. 注册资源,在构造组件或窗口之前调用一次 gpui_kit::init(cx),并遵循固定版本的窗口辅助函数约定。当前的 gpui_kit::open_window 接受一个内容实体闭包并提供 Root;当前的 Root 会渲染覆盖层。不要重复包装,也不要再次渲染覆盖层。较旧版本在迁移前需要先通过源代码确认。
  4. 使用完整的当前引导流程和保留状态方案。将输入框/选择器状态实体及订阅保留在其所有者中;绝不要在渲染时重新创建它们。
  5. 使用相关方法时,导入实际的扩展 trait,例如 ButtonVariants、ActiveTheme、Sizable 或 WindowExt。组件并不会自动支持所有 trait。
  6. 优先选择最小且正确的单元:普通元素组合、用于可复用值组件的 RenderOnce、用于保留独立状态的 Entity<T>,仅在现有层无法提供所需行为时才使用自定义 Element/canvas 或原生桥接。
  7. 实现一个垂直切片:领域操作 → 动作/事件 → 实体更新 → 通知 → 渲染状态 → 指针/键盘/焦点行为 → 错误/取消处理 → 有意义的测试。
  8. 在预期生命周期内保留 Task 和 Subscription 句柄。适当使用弱实体捕获,通过后台工作线程处理阻塞任务,并在前台编排 UI 更新。拒绝过时结果。
  9. 在自定义绘制或弹簧动画之前,优先使用现有设计令牌/组件和有文档记录的动效。保留对减少动态效果、减少透明度、对比度以及不依赖颜色区分等偏好的支持,并提供不透明的材质回退方案。

生产与平台工作

对于入门项目,请结合 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 中的提示词,并分别审核评分标准。在确认合并完成前,还请运行仓库的技能/链接验证器、文档覆盖率检查和脚本冒烟测试。

评论

支持 Markdown