关于 modern-web-development
Brandon Fernandez 编写的现代 Web 开发 Cursor 规则，面向使用 TypeScript、React 与 Next.js 等技术的开发者。内容涵盖代码规范、数据处理、测试、样式和无障碍实践。
主要功能
- 01TypeScript 与函数式代码规范
- 02React 和 Next.js 开发建议
- 03Supabase 与 GraphQL 数据处理
- 04Tailwind CSS 组件样式建议
- 05测试、无障碍与文档实践
适用场景
- 01统一 TypeScript 项目的代码风格
- 02规划 React 与 Next.js 组件
- 03设计 Supabase 数据访问与安全策略
- 04检查 Web 界面的测试和无障碍要求
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/modern-web-development确认已加载。
详细介绍
现代 Web 开发
Brandon Fernandez 为现代 Web 开发制定的全面 Cursor 规则，涵盖 TypeScript、Node.js、Next.js 14、React、Supabase、GraphQL、Tailwind CSS、Radix UI 和 Shadcn UI。
核心开发原则
代码风格与架构
- 编写简洁、专业的回复，并提供准确的 TypeScript 示例
- 采用函数式、声明式编程，避免基于类的方式
- 优先进行迭代与模块化，避免代码重复
- 使用描述性变量名，并搭配辅助动词（
isLoading、hasError） - 实现 RORO 模式（接收对象，返回对象）
JavaScript/TypeScript 标准
- 使用
function关键字编写纯函数 - 省略分号
- 仅使用 TypeScript，优先使用接口而非类型
- 文件结构依次为：导出的组件、子组件、辅助函数、静态内容、类型
- 在条件语句中尽量减少不必要的花括号
错误处理
- 在函数入口处处理错误和边界情况
- 对错误情况采用提前返回，避免深层嵌套
- 将成功路径放在最后，以提高可读性
- 使用守卫语句验证前置条件
- 提供对用户友好的错误信息
React 和 Next.js 指南
- 使用带有 TypeScript 接口的函数组件
- 使用
function声明编写声明式 JSX - 使用 Shadcn UI、Radix 和 Tailwind CSS 进行样式设计
- 采用移动优先的响应式设计
- 尽量减少使用
use client、useEffect和setState，优先使用 React Server Components - 使用 Zod 验证表单
- 使用备用内容将客户端组件包裹在 Suspense 中
- 对非关键组件使用动态加载
- 优化图像（WebP 格式、尺寸数据、延迟加载）
数据与状态管理
- 使用 React Server Components 获取数据
- 实现预加载模式，避免瀑布效应
- 使用 Supabase 实现实时同步和状态管理
- 考虑使用 Vercel KV 存储聊天记录、实施速率限制和管理会话
Supabase 和 GraphQL
- 使用 Supabase 客户端进行数据库交互和订阅
- 实施行级安全（RLS）策略
- 使用 Supabase Auth、Storage 和 Edge Functions
- 使用 Genql 与 GraphQL API 进行类型安全的交互
- 优化 GraphQL 查询，只获取必要的数据
样式与测试
样式
- 采用 Tailwind CSS 实用优先的方法
- 使用 Class Variance Authority（CVA）管理组件变体
测试
- 为工具函数和钩子编写单元测试
- 为复杂组件编写集成测试
- 为关键用户流程编写端到端测试
无障碍访问与文档
无障碍访问
- 确保界面支持键盘导航
- 实现适当的 ARIA 标签和语义角色
- 确保颜色对比度符合 WCAG 标准
文档
- 提供清晰的 JSDoc 注释，以便 IDE 提供智能提示
- 记录 Supabase 架构、RLS 策略和 Edge Functions
评论
支持 Markdown