frontend-patterns
使用经过验证的模式构建现代React应用
前端开发人员经常面临代码架构不一致和重复解决常见问题的情况。本技能提供经过实战测试的React模式，涵盖组件、hooks、状态管理和性能优化。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“frontend-patterns”。 创建具有无障碍功能的开关组件
预期结果:
一个完全无障碍的Toggle组件，包含键盘导航、正确的ARIA属性、焦点管理，以及包含onChange回调和checked状态props的TypeScript类型。
正在使用“frontend-patterns”。 构建具有排序和分页功能的数据表格
预期结果:
一个DataTable组件，具有带指示器的列排序、客户端分页控件、针对大型数据集的行虚拟化，以及通过复合列定义的自定义单元格渲染。
安全审计
安全This skill contains educational frontend development patterns for React and Next.js. All static analysis findings were false positives: backtick detections were TypeScript template literals in code examples, dynamic imports are React lazy() patterns for code splitting, and fetch calls are standard browser API usage for data fetching. No security risks identified.
质量评分
你能构建什么
构建可复用组件库
为卡片、标签页和模态框生成复合组件，在您的组织中强制执行一致的设计模式。
优化慢速React应用
应用记忆化、代码分割和虚拟化模式来改善数据密集型界面的渲染性能。
将类组件迁移到Hooks
将传统的基于类的组件和状态管理转换为使用自定义hooks的现代函数式组件。
试试这些提示
创建一个复合Select组件，包含Select、SelectOption和SelectLabel子组件，使用React context进行状态管理。包含TypeScript接口和基本样式。
构建一个useQuery hook，处理加载状态、错误处理和缓存。包含onSuccess和onError回调选项，以及手动refetch函数。
优化一个显示1000+行市场数据的仪表板组件。应用React.memo、useMemo进行排序、useVirtualizer进行列表虚拟化，以及Suspense配合lazy loading加载重型图表组件。
使用Framer Motion创建动画的模态组件，实现正确的焦点捕获、键盘Escape处理，并在关闭时将焦点恢复到触发元素。包含ARIA属性和TypeScript类型。
最佳实践
- 优先使用组合而非继承，将UI拆分为接受children的小型专注组件
- 对于传递给记忆化子组件的函数，使用空依赖数组的useCallback
- 在功能区域周围实现错误边界，防止组件错误导致整个应用崩溃
避免
- 避免通过多个组件层级进行prop穿透——使用Context或组件组合替代
- 不要在条件语句或循环中调用hooks——始终在组件顶层调用hooks
- 永远不要在useState中存储派生状态——在渲染期间计算它或使用useMemo进行昂贵计算