如何让 AI 遵循生产级前端开发规范编写 React 代码

解决 AI 生成代码质量参差不齐的问题：通过预设一套高级前端工程师的架构准则，强制 AI 产出高可维护、强类型且性能优化的生产级 React 代码。

为什么需要这个技能

大多数 AI 生成的前端代码倾向于“能跑就行”，经常出现大量的 any 类型、散乱的 API 调用、繁琐的 isLoading 状态判断，以及缺乏结构的可维护性。在大型商业项目中，这种代码会导致严重的维护危机。

本技能通过引入 FFCI（前端可行性与复杂度指数） 评估机制和一套不可逾越的架构准则（如 Suspense-first），确保 AI 编写的代码在可扩展性、可预测性和性能上符合资深前端工程师的标准。

适用场景

• 构建新功能：需要创建新组件、页面或复杂业务逻辑时。
• 数据流设计：设计 API 请求、状态管理及数据变更逻辑时。
• 代码重构：将遗留的、缺乏规范的前端代码升级为生产级标准时。
• 性能调优：解决渲染卡顿、包体积过大或布局偏移（CLS）问题时。

核心工作流

1. FFCI 复杂度评估

在编写代码前，AI 会首先计算 。

• ：直接执行。
• ：谨慎执行并简化逻辑。
• ：拒绝实现，要求重新设计。

2. 核心架构原则（不可逾越）

• Suspense 优先：使用 useSuspenseQuery，禁止在组件内写 if (isLoading) return <Spinner />。
• 基于功能的组织 (Feature-based)：业务逻辑必须放在 features/ 目录下，禁止跨功能模块直接耦合。
• 严格类型约束：禁止使用 any，必须定义显式返回类型，使用 import type。
• 激进的懒加载：所有重型组件、路由和大型对话框必须使用 React.lazy。

3. 标准组件结构

AI 将严格按照以下顺序组织代码：

1. 类型定义 (Types/Props) 2. Hooks 3. 衍生值 (useMemo) 4. 事件处理器 (useCallback) 5. 渲染逻辑 6. 默认导出。

下载和安装

下载 frontend-dev-guidelines 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