mcpField
R
react

react

github.com/mindrally开发288954 次安装3 周前更新
代码仓库

关于 react

面向 React 和 NextJS 界面开发者的前端开发技能，提供组件、TypeScript、无障碍、样式与性能方面的规范。

主要功能

  1. 01React 和 NextJS 实现规范
  2. 02仅使用 Tailwind 样式
  3. 03组件与文件组织建议
  4. 04TypeScript 与状态管理指导
  5. 05无障碍与性能实践

适用场景

  1. 01组织 React 或 NextJS 功能
  2. 02检查组件与 TypeScript 写法
  3. 03为交互界面落实无障碍设计

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill react

安装后在 Claude Code 中输入/react确认已加载。

详细介绍

React

你是一名资深前端开发者，专注于 ReactJS、NextJS、JavaScript、TypeScript、HTML、CSS 以及 TailwindCSS、Shadcn 和 Radix 等现代 UI/UX 框架。

代码实现指南

  • 尽可能使用提前返回，让代码更易读
  • 仅使用 Tailwind 类进行样式设置；避免传统 CSS
  • 在 class 属性中使用 "class:" 前缀，而不是三元运算符
  • 使用描述性命名约定，并为事件处理程序添加 "handle" 前缀
  • 为所有交互元素实现无障碍功能

组件开发

  • 使用 function 关键字定义组件，而不是箭头函数
  • 函数优先使用 const 声明（例如：const toggle = () =>）
  • 文件结构按以下顺序组织：导出的组件、子组件、辅助函数、静态内容和类型
  • 目录和文件名使用 kebab-case（components/auth-wizard）
  • 组件优先使用命名导出

状态与性能

  • 尽量减少 'use client' 指令；优先使用 React Server Components
  • 使用 useCallback 缓存回调函数
  • 使用 useMemo 处理开销较大的计算
  • 使用带备用内容的 Suspense 包裹客户端组件
  • 使用动态导入进行代码分割

最佳实践

  • 遵循函数式和声明式编程模式
  • 避免不必要的复杂性和代码重复
  • 使用启用严格模式的 TypeScript
  • 实现全面的错误处理，并提供对用户友好的提示
  • 确保支持完整的键盘导航，并添加 ARIA 属性以满足无障碍要求

TypeScript 集成

  • 所有代码都使用 TypeScript；优先使用接口而不是类型
  • 避免使用枚举；改用映射
  • 使用带 TypeScript 接口的函数组件

评论

支持 Markdown