frontend-dev-guidelines
使用现代模式构建生产级 React 应用
متاح أيضًا من: 0Chan-smc,0Chan-smc,BrianDai22,diet103,Dimon94,DojoCodingLabs,BOM-98
前端开发者在 React 代码库中面临不一致的模式和技术债务问题。本技能提供基于 Suspense 优先的数据获取、基于功能的架构和 TypeScript 规范的标准化实践。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-dev-guidelines". 创建一个带有 Suspense 的产品列表组件
النتيجة المتوقعة:
- 使用 useSuspenseQuery hook 创建的 ProductList 组件
- 包装在 SuspenseLoader 边界中以实现自动加载状态
- 为 Product 数据类型定义了 TypeScript 接口
- 使用 v7 语法的响应式 MUI Grid 布局
- 缓存优先查询配置以获得最佳性能
استخدام "frontend-dev-guidelines". 我应该如何组织身份验证功能代码
النتيجة المتوقعة:
- 创建 features/authentication 目录结构
- 将 auth API 调用放在 api/authApi.ts 中并包含类型化响应
- 在 hooks/useAuth.ts 中实现 useAuth hook
- 通过 index.ts 桶导出导出公共接口
- 将 auth 组件保留在 components/ 子目录中
التدقيق الأمني
آمنAll 649 static analysis findings are false positives. The skill consists entirely of Markdown documentation files containing code examples for educational purposes. Patterns like external_commands, scripts, filesystem, and network references are illustrative code snippets teaching React TypeScript development, not executable code. No actual security risks detected.
درجة الجودة
ماذا يمكنك بناءه
新 React 组件开发
生成遵循 Suspense 优先模式的生产级 React 组件,包含适当的 TypeScript 类型、懒加载和 MUI 样式
代码库标准化
通过基于功能的组织、严格的 TypeScript 和统一的样式方法,在团队间建立一致的架构模式
遗留代码现代化
重构现有组件以采用 useSuspenseQuery,移除 isLoading 条件判断,并实现适当的懒加载边界
جرّب هذه الموجهات
创建一个显示用户资料数据的 React 组件。使用 useSuspenseQuery 获取数据,用 SuspenseLoader 包装,并使用 MUI sx 属性设置样式。包含用户数据的 TypeScript 类型。
为仪表板应用程序设置基于功能的文件夹结构,包含以下功能:analytics、user management 和 settings。展示每个功能的 api、components、hooks、helpers 和 types 子目录以及 index.ts 导出。
为仪表板路由实现具有懒加载的 TanStack Router 配置。包含一个返回面包屑元数据的 loader 函数,并使用缓存优先查询策略进行初始数据获取。
将这个使用带有 isLoading 检查的 useQuery 的遗留组件重构为使用 useSuspenseQuery。移除所有提前返回和条件加载状态。展示重构前后的代码并附上说明。
أفضل الممارسات
- 始终使用 useSuspenseQuery 作为默认数据获取模式,而不是使用带有 isLoading 检查的 useQuery
- 按功能域在 features 目录中组织代码,而不是按技术类型
- 懒加载任何路由组件或重型 UI 元素(如数据网格和图表)以优化打包大小
تجنب
- 提前返回加载状态模式,如 if isLoading return null,这会破坏 Suspense 边界
- 将特定功能的业务逻辑放在通用组件目录中而不是 features 目录中
- 在组件内部直接调用 API,而不是使用集中的功能 API 服务层
الأسئلة المتكررة
为什么使用 useSuspenseQuery 而不是 useQuery?
何时应使用内联样式与单独的 .styles.ts 文件?
我可以在现有的 React 17 代码库中使用此技能吗?
遵循这些指南需要哪些依赖项?
如何使用 Suspense 模式处理错误状态?
基于功能的组织是否适合小型项目?
تفاصيل المطور
المؤلف
sickn33الترخيص
MIT
المستودع
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-dev-guidelinesمرجع
main