WorkBuddy技能评测 #81 | react：LobeChat 的 React 组件开发规范手册

2026-11-05silcano

基本信息

• 技能名：react
• 来源仓库 Star 数：71,862（lobehub/lobe-chat，5w-8w 档头部）
• 单技能下载量：平台未公开
• 分类：Frontend
• 数据来源：SkillKit 中央技能库（WorkBuddy 生态的第三方技能市场，非 WorkBuddy 官方自研）

它解决了什么痛点

LobeChat 前端有一套自己的技术栈约定：@lobehub/ui 组件库、antd-style 写复杂样式、Zustand 取状态要用 selector、路由是 Next.js App Router 和 React Router DOM 的混合体。新加入的贡献者（或 AI）不读这些约定，写出来的代码就是一股通用 React 味，PR 评审反复打回。这个技能把整套组件开发规范喂给 AI，让它按项目自己的规矩写代码。

对我有没有用（技术 / 自媒体 / AI / 读书）

仅在你给 LobeChat 贡献代码时有用。技术方向：技能里的 @lobehub/ui、desktopRouter.config.tsx 这些全是项目私有实现，搬到你自己的项目等于带了别人的镣铐。不过它的写法有参考价值——如果你维护一个 React 项目，可以仿照它给 AI 写一份项目规范技能。其余三个方向零交集。

典型场景

你在给 LobeChat 加一个新的设置页组件。AI 装上此技能后，会用 Flexbox 做布局、用 selector 从 store 取数、用 react-router-dom 的 Link 而不是 next/link 跳转，产出直接符合项目评审标准。成果：PR 一次过的概率显著提升——但仅限这一个仓库。

一句话结论

优秀的项目内规范技能样本，但服务对象只有 LobeChat 一家。普通用户收藏价值大于使用价值。

📊 完整对比数据见在线总表：WorkBuddy 技能市场全量调研总表（腾讯文档）