1. 技术架构确定提示最好的方式是找找网上是否有现有的skills或者plugin有无AI开发规范的技能和插件1.1 技术选型前端框架React/Vue/Angular 对应生态UI组件库Ant Design/Element UI/自建组件库状态管理Redux/MobX/Zustand构建工具Vite/Webpack/Turbopack包管理器npm/yarn/pnpm1.3 设计模式组件模式高内聚、低耦合容器/展示组件逻辑与UI分离自定义Hook逻辑复用HOC/Render Props组件增强2. 项目结构规范2.1 目录结构设计project/ ├── src/ │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ │ ├── Button/ │ │ ├── Form/ │ │ └── index.ts # 组件导出 │ ├── hooks/ # 自定义Hook │ ├── utils/ # 工具函数 │ ├── services/ # API服务 │ ├── types/ # 类型定义 │ ├── constants/ # 常量定义 │ ├── pages/ # 页面组件 │ ├── store/ # 状态管理 │ ├── styles/ # 全局样式 │ └── index.tsx # 入口文件 ├── tests/ # 测试文件 ├── docs/ # 文档 └── config/ # 配置文件2.2 模块划分原则单一职责每个模块只做一件事依赖倒置高层模块不依赖低层模块接口隔离模块间通过接口通信模块导出统一通过index.ts导出2.3 文件命名规范组件文件PascalCase如UserProfile.tsx工具文件camelCase如formatDate.ts常量文件UPPER_SNAKE_CASE如API_ENDPOINTS.ts类型文件PascalCase .types.ts如User.types.ts3. 组件设计规范3.1 公共组件库定义基础组件Button、Input、Select、Modal等业务组件UserCard、ProductList、SearchBar等布局组件Header、Footer、Sidebar、Layout等3.2 组件复用策略原子化设计从基础组件开始构建组合模式小组件组合成大组件配置化通过props配置组件行为插槽机制预留扩展点3.3 组件文档要求Props说明类型、默认值、描述使用示例基础用法和高级用法注意事项性能、兼容性、限制条件版本记录变更日志和兼容性4. 文件结构规范4.1 React单文件结构// UserProfile.tsx import React from react; import { Button } from /components; import { formatDate } from /utils; import styles from ./UserProfile.module.less; // 类型定义 interface UserProfileProps { user: User; onUpdate: (user: User) void; } // 组件实现 export const UserProfile: React.FCUserProfileProps ({ user, onUpdate }) { return ( div className{styles.container} h2{user.name}/h2 p注册时间{formatDate(user.createdAt)}/p Button onClick{() onUpdate(user)}更新/Button /div ); };4.2 文件组织原则单一文件单一组件每个文件只导出一个主组件类型定义前置接口和类型放在文件开头导入顺序第三方库 → 内部模块 → 样式文件导出统一通过index.ts统一导出4.3 样式文件规范CSS Modules使用.module.less避免样式冲突命名规范BEM命名或语义化命名变量管理颜色、间距、字号等定义为变量响应式设计媒体查询统一管理5. 代码质量规范5.1 代码风格ESLint统一代码检查规则Prettier统一代码格式化TypeScript严格类型检查EditorConfig编辑器配置统一5.2 类型定义接口定义所有props、state、API响应定义类型泛型使用复用类型定义枚举类型常量使用枚举类型导入使用import type提高编译性能5.3 文档注释组件注释功能描述、使用示例函数注释参数说明、返回值、副作用复杂逻辑算法说明、业务规则TODO/FIXME标记待处理事项6. AI开发工具和插件6.1 现有Skills和PluginsClaude CodeAnthropic官方AI助手GitHub Copilot代码补全和生成CursorAI驱动的IDETabnine智能代码补全Amazon CodeWhispererAWS代码助手6.2 AI开发规范工具ESLint规则AI生成代码的规范检查TypeScript配置严格类型检查测试覆盖率AI生成代码的测试要求代码审查AI辅助代码审查流程6.3 工具集成配置// .vscode/settings.json{editor.formatOnSave:true,editor.defaultFormatter:esbenp.prettier-vscode,editor.codeActionsOnSave:{source.fixAll.eslint:true},typescript.preferences.importModuleSpecifier:non-relative}7. 开发流程规范7.1 开发工作流需求分析明确功能边界和约束技术设计确定实现方案和架构AI协作提供清晰的上下文和需求审查AI生成的代码迭代优化和调整测试验证编写测试用例并执行代码审查团队审查和AI辅助审查版本控制提交代码和更新文档7.2 代码审查要点功能正确性是否满足需求代码质量可读性、可维护性性能影响是否有性能问题安全性是否有安全漏洞测试覆盖是否有充分测试7.3 测试策略单元测试测试单个函数/组件集成测试测试组件间交互端到端测试测试完整用户流程AI辅助测试使用AI生成测试用例8. 文档和知识管理8.1 项目文档README.md项目介绍和快速开始CONTRIBUTING.md贡献指南ARCHITECTURE.md架构设计文档API文档接口说明和示例8.2 开发规范文档代码规范编码标准和最佳实践Git规范提交信息、分支管理部署规范发布流程和环境配置安全规范安全开发要求8.3 知识库建设技术决策记录重要技术选择的理由问题解决方案常见问题和解决方法最佳实践AI开发经验总结培训材料新成员培训资料最后更新2026年6月维护者开发团队反馈欢迎提出改进建议