设计与前端 exporeact-nativeapple-higsemantic-colorssf-symbolsresponsive-layout

Expo 原生界面设计指南

帮助 Expo 开发者构建符合 Apple 设计规范、具备原生体验的响应式界面。

FollowSkills 评估 · FSRS-2.0
不推荐
51/ 100 五分制 2.6 / 5
信任安全17 / 25 · 3.4/5

内容未显示恶意代码、凭证窃取、隐蔽外传或破坏性默认操作;相机、麦克风、媒体库权限请求有一定说明,且仓库 README 表示遥测默认关闭。扣分在于缺少统一的用户确认、数据流边界、失败回滚和依赖安全说明,媒体示例还使用远程资源。

可靠稳定5 / 20 · 1.3/5

覆盖面广且多数示例结构清晰,但存在明显自相矛盾:正文禁止 Picker 和 expo-symbols,controls.md 却示例化 Picker,icons.md 却使用 expo-symbols;Expo Go、SDK 和新架构兼容性说明也不完整。静态阅读无关键路径测试或异常反馈证据,因此限定在10分以下。

适用触发10 / 15 · 3.3/5

目标用户和主要场景明确,且声明路由应使用 expo-router;引用目录按动画、控件、媒体、存储等主题划分。扣分在于缺少明确的输入输出、非适用范围和触发边界,平台与 SDK 条件分散,未提供中文使用支持或中国大陆网络可达性说明。

规范维护9 / 15 · 3.0/5

有 front matter、版本号、MIT 许可、分主题参考文档和代码示例,信息架构基本清楚。扣分在于没有变更日志、明确维护责任或更新路径;依赖安装说明、故障排查、已知限制和版本兼容矩阵不足,且文档内部存在命名与规范冲突。

有效结果6 / 15 · 2.0/5

对构建原生感 Expo 界面提供了可直接改写的颜色、控件、动画、媒体、存储和视觉效果片段,核心任务价值明确。扣分在于若干建议或示例可能过时、互相冲突或依赖特定 SDK/平台,缺少静态之外的代表性结果验证,使用前仍需较多人工核对。

证据核验4 / 10 · 2.0/5

证据主要是版本化仓库中的 SKILL.md、参考文档、README、许可证和有限的 CI 检查;README 明确 Expo 文档、CLI 和 EAS CLI 才是事实来源。扣分在于 CI 仅检查描述/版本限制,不覆盖该技能的代码建议,未提供第三方复现、测试套件或关键断言,因此不超过静态上限5分。

证据充分度: 评估于 2026年7月20日 审查版本 8bd359f8a44d
使用前请注意
  • 修复或明确 Picker、expo-symbols、expo-image 与 expo-router 相关规则之间的冲突,并按 Expo SDK/平台标注兼容性。
  • 在使用相机、麦克风、媒体库、远程媒体或存储敏感数据时,补充权限确认、数据流、错误处理和恢复策略。
  • 补充依赖安装、故障排查、已知限制、维护责任、更新路径和中文/中国大陆网络环境说明。
查看完整评分方法 →

这个 Skill 能做什么,适合哪些场景?

Expo Native UI 是一个开源 Agent Skill,用于指导 AI agent 构建原生感的 Expo 屏幕。它涵盖 Apple HIG、语义颜色、原生控件、SF Symbols、媒体、动画、视觉效果、渐变、存储和响应式布局。技能明确将路由与导航交给独立的 expo-router skill。它还指导开发者优先使用 Expo Go,并仅在需要自定义原生代码时创建自定义构建。

指导 agent 查阅动画、控件、渐变、图标、媒体、存储、视觉效果和 WebGPU/Three.js 参考资料;编写符合 Expo 与 React Native 规范的界面代码;使用 npx expo start 启动应用并优先通过 Expo Go 测试;在本地 Expo 模块、Apple targets、Expo Go 不支持的第三方原生模块或无法由 app.json 表达的原生配置存在时,使用 npx expo run:ios、npx expo run:android 或 eas build。

  1. 正在开发 Expo 应用、希望界面更贴近 iOS 原生体验的 React Native 开发者。
  2. 需要语义颜色、深色模式适配、原生控件或 SF Symbols 的移动端团队。
  3. 需要加入动画、手势、媒体、模糊或液态玻璃效果的 Expo 项目。
  4. 希望先用 Expo Go 快速验证界面、仅在必要时进行原生构建的开发者。

这个 Skill 有哪些优点和局限?

优点
  • 覆盖界面样式、颜色、控件、图标、动画、媒体、存储和视觉效果等常见 Expo UI 工作。
  • 包含明确的 Expo Go 优先流程,可减少不必要的自定义构建。
  • 提供具体的库选择和弃用库规避建议。
  • MIT 许可,并由 Expo 官方团队维护的技能集合提供。
