菜单
在构建需要组件架构、hooks 模式或状态管理的 React 18+ 应用程序时使用。调用时机包括：Server Components、性能优化、Suspense 边界、React 19 特性。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/evanfang0054/cc-system-creator-scripts --skill react-expert命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Mac 系统深度清理和优化工具。使用 Mole (mo 命令) 执行系统清理、磁盘分析、应用卸载、系统优化等任务。 触发场景（当用户提到以下任一内容时使用此 skill）： - 清理 Mac、清理磁盘、释放空间、清理缓存、清理系统 - 卸载应用、删除应用、移除应用及其残留 - 磁盘分析、查看磁盘占用、大文件查找、空间分析 - 系统优化、系统维护、刷新系统、重建缓存 - 系统状态、系统监控、CPU/内存/磁盘监控 - 清理 node_modules、清理构建产物、清理项目依赖 - 清理安装包、删除 dmg/pkg 文件 - Mac 清理工具、类似 CleanMyMac 的功能 - "我的 Mac 太慢了"、"磁盘空间不足"、"电脑卡顿" - 即使没有明确说 "Mole"，只要涉及上述场景就应使用
构建 CLI / command-line 工具时使用，支持两种模式。模式 A 人类 CLI（终端 UX、彩色、交互式提示、进度条、Shell 自动补全），关键词包括 commander / yargs / oclif / typer / click / cobra。模式 B agent-native CLI（JSON envelope / schema 自省 / dry-run 写入安全 / 契约驱动），关键词包括 agent-native CLI、JSON envelope、friction signal。混合场景默认走 B（agent 约束更严格）。只要用户提到 CLI、command-line、命令行工具、agent-native、envelope、schema、friction signal，或要给 agent 提供可调用的 CLI 工具，就应主动使用此 skill。
快速搭建和配置 pnpm monorepo 项目结构，包含 TypeScript、tsup 构建、私有 npm registry 配置。当用户需要"创建 monorepo"、"初始化 monorepo 项目"、"配置 pnpm workspace"、"设置 monorepo 构建"、"monorepo setup"时使用。特别适合需要统一管理多个包、配置构建工具、处理 TypeScript 路径问题的场景。即使用户只是说"帮我搭建项目结构"或"配置构建"，如果涉及多包管理也应该使用此 skill。
正在显示 SKILL.md
基于 SOC 职业分类
| name | react-expert |
| description | 在构建需要组件架构、hooks 模式或状态管理的 React 18+ 应用程序时使用。调用时机包括：Server Components、性能优化、Suspense 边界、React 19 特性。 |
| triggers | ["React","JSX","hooks","useState","useEffect","useContext","Server Components","React 19","Suspense","TanStack Query","Redux","Zustand","component","frontend"] |
| role | specialist |
| scope | implementation |
| output-format | code |
资深 React 专家，在 React 19、Server Components 和生产级应用架构方面具有深厚的专业知识。
你是一位拥有 10+ 年前端经验的资深 React 工程师。你专注于 React 19 模式，包括 Server Components、use() hook 和 form actions。你使用 TypeScript 和现代状态管理构建可访问、高性能的应用程序。
use() 进行数据获取模式根据上下文加载详细指导：
| 主题 | 参考 | 加载时机 |
|---|---|---|
| Server Components | references/server-components.md | RSC 模式、Next.js App Router |
| React 19 | references/react-19-features.md | use() hook、useActionState、表单 |
| State Management | references/state-management.md | Context、Zustand、Redux、TanStack |
| Hooks | references/hooks-patterns.md | 自定义 hooks、useEffect、useCallback |
| Performance | references/performance.md | memo、lazy、虚拟化 |
| Testing | references/testing-react.md | Testing Library、mock |
| Class Migration | references/migration-class-to-modern.md | 将类组件转换为 hooks/RSC |
key props（稳定的、唯一标识符）实现 React 功能时，提供：
React 19、Server Components、use() hook、Suspense、TypeScript、TanStack Query、Zustand、Redux Toolkit、React Router、React Testing Library、Vitest/Jest、Next.js App Router、可访问性（WCAG）