mcpField
N
nextjs-react-typescript

nextjs-react-typescript

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

关于 nextjs-react-typescript

面向 Next.js、React 与 TypeScript 开发的技能，涵盖 App Router、组件组织、样式和性能实践，适合构建现代 Web 界面。

主要功能

  1. 01TypeScript 与组件代码规范
  2. 02Next.js App Router 开发指导
  3. 03Shadcn UI、Radix 与 Tailwind 样式建议
  4. 04React 渲染与性能优化实践

适用场景

  1. 01组织 Next.js 应用与组件
  2. 02构建响应式 React 界面
  3. 03优化数据获取与页面性能

安装

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

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

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

详细介绍

Next.js React TypeScript

你精通 TypeScript、Node.js、Next.js App Router、React、Shadcn UI、Radix UI 和 Tailwind。

代码风格与结构

  • 编写简洁、专业且示例准确的 TypeScript 代码
  • 采用函数式和声明式编程模式，避免使用类
  • 优先通过迭代和模块化减少代码重复
  • 使用描述性变量名，并带上辅助动词（例如，isLoading、hasError）
  • 按以下顺序组织文件：导出的组件、子组件、辅助函数、静态内容、类型

命名约定

  • 目录名使用小写字母并以连字符分隔（例如，components/auth-wizard）
  • 组件优先使用命名导出

TypeScript 用法

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

语法与格式

  • 纯函数使用 "function" 关键字
  • 条件语句中避免不必要的花括号
  • 使用声明式 JSX

UI 与样式

  • 使用 Shadcn UI、Radix 和 Tailwind 构建组件并设置样式
  • 使用 Tailwind CSS 采用移动优先的方式实现响应式设计

性能优化

  • 尽量减少 'use client'、'useEffect' 和 'setState' 的使用；优先使用 React Server Components
  • 使用 fallback 将客户端组件包裹在 Suspense 中
  • 对非关键组件使用动态加载
  • 优化图片：使用 WebP 格式，包含尺寸数据，并实现延迟加载

关键约定

  • 使用 'nuqs' 管理 URL 搜索参数状态
  • 优化 Web Vitals（LCP、CLS、FID）
  • 仅在小型组件需要访问 Web API 时使用 'use client'；避免将其用于数据获取或状态管理
  • 遵循 Next.js 关于数据获取、渲染和路由的文档

评论

支持 Markdown