局限
  • 只覆盖 expo-native-ui;路由和导航不在本技能范围内。
  • SKILL.md 未提供测试套件、自动验证流程或目标平台兼容性矩阵。
  • 部分功能依赖特定 SDK、原生模块或新架构,例如 CSS 渐变要求 New Architecture。
  • README 的安装与更新说明面向整个 23 技能集合,而非本技能单独安装。

如何安装这个 Skill?

README 记录的是整个 expo/skills 集合的安装方式。使用 Skills CLI:npx skills@latest add expo/skills --skill '*';或在 Codex 中安装集合插件:codex plugin add expo@openai-curated。README 未提供仅安装 expo-native-ui 的专用命令。

如何使用这个 Skill?

将技能安装到你的 agent 后,提出具体的 Expo UI 任务,例如:"Build a native-feeling Expo screen with semantic colors, native controls, SF Symbols, and responsive layout." 涉及 routes、links、stacks、tabs、modals、sheets 或 headers 时,应同时使用 expo-router skill。

这个 Skill 与同类方案有什么区别?

与 expo-router skill 的边界清晰:expo-native-ui 负责界面样式和原生 UI 能力,expo-router 负责路由与导航。与直接运行自定义 iOS/Android 构建相比,它建议先使用 Expo Go,仅在明确需要原生代码或配置时构建。

常见问题

这个技能是否包含路由和导航?
不包含。routes、links、stacks、tabs、modals、sheets 和 headers 应使用 expo-router skill。
是否必须创建自定义开发构建?
不一定。技能要求先运行 npx expo start 并在 Expo Go 中测试;只有使用本地 Expo 模块、Apple targets、Expo Go 不支持的第三方原生模块或无法由 app.json 表达的原生配置时才需要自定义构建。
它是否需要付费的 EAS 服务?
技能本身的界面指导不声明必须使用付费服务;当确实需要时,SKILL.md 提到可使用 eas build。
它适合哪些项目?
适合使用 Expo 和 React Native 构建移动界面的项目,尤其是重视原生视觉、响应式布局和 Apple HIG 的团队。

同仓库的其他 Skills

均来自 expo/skills

开发与工程

Expo 原生 UI 构建助手

用 @expo/ui 在 Expo 中构建跨平台原生界面。

开发与工程

Expo 棕地集成助手

帮助团队将 Expo 和 React Native 增量集成到现有的原生 iOS 或 Android 应用中。

开发与工程

Expo 项目结构指南

为全新的 Expo Router 应用建立清晰、可扩展的文件结构。

自动化与运维

EAS Observe 性能观测助手

帮助 Expo 团队接入、查询并解读生产环境中的启动、导航和自定义事件性能指标。

开发与工程

Expo 数据请求指南

为 Expo 应用提供从 API 请求到缓存、离线与身份验证的网络开发指导。

开发与工程

Expo 技能反馈

帮助用户提交 Expo 技能或框架反馈,并管理匿名使用遥测。

开发与工程

Expo Web 转原生迁移指南

将现有 React 网站逐屏迁移为可发布的 Expo 原生应用。

开发与工程

Expo 集成示例助手

用 Expo 官方示例快速适配第三方库与服务。

开发与工程

Expo SDK 升级助手

帮助 Expo 团队升级 SDK、处理依赖冲突并完成兼容性清理。

开发与工程

Expo DOM 组件助手

让 Expo 原生应用渐进式复用 Web 代码与 Web 专属库。

开发与工程

Expo 技能评测器

端到端验证 Expo 技能是否触发、产出可用代码并正确渲染。

开发与工程

Expo Tailwind 样式配置助手

为 Expo 应用配置 Tailwind CSS v4、NativeWind v5 与跨平台样式支持。

开发与工程

Expo 原生模块迁移助手

将现有 Expo 原生模块从 1.0 DSL 迁移到 2.0 宏 API,同时保持 JavaScript 接口不变。

开发与工程

EAS 云端模拟器助手

让无法本地运行模拟器的团队在 EAS 云端运行、操控并截图 Expo 应用。

自动化与运维

EAS 更新健康洞察

用 CLI 检查 EAS Update 的崩溃率、采用情况与发布健康度。

开发与工程

Expo App Clip 助手

为 Expo 应用配置可由网址唤起的 iOS App Clip。

开发与工程

Expo 开发客户端构建助手

为 Expo 原生代码测试构建并分发开发客户端。

开发与工程

Expo 应用商店发布助手

用 EAS 构建并发布 Expo 应用到 App Store、Google Play 和 TestFlight。

自动化与运维

Expo EAS 工作流助手

帮助 Expo 项目编写、编辑和验证 EAS CI/CD 工作流。

开发与工程

Expo EAS 托管部署

帮助 Expo 项目部署网站与 API 路由,并配置密钥、域名和边缘运行时。

相关 Skills