前端开发者的秘密武器agent-toolkit的React与MUI技能深度解析【免费下载链接】agent-toolkitA curated collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities across development, documentation, planning, and professional workflows.项目地址: https://gitcode.com/gh_mirrors/agentt/agent-toolkit在 agent-toolkit 这款开源 AI 技能工具包中skills/mui 与 skills/react-dev 两项 React / MUI 技能为前端开发者提供了一套开箱即用的 React 技能库它们把 Material-UI v7 组件模式、TypeScript 类型安全写法、React 19 新特性等最佳实践打包成 AI 编码代理可直接调用的指令集让你在写 React 代码时少踩坑、写得快、改得稳。为什么前端开发者需要 React 与 MUI 技能写 React 代码的痛点往往不是不会写而是不知道最佳实践怎么写MUI 升级踩坑MUI v7 带来了一系列破坏性变更深度导入失效、onBackdropClick被移除等新手很容易沿用旧写法TypeScript 类型纠结事件处理程序该用什么类型children该用ReactNode还是JSX.ElementuseEffect 滥用很多状态本可以直接计算却被塞进了 Effect 里。agent-toolkit 的思路是把这些老手才懂的经验写成技能Skill——一组打包好的说明文档与脚本安装到你的 AI 编码工具如 Claude Code、Cursor 等后代理在检测到相关场景时会自动激活对应技能按最佳实践输出代码。 技能机制每个技能目录都包含 SKILL.md代理读取的指令与 README.md给用户看的说明按需加载、不占用过多上下文。MUI 技能Material-UI v7 的完整使用指南mui 技能覆盖 Material-UI v72025 年 3 月发布的核心场景相当于一份随身可用的官方最佳实践手册。一键掌握 sx 样式系统与主题令牌MUI 最核心的能力是通过sx属性做样式。技能内置了两套按组件复杂度划分的样式组织规范样式少于 100 行直接在组件文件顶部定义类型安全的样式对象样式超过 100 行拆分为独立的ComponentName.styles.ts样式文件。同时技能强制三条黄金法则给 sx 属性加类型用SxPropsTheme保证类型安全用主题令牌代替硬编码写primary.main而不是#1976d2用间距刻度写p: 2而不是16px视觉节奏更统一。响应式布局与常用组件全覆盖技能完整覆盖前端日常高频组件场景技能提供的模式布局Box、Paper、Container、Stack 的使用规范网格12 列响应式 Gridxs/sm/md/lg/xl 断点表单TextField 校验、错误状态处理反馈Dialog、Snackbar、Skeleton 骨架屏图标mui/icons-material 的正确引入方式移动端适配也是重点只需一个断点对象如xs: 100%、md: 60%同一组件即可在手机到桌面间自动切换。v7 破坏性变更避坑清单升级 MUI v7 时最头疼的变更技能已逐条列出深度导入不再可用改用包导出字段Modal 的onBackdropClick已移除统一使用onClose所有组件采用标准化的slots/slotProps模式新增enableCssLayer配置兼容 Tailwind v4 的 CSS 层级。技能的触发机制同样精巧查看 skill-rules-fragment.json 可以看到当你提到sx propcreateThemeuseTheme或编辑*.styles.ts、theme.ts等文件时技能会自动介入——无需手动激活。react-dev 技能TypeScript 类型安全的 React 18-19 完整指南如果说 mui 技能管界面那么 react-dev 技能就管代码质量。它把类型安全 React 的全部套路写成可复制的模式核心口号是类型安全的 React 编译期保证 敢重构。React 19 三大变化一次讲透新特性变化要点ref 作为普通 propforwardRef已弃用直接解构ref即可useActionState替代已弃用的useFormState表单提交状态一步到位use() 钩子直接解包 Promise 与 Context配合 Suspense 实现流式数据详细的迁移清单收录在 references/react-19-patterns.md。七类核心模式告别 any技能覆盖了日常开发最常卡壳的七类场景组件 Props用ComponentPropsWithoutRef扩展原生元素类型不丢失事件处理程序MouseEventHTMLButtonElement等精确类型杜绝anyHooks 类型useState显式声明联合/null 类型、自定义 Hook 用as const保持元组泛型组件类型安全的 Table、List、Modal数据传什么类型列配置自动推断Server Components服务端组件直接async取数 use server服务端动作类型安全路由TanStack RouterZod 校验查询参数与 React Router v7自动生成类型双支持可辨识联合variant 不同的属性组合编译期就拦住错误用法。事件类型的完整速查表见 references/event-handlers.mdServer Components 的并行取数与流式渲染示例见 examples/server-components.md。技能还内置了一份必须做 / 绝不做规则清单如绝不在children上用JSX.Element、绝不混写 Server/Client 组件于同一文件代理生成代码时会自动遵守。react-useeffect 技能你可能根本不需要 useEffect第三个隐藏宝藏是 react-useeffect 技能。它基于 React 官方文档提炼出一个反直觉的结论Effect 是逃生舱不是默认选项。场景错误做法技能推荐做法由 props 派生状态useState useEffect渲染时直接计算昂贵计算useEffect 缓存useMemoprop 变化时重置状态useEffect setState用key属性响应用户事件useEffect 监听状态事件处理函数配套的决策树让你 10 秒内判断到底要不要写 Effect是用户交互用事件处理器。是派生数据直接算。是外部系统同步那才轮到 Effect。详细反模式与替代方案见 anti-patterns.md 和 alternatives.md。如何安装与使用这些前端技能安装方式有三种任选其一方式一一条命令安装推荐npx skills add softaworks/agent-toolkit方式二作为插件市场注册/plugin marketplace add softaworks/agent-toolkit方式三克隆仓库手动安装git clone https://gitcode.com/gh_mirrors/agentt/agent-toolkit cp -r agent-toolkit/skills/mui ~/.claude/skills/安装后无需任何配置——当你说出用 MUI 做个响应式卡片帮我给这个事件加类型之类的话对应技能就会自动触发。技能文件索引想深入时看这里文件内容skills/mui/SKILL.mdMUI v7 模式总纲样式、组件、主题、响应式skills/mui/README.mdmui 技能使用说明与示例skills/mui/skill-rules-fragment.json技能自动触发关键词与文件规则skills/react-dev/SKILL.mdReact 18-19 类型安全模式速查skills/react-dev/references/hooks.mdHooks 类型详解skills/react-dev/references/tanstack-router.mdTanStack Router 类型安全路由skills/react-dev/references/react-router.mdReact Router v7 路由模式skills/react-dev/examples/generic-components.md泛型 Table / Select / Modal 完整示例skills/react-useeffect/SKILL.mduseEffect 决策树skills/react-useeffect/anti-patterns.mduseEffect 常见反模式修复README.md全仓库技能总览表结语把最佳实践装进你的 AI 代理agent-toolkit 的 React 与 MUI 技能本质上是经验即插即用mui 技能守住 MUI v7 的样式与组件规范react-dev 技能锁死 TypeScript 类型安全底线react-useeffect 技能帮你砍掉冗余代码。三者组合让 AI 编码代理输出的前端代码接近团队里最有经验成员的写法。对于正在做 React 项目的你这大概就是当下最值得试的免费前端技能包了 【免费下载链接】agent-toolkitA curated collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities across development, documentation, planning, and professional workflows.项目地址: https://gitcode.com/gh_mirrors/agentt/agent-toolkit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 前端开发者的秘密武器：agent-toolkit的React与MUI技能深度解析
前端开发者的秘密武器agent-toolkit的React与MUI技能深度解析【免费下载链接】agent-toolkitA curated collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities across development, documentation, planning, and professional workflows.项目地址: https://gitcode.com/gh_mirrors/agentt/agent-toolkit在 agent-toolkit 这款开源 AI 技能工具包中skills/mui 与 skills/react-dev 两项 React / MUI 技能为前端开发者提供了一套开箱即用的 React 技能库它们把 Material-UI v7 组件模式、TypeScript 类型安全写法、React 19 新特性等最佳实践打包成 AI 编码代理可直接调用的指令集让你在写 React 代码时少踩坑、写得快、改得稳。为什么前端开发者需要 React 与 MUI 技能写 React 代码的痛点往往不是不会写而是不知道最佳实践怎么写MUI 升级踩坑MUI v7 带来了一系列破坏性变更深度导入失效、onBackdropClick被移除等新手很容易沿用旧写法TypeScript 类型纠结事件处理程序该用什么类型children该用ReactNode还是JSX.ElementuseEffect 滥用很多状态本可以直接计算却被塞进了 Effect 里。agent-toolkit 的思路是把这些老手才懂的经验写成技能Skill——一组打包好的说明文档与脚本安装到你的 AI 编码工具如 Claude Code、Cursor 等后代理在检测到相关场景时会自动激活对应技能按最佳实践输出代码。 技能机制每个技能目录都包含 SKILL.md代理读取的指令与 README.md给用户看的说明按需加载、不占用过多上下文。MUI 技能Material-UI v7 的完整使用指南mui 技能覆盖 Material-UI v72025 年 3 月发布的核心场景相当于一份随身可用的官方最佳实践手册。一键掌握 sx 样式系统与主题令牌MUI 最核心的能力是通过sx属性做样式。技能内置了两套按组件复杂度划分的样式组织规范样式少于 100 行直接在组件文件顶部定义类型安全的样式对象样式超过 100 行拆分为独立的ComponentName.styles.ts样式文件。同时技能强制三条黄金法则给 sx 属性加类型用SxPropsTheme保证类型安全用主题令牌代替硬编码写primary.main而不是#1976d2用间距刻度写p: 2而不是16px视觉节奏更统一。响应式布局与常用组件全覆盖技能完整覆盖前端日常高频组件场景技能提供的模式布局Box、Paper、Container、Stack 的使用规范网格12 列响应式 Gridxs/sm/md/lg/xl 断点表单TextField 校验、错误状态处理反馈Dialog、Snackbar、Skeleton 骨架屏图标mui/icons-material 的正确引入方式移动端适配也是重点只需一个断点对象如xs: 100%、md: 60%同一组件即可在手机到桌面间自动切换。v7 破坏性变更避坑清单升级 MUI v7 时最头疼的变更技能已逐条列出深度导入不再可用改用包导出字段Modal 的onBackdropClick已移除统一使用onClose所有组件采用标准化的slots/slotProps模式新增enableCssLayer配置兼容 Tailwind v4 的 CSS 层级。技能的触发机制同样精巧查看 skill-rules-fragment.json 可以看到当你提到sx propcreateThemeuseTheme或编辑*.styles.ts、theme.ts等文件时技能会自动介入——无需手动激活。react-dev 技能TypeScript 类型安全的 React 18-19 完整指南如果说 mui 技能管界面那么 react-dev 技能就管代码质量。它把类型安全 React 的全部套路写成可复制的模式核心口号是类型安全的 React 编译期保证 敢重构。React 19 三大变化一次讲透新特性变化要点ref 作为普通 propforwardRef已弃用直接解构ref即可useActionState替代已弃用的useFormState表单提交状态一步到位use() 钩子直接解包 Promise 与 Context配合 Suspense 实现流式数据详细的迁移清单收录在 references/react-19-patterns.md。七类核心模式告别 any技能覆盖了日常开发最常卡壳的七类场景组件 Props用ComponentPropsWithoutRef扩展原生元素类型不丢失事件处理程序MouseEventHTMLButtonElement等精确类型杜绝anyHooks 类型useState显式声明联合/null 类型、自定义 Hook 用as const保持元组泛型组件类型安全的 Table、List、Modal数据传什么类型列配置自动推断Server Components服务端组件直接async取数 use server服务端动作类型安全路由TanStack RouterZod 校验查询参数与 React Router v7自动生成类型双支持可辨识联合variant 不同的属性组合编译期就拦住错误用法。事件类型的完整速查表见 references/event-handlers.mdServer Components 的并行取数与流式渲染示例见 examples/server-components.md。技能还内置了一份必须做 / 绝不做规则清单如绝不在children上用JSX.Element、绝不混写 Server/Client 组件于同一文件代理生成代码时会自动遵守。react-useeffect 技能你可能根本不需要 useEffect第三个隐藏宝藏是 react-useeffect 技能。它基于 React 官方文档提炼出一个反直觉的结论Effect 是逃生舱不是默认选项。场景错误做法技能推荐做法由 props 派生状态useState useEffect渲染时直接计算昂贵计算useEffect 缓存useMemoprop 变化时重置状态useEffect setState用key属性响应用户事件useEffect 监听状态事件处理函数配套的决策树让你 10 秒内判断到底要不要写 Effect是用户交互用事件处理器。是派生数据直接算。是外部系统同步那才轮到 Effect。详细反模式与替代方案见 anti-patterns.md 和 alternatives.md。如何安装与使用这些前端技能安装方式有三种任选其一方式一一条命令安装推荐npx skills add softaworks/agent-toolkit方式二作为插件市场注册/plugin marketplace add softaworks/agent-toolkit方式三克隆仓库手动安装git clone https://gitcode.com/gh_mirrors/agentt/agent-toolkit cp -r agent-toolkit/skills/mui ~/.claude/skills/安装后无需任何配置——当你说出用 MUI 做个响应式卡片帮我给这个事件加类型之类的话对应技能就会自动触发。技能文件索引想深入时看这里文件内容skills/mui/SKILL.mdMUI v7 模式总纲样式、组件、主题、响应式skills/mui/README.mdmui 技能使用说明与示例skills/mui/skill-rules-fragment.json技能自动触发关键词与文件规则skills/react-dev/SKILL.mdReact 18-19 类型安全模式速查skills/react-dev/references/hooks.mdHooks 类型详解skills/react-dev/references/tanstack-router.mdTanStack Router 类型安全路由skills/react-dev/references/react-router.mdReact Router v7 路由模式skills/react-dev/examples/generic-components.md泛型 Table / Select / Modal 完整示例skills/react-useeffect/SKILL.mduseEffect 决策树skills/react-useeffect/anti-patterns.mduseEffect 常见反模式修复README.md全仓库技能总览表结语把最佳实践装进你的 AI 代理agent-toolkit 的 React 与 MUI 技能本质上是经验即插即用mui 技能守住 MUI v7 的样式与组件规范react-dev 技能锁死 TypeScript 类型安全底线react-useeffect 技能帮你砍掉冗余代码。三者组合让 AI 编码代理输出的前端代码接近团队里最有经验成员的写法。对于正在做 React 项目的你这大概就是当下最值得试的免费前端技能包了 【免费下载链接】agent-toolkitA curated collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities across development, documentation, planning, and professional workflows.项目地址: https://gitcode.com/gh_mirrors/agentt/agent-toolkit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考