Expo DOM 组件助手
让 Expo 原生应用渐进式复用 Web 代码与 Web 专属库。
文档说明了 DOM 与原生之间的函数 props 边界、可序列化 props 和 WebView 配置，但没有要求对原生动作进行用户确认、限制外部 iframe/库、说明敏感数据处理或提供回滚策略；MIT 许可可核验，因此扣分而非判定为红线风险。
结构一致，覆盖基本创建、路由、资源、平台行为和限制，并提供多组代码示例；但未提供安装/依赖版本、测试套件、异常输入处理或可诊断失败反馈，静态评审上限内给分。
使用与不使用场景、平台差异和若干能力边界较清晰，能支持语义触发；但未明确 Expo SDK/React 版本、依赖前提、非适用范围的更多细节，也没有中文支持证据。核心能力不完全依赖海外服务，因此未因中国大陆可达性额外扣分。
具备名称、描述、版本、MIT 许可、分层主题和较丰富示例，并披露性能、热更新、隔离上下文等限制；但技能文件没有维护责任人、变更记录、更新路径、依赖安装说明或 FAQ，且发布者身份按题设只能视为未知。
内容直接覆盖 DOM 组件迁移、配置、Web 库、CSS、路由和原生动作等核心任务，示例可作为起点；但未有执行验证，部分示例仍需项目依赖、版本和平台适配，且“任意 Web 库”等效果范围缺少证据，因此未超过静态上限。
技能正文提供了可审计的规则、平台表格和代码样例，仓库上下文仅显示通用限制与版本检查工作流；没有针对该技能的测试、第三方执行证据或交叉验证，故证据覆盖较薄。
- 将 WebView 中的回调和外部内容视为安全边界；在传递敏感数据或执行写入、通知等原生动作前增加最小权限、输入校验和明确确认。
- 示例未锁定 Expo SDK、React 或 Web 库版本；实施前应对照当前 Expo 官方文档并在 iOS、Android、Web 上验证。
- 不要将“可使用任意 Web 库”理解为无条件兼容，需检查依赖是否依赖未支持的浏览器 API、原生集成或构建配置。
这个 Skill 能做什么，适合哪些场景？
该技能指导开发者使用 Expo DOM components，在原生平台的 WebView 中运行 Web 代码，在 Web 平台直接渲染。它覆盖 DOM 组件的创建、可序列化属性、CSS、Web 库、Expo Router、资源和原生操作桥接。适合渐进式迁移现有 React Web 组件，或嵌入依赖浏览器环境的内容。它不适合追求原生性能、深度原生集成或简单界面。
指导创建带有“use dom”指令的独立默认导出组件；为组件添加并配置 expo/dom 的 DOMProps；通过异步 props 暴露原生操作；在隔离上下文中导入 CSS、使用 Web 库和资源；在 DOM 组件中使用 Expo Router 的 Link 与 router API；指导将同步路由状态从原生父组件作为 props 传入；说明 iOS、Android 与 Web 的平台行为。
- 需要在 Expo 原生应用中使用 recharts、Chart.js 或语法高亮器等 Web 专属库的开发者。
- 希望将现有 React Web 组件逐步带到 iOS 和 Android、避免立即重写的团队。
- 需要复杂 HTML/CSS 布局、iframe、外部嵌入内容或 Canvas/WebGL 的 Expo 项目。
- 希望在原生页面中混合原生内容与专用 Web 内容的开发者。
这个 Skill 有哪些优点和局限？
- 支持在原生平台运行 Web 代码，并在 Web 平台直接渲染。
- 可复用 Web 专属库、复杂 CSS 布局、iframe、Canvas 和 WebGL。
- 提供原生操作桥接、DOMProps、CSS、资源和路由示例。
- 支持渐进式迁移，而不必一次性重写 Web 组件。
- 原生平台使用 WebView，会带来额外开销；不适合原生性能关键的场景。
- DOM 组件必须独立成文件，使用“use dom”和单一默认导出，props 也必须可序列化。
- WebView 拥有独立 JavaScript 上下文，不能直接共享原生状态。
- 源材料未提供测试套件、性能基准或具体 Expo SDK 版本兼容矩阵。
如何安装这个 Skill？
该技能位于仓库的 plugins/expo/skills/expo-dom/SKILL.md。安装整个 Expo 技能集合，可运行：npx skills@latest add expo/skills --skill '*'。Codex 也可安装 Expo 插件：codex plugin add expo@openai-curated。源材料未提供仅安装 expo-dom 的独立命令。
如何使用这个 Skill？
在 Expo 项目中向编码代理提出具体任务，例如：“在 Expo 原生页面中创建一个使用 recharts 的 DOM 图表组件，并通过 dom prop 设置高度。”随后确保组件文件顶部包含“use dom”，使用单一默认导出，并从原生父组件传入可序列化 props。
这个 Skill 与同类方案有什么区别？
与 React Native 组件相比，DOM components 更适合 Web 专属库和复杂 Web 布局，但性能开销更高；与 local modules 相比，它不适合深度原生 API 集成。若要迁移整个 Web 应用，源材料建议使用 expo-web-to-native 技能。