【免费下载链接】PanelUIHigh-performance React Native and React components .项目地址https://gitcode.com/gh_mirrors/pa/PanelUI点击查看免费下载PanelUI 是一个面向 React NativeExpo的开源 UI 组件库提供 141 个组件模块与 6 套主题。这篇文章介绍如何用 Skills 与 MCP 让 Claude Code、Cursor 等 AI 编码智能体写出零幻觉的 React Native 组件代码——智能体不再凭记忆猜 API而是先读真实的组件文档和源码再动手写。一、为什么 AI 写 React Native 组件总翻车如果你试过让编码智能体直接写 PanelUI 界面大概遇到过这些情况幻觉 props智能体记得一个variantdark但组件根本没有这个属性编译报错或静默失效导入路径猜错PanelUI 支持装包和复制源码两种用法智能体经常写错 import 路径主题写法踩坑写了dark:bg-neutral-900这样的覆盖类结果在 6 套主题里有 4 套不生效而且不报任何错误弹层永远不出现漏掉根组件PanelUIProviderDialog、BottomSheet 挂载了却渲染不出来。根本原因智能体依赖训练数据里的记忆而组件库的 API 是持续演进的。解决办法不是换更强的模型而是给智能体两样东西一份随库更新的本地知识库Skills——离线可读的组件手册 编码规则一条实时查询通道MCP 服务器——让智能体按需搜索组件、读真实源码、获取安装命令。PanelUI 把这两样东西都内置在了仓库里这也是本文的重点。二、PanelUI Skills装进智能体的活组件手册打开仓库的 skills/panelui/ 目录你会看到一套完整的 Skill 文件夹主入口是 SKILL.md它专为编码智能体设计可以放进 Claude Code、Cursor 等支持 Agent Skills 的环境。它的核心设计是四条原则SKILL.md原则含义 先查后写141 个组件的清单都在 components.md写自定义 UI 前先搜一遍自定义面板往往早已有现成组件 读文档不靠记忆每个组件都有components/slug.md由库的 TypeScript自动生成包含每个 prop 的类型、默认值和变体——凭记忆写的 prop 名多半是错的 组合部件而非裸写 View设置页 FrameFrame.PanelFrame.Row聊天页 MessageScrollerMessagerecipes.md 里写好了整屏配方 永不硬编码颜色只用语义 tokenbg-card、text-muted-foreground一个硬编码颜色会同时打破全部 6 套主题几个值得注意的细节rules/ 目录是避坑手册。rules/styling.md、rules/composition.md 等文件全部用错误写法 vs 正确写法的成对示例描述规则智能体最容易照着模仿setup.md 专治屏幕一片空白。skills/panelui/setup.md 把装了但没样式这种无报错故障拆成 6 步排查清单——元凶绝大多数是metro.config.js里的路径写错全程离线。组件文档就放在本地文件夹里智能体读文档不需要任何网络请求。这套 Skill 的价值在于智能体拿到的是与库版本一致的 API而不是训练语料里的旧记忆。三、PanelUI MCP 服务器一条命令让智能体读源码Skills 解决本地手册MCP 解决实时查询。PanelUI 的 CLI 内置了一个零依赖的 MCP 服务器实现在 packages/cli/src/mcp.mjs基于组件注册表构建智能体看到的源码就是add命令会装进项目的源码。3.1 一键接入在项目里运行一条命令即可启动服务器再用mcp init自动写入编辑器配置会合并而非覆盖已有配置详见 skills/panelui/mcp.mdnpx panelui-clilatest mcp npx panelui-clilatest mcp init # 为 Claude Code 写入 .mcp.json npx panelui-clilatest mcp init cursor # 写入 .cursor/mcp.json npx panelui-clilatest mcp init vscode # 写入 .vscode/mcp.json手动配置时只需这几行 JSON来自 skills/panelui/mcp.md{ mcpServers: { panelui: { command: npx, args: [-y, panelui-clilatest, mcp] } } }3.2 六个工具各司其职MCP 服务器暴露了 6 个工具定义见 packages/cli/src/mcp.mjs工具用途建议时机panelui_get_project_info查询本项目怎么引入 PanelUI装包 or 复制源码、组件落盘位置永远第一个调用——它决定 import 该写什么panelui_search_components按名称和描述搜索注册表写任何自定义 UI 之前panelui_list_components列出全部组件、hooks、工具每个一句话说明不确定某个功能是否存在时panelui_view_component查看一个条目的完整内容描述、依赖、全部文件源码使用组件前读真实 APIpanelui_get_component_docs获取组件文档页markdown结构、每个 prop 的类型与默认值、变体、示例优先于凭印象猜 APIpanelui_get_add_command生成把组件复制进项目的add命令决定用复制源码方式时四、完整工作流从我要一个筛选面板到正确代码接入之后智能体处理需求的标准流程是五步先摸清项目调用panelui_get_project_info。这一步决定了代码里写import { ... } from panelui-native还是import { ... } from /components/ui/...——两种用法都完全支持但不能假设得查搜索而非臆造用panelui_search_components搜filter发现现成的BottomSheetToggleButtonGroupSlider不用自己拼一个自定义面板读真实文档对要用的组件调panelui_get_component_docs拿到由 TypeScript 生成的 props 表——包括默认值、变体、复合部件如BottomSheet.Trigger必须包在BottomSheet里按需取源码走复制源码路线时调panelui_get_add_command拿到形如npx panelui-clilatest add bottom-sheet的命令依赖会被自动解析按规则写码Skills 里的 recipesrecipes.md 的底部弹层筛选一节给出组合方式rules 目录兜底细节——弹层必须用openonOpenChange控制不要靠条件渲染关闭它否则退出动画来不及播放。这套流程的效果智能体写出的代码props 来自真实源码规则来自项目内置手册而不是模型脑补。五、生成效果整屏组件组合一览下面的界面全部由 Skills 中的配方组合而成也是智能体照着文档能直接复刻出的典型场景聊天界面——MessageScroller虚拟化滚动 吸底Message单条消息是 recipes.md 里的标准配方表单界面——FormFieldInput的组合Field负责把标签与控件关联起来屏幕阅读器可正确读出这是裸 View 套 Text做不到的卡片界面——复合 API 的直观体现Card.Header、Card.Content按标记的读法组合AI 写起来像写文案一样顺主题切换——6 套主题、3 个主题家族Panel / Moon / Grass每套家族还自带独立的圆角比例智能体读到 theming.md 就知道该用 token 而非dark:覆盖类六、常见问题FAQQ智能体需要联网吗Skills 完全本地组件文档就在skills/panelui/components/下读文档零网络请求。MCP 服务器查询的注册表也是公开免认证的断网时 Skills 依然能兜底。Q没有 MCP 的环境能用吗可以。Skills 单独使用就是完整的组件手册 规则集智能体读本地 md 文件即可。MCP 是加分项提供搜索和读源码的能力。Q--overwrite能放心用吗不能。skills/panelui/cli.md 明确警告复制源码的意义就是本地修改--overwrite会覆盖本地改动。升级组件时先跑add name --dry-run看会动哪些文件再逐个决定。QAI 写完代码屏幕是空白的怎么办这是最典型的无报错故障。让智能体按 skills/panelui/setup.md 的清单排查元凶几乎都是metro.config.js不在项目根目录、withUniwindConfig没包住配置、或cssEntryFile路径指错。Q新项目怎么起步npx create-panelui-applatestMetro 配置、CSS 入口、Provider、主题和示例页面全部就绪详见 README.md。七、相关资源速查资源路径Skill 主入口原则 组件速查表skills/panelui/SKILL.md141 个组件总目录skills/panelui/components.md整屏配方设置页/表单/聊天/搜索skills/panelui/recipes.md编码规则样式/组合/动画/原生控件skills/panelui/rules/MCP 服务器文档与工具说明skills/panelui/mcp.mdMCP 服务器源码零依赖 stdio 实现packages/cli/src/mcp.mjsCLI 命令参考init / add / list / mcpskills/panelui/cli.md安装排障手册skills/panelui/setup.mdAI 聊天界面原生适配指南apps/docs/content/docs/ai/index.mdx一句话总结Skills 让智能体带着手册写代码MCP 让它随手可查真实源码。两者都是纯本地、随库版本更新、零额外配置——这就是 AI 精准写出 React Native 组件代码的最短路径。 赞分享【免费下载链接】PanelUIHigh-performance React Native and React components .项目地址https://gitcode.com/gh_mirrors/pa/PanelUI点击查看免费下载相关推荐让 AI 编码 Agent 用 mirrord 测试代码Skills、Meta-Prompt 与 Agent 自助试用完整指南让 AI 编码 Agent 用 mirrord 测试代码Skills、Meta Prompt 与 Agent 自助试用完整指南 AI 编码模型看不到应用的完整开发工具云原生CLIADK Gemini代码执行工具让智能体编写并运行代码的完整教程ADK Gemini代码执行工具让智能体编写并运行代码的完整教程 ADKAgent Development Kit是一款开源的代码优先Python工具包文档教程OptiQ校准混合技术详解六领域数据如何提升量化质量OptiQ校准混合技术详解六领域数据如何提升量化质量 OptiQ校准混合技术是一种创新的模型量化方法通过结合六个不同领域的校准数据显著提升了量化模型的性能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考