BrianDai22/frontend-dev-guidelines：React+TypeScript+TanStack+MUI 统一前端架构 Skill 技能

briandai22-frontend-dev-guidelines 是一款面向 React + TypeScript 前端架构统一的 Agent Skill。它把团队内零散的前端规范——组件结构、TypeScript props 约定、TanStack Query 数据流、TanStack Router 路由、MUI v7 样式、Suspense 加载态、记忆化与性能优化——打包成 Claude / Codex / Claude Code 三个 Agent 都能直接套用的标准化工作流，让 AI 在新写 / 改写 / 评审前端代码时输出符合团队约定的高质量实现。

核心能力：

• React 组件 + props 约定：统一组件结构、命名、props 接口与默认导出风格，避免每个组件各写一套。
• Suspense 加载态：基于 React.lazy + Suspense 给出加载边界（loading boundary）的标准实现，避免散落的 spinner。
• TanStack Query 数据流：规范 query key、useSuspenseQuery、错误反馈与缓存失效策略，统一前后端数据契约。
• feature 模块化目录：按「API / components / helpers / hooks / types / routes」组织 feature 模块，便于拆分、复用与 code review。
• MUI v7 样式规范：覆盖 Grid 响应式写法、样式复用与 design system 对齐，避免样式散落在多个文件中。
• 性能与严格 TS：覆盖记忆化（useMemo / useCallback）、debounce、cleanup、strict TypeScript 等性能与类型安全实践。

安装配置：

• 通过 npx skillstore add briandai22/frontend-dev-guidelines 一键安装到 Claude / Codex / Claude Code Agent 环境。
• 项目使用 TanStack Router、TanStack Query、MUI v7 时按 Skill 默认规范即可；其他 UI 库（Ant Design / Chakra / shadcn/ui）需在调用时说明，Agent 会按相似风格适配。
• 团队别名（@/components、@/hooks 等）需要在 prompt 中预先声明，确保 Agent 生成的 import 路径与项目一致。

使用步骤：

1. 梳理 feature 模块：明确新 feature 的目标、所需组件、数据来源、路由位置与样式要求。
2. 创建 feature 目录：按 api / components / hooks / helpers / types / routes 结构搭建 feature 骨架。
3. 定义数据层：用 useSuspenseQuery + apiClient 设计 query key、参数类型、错误反馈与缓存策略。
4. 搭建组件与路由：按 React + TypeScript 约定生成组件 props、Suspense 边界与路由配置。
5. 应用 MUI v7 样式：用 Grid + sx / styled API 完成响应式布局，避免样式散落在 CSS 文件中。
6. 性能与 lint 审查：检查记忆化、debounce、清理函数、TypeScript 严格选项，提交前跑 lint + type-check。

适用场景：

• 新前端 feature（页面、模块、工具）从 0 搭建时按统一架构落地。
• 老项目代码风格不统一，需要按规范批量收敛组件、数据流、样式。
• Code review 阶段快速定位「不符合前端架构规范」的代码段。
• 团队希望把 React + TypeScript + TanStack + MUI 技术栈经验沉淀为统一 SOP。

工作原理： Skill 加载后会在 Agent 推理上下文中注入「React + TypeScript + TanStack + MUI 风格指南 + feature 目录约定 + Suspense 加载模式」。Agent 在收到「按规范实现 X feature / 评审 Z 模块 / 优化 Y 页面性能」指令时，会按 feature 目录约定、数据流约定、组件约定、样式约定逐步落地。它的设计目标是「让 AI 输出能直接通过 lint + type-check + 团队 review 的前端代码」，而不是替代人工测试与运行时验证。

适用人群：

• 长期维护 React + TypeScript 大型前端应用的 Tech Lead / 架构师。
• 中级前端工程师，希望用统一规范写新 feature。
• 前端 Code Reviewer，需要快速对照规范定位问题。
• 任何希望把 React + TanStack + MUI 技术栈经验沉淀为团队资产的前端团队。

官方链接：

• 技能主页：https://skillstore.io/skills/briandai22-frontend-dev-guidelines
• 源码仓库：https://github.com/BrianDai22/concetrateaiquiz/tree/main/.claude/skills/frontend-dev-guidelines
• 安装命令：npx skillstore add briandai22/frontend-dev-guidelines