frontend-dev-guidelines

用途：frontend-dev-guidelines 定义前端代码“必须如何写”，而不仅是“可以如何写”。它面向长期维护的生产级 React 代码库，用严格架构与性能标准约束组件、页面与功能的实现方式。主要能力：一是前置可行性评估 FFCI，从架构契合度、复杂度、性能风险、复用性、维护成本五个维度（各1–5分）打分并据此决定继续、谨慎、简化拆分或重设计；二是核心架构原则，包括 Suspense 优先（以 useSuspenseQuery 为主，禁止 isLoading 条件与提前返回 spinner）、重组件懒加载、按功能组织（领域逻辑置于 features/，通用原语置于 components/，禁止跨功能耦合）、严格 TypeScript；三是明确的标准与清单，覆盖新组件、新功能、导入别名（@/、~types、~components、~features）、组件结构顺序、数据获取、TanStack Router 路由、MUI v7 样式、加载与错误处理、性能默认值（useMemo、useCallback、React.memo、搜索防抖 300–500ms）、TypeScript 规范、规范文件结构与组件模板。使用方式：在创建组件或页面、新增功能、获取或变更数据、设置路由、使用 MUI 样式、排查性能问题、评审或重构前端代码时调用；按清单逐项核对（FFCI ≥ 6、正确使用 Suspense、遵守功能边界、无提前返回、类型明确正确、应用懒加载、性能安全）。限制：该技能观点鲜明且具强制性，面向长期维护的生产 React 代码库；仅当任务明确匹配上述范围时使用，其输出不能替代针对具体环境的验证、测试或专家评审；若缺少必要输入、权限、安全边界或成功标准，应停下并请求澄清。与其他技能集成：frontend-design、page-cro、analytics-tracking、backend-dev-guidelines、error-tracking。