tamagui
跨React与React Native的UI开发库与优化编译器
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tamagui。 它的用途是：跨React与React Native的UI开发库与优化编译器 完整的 Skill 内容见：https://321skill.com/skills/tamagui/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要一个在Web和手机App上看起来一致且高性能的按钮组件，用Tamagui怎么写？” 它会引导你使用Tamagui的 `styled` 函数定义组件，并解释其编译器如何自动为不同平台生成优化后的代码。或者，你可以询问：“如何用Tamagui的编译器优化我的现有项目？” 它会指导你配置 `@tamagui/static` 并分析构建产物。
介绍
Tamagui 旨在解决开发者在构建跨平台（Web 与 React Native）应用时，因代码复用而导致性能下降和代码质量受损的痛点。它通过一个独特的优化编译器，将复杂的样式组件在编译时扁平化处理，在Web端输出为简单的 div 和原子化CSS，在原生端则提升样式对象，从而在共享大量代码的同时，保持接近原生平台的渲染性能。
使用上，开发者可以通过 npm create tamagui@latest 快速创建项目，并引入其核心库 @tamagui/core、UI组件库 tamagui 以及优化编译器 @tamagui/static。它支持渐进式采用，开发者可以从基础的视图和 styled 函数开始，逐步深入其完整的样式系统和设计系统。
Tamagui 非常适合需要同时开发高质量Web应用和React Native移动应用的团队或个人开发者，尤其是那些对应用性能、开发效率和代码一致性有较高要求的项目。
与传统的跨平台UI解决方案（如直接使用React Native for Web）相比，Tamagui 的核心区别在于其编译时优化能力。它不仅仅是运行时适配，而是通过静态分析主动优化和简化样式代码，这在同类工具中是较为独特的，能带来显著的性能提升和更精简的产物。
核心特点
Tamagui 的核心在于其优化编译器，它能在编译时将复杂的样式组件扁平化为平台最优的代码结构（如Web的原子CSS），从而实现跨平台代码共享的同时，不牺牲性能，这是其与大多数运行时适配方案的根本区别。
注意事项
对于仅需开发单一平台（纯Web或纯原生）且对编译时工具链集成有严格限制的项目，引入Tamagui可能带来不必要的复杂性。
常见问题
Tamagui 和 React Native for Web 有什么区别？
Tamagui 包含一个优化编译器，能在编译时主动优化和简化样式代码，提升性能；而 React Native for Web 主要是在运行时将React Native组件映射为Web组件。
Tamagui 能提升多少性能？
根据官方示例，其官网首页在开启编译器后，Lighthouse性能得分提升了近15%，并能将大量样式组件扁平化为简单的 div 元素。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tamagui/raw/index.md 读取 tamagui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tamagui/raw/index.md（查看排版版本）