スキル cc-skill-frontend-patterns
📦

cc-skill-frontend-patterns

安全

应用现代 React 模式

使用经过验证的组件组合、状态管理和性能优化模式，构建可维护的 React 应用程序。

対応: Claude Codex Code(CC)
📊 69 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「cc-skill-frontend-patterns」を使用しています。 创建一个包含 TabList、Tab 和 TabPanel 的复合 Tabs 组件

期待される結果:

通过 React Context 共享状态、完善的类型定义和使用示例的完整实现

「cc-skill-frontend-patterns」を使用しています。 为搜索输入编写 useDebounce hook

期待される結果:

一个按指定延迟更新值的自定义 Hook，包含 TypeScript 类型

「cc-skill-frontend-patterns」を使用しています。 添加错误边界以捕获组件错误

期待される結果:

基于类的 ErrorBoundary 组件，包含 getDerivedStateFromError 和 componentDidCatch

セキュリティ監査

安全
v1 • 2/25/2026

This is a legitimate frontend development documentation skill. All 54 static findings are false positives triggered by code examples in markdown documentation. The skill teaches standard React patterns including composition, hooks, state management, and performance optimization. No actual security risks present.

1
スキャンされたファイル
639
解析された行数
0
検出結果
1
総監査数
セキュリティ問題は見つかりませんでした
監査者: claude

品質スコア

38
アーキテクチャ
90
保守性
85
コンテンツ
31
コミュニティ
100
セキュリティ
87
仕様準拠

作れるもの

构建可复用组件库

使用复合组件和组合模式创建灵活、可复用的组件 API。

管理复杂应用状态

使用 React Context 和 useReducer 实现可扩展的状态管理。

优化 React 应用性能

应用记忆化、懒加载和虚拟化技术构建快速的用户界面。

これらのプロンプトを試す

创建复合组件 
为 React 中的 [component name] 创建复合组件模式。包括通过 Context 共享状态的 [sub-component-1]、[sub-component-2] 和 [sub-component-3]。
实现自定义 Hook 
编写一个名为 use[Feature] 的自定义 React Hook，用于处理 [特定行为，如数据获取、表单验证或本地存储]。
优化性能 
审查此 React 组件并在适当位置应用性能优化，包括 useMemo、useCallback 和 React.memo。
添加表单验证 
为字段创建一个受控表单组件并进行验证：[列出字段]。包括错误消息和提交处理。

ベストプラクティス

  • 组件复用优先选择组合而非继承
  • 保持自定义 Hook 专注于单一职责
  • 对耗时计算和回调函数进行记忆化
  • 使用 TypeScript 获得更好的组件契约

回避

  • 避免在渲染期间更新状态，这会导致无限循环
  • 不要直接修改对象；使用不可变更新
  • 不要在没有记忆化的情况下将新对象引用作为 props 传递
  • 不要忘记在 useEffect 依赖数组中包含所有依赖项

よくある質問

useMemo 和 useCallback 有什么区别？
useMemo 记忆化计算值，而 useCallback 记忆化函数。对耗时计算使用 useMemo，当向优化后的子组件传递回调时使用 useCallback。
何时应该使用 useReducer 而不是 useState？
当存在多个子值的复杂状态逻辑，或下一个状态依赖于前一个状态时，使用 useReducer。它提供可预测的状态转换。
复合组件如何工作？
复合组件利用 React Context 在相关组件间共享隐式状态。父组件管理状态并通过 Context 提供，使子组件能够访问和修改它。
什么是代码分割，为什么它很重要？
代码分割将 bundle 拆分为较小的块，按需加载。它通过仅加载当前视图所需的代码来改善初始加载时间。
如何防止不必要的重新渲染？
对纯组件使用 React.memo，对耗时计算使用 useMemo，对函数 props 使用 useCallback，并确保状态更新是稳定的引用。
这个技能能帮助 Next.js 开发吗？
是的，这些模式适用于 Next.js，包括服务端组件、客户端组件和 App Router。状态管理和性能模式在 React 和 Next.js 中都适用。

開発者の詳細

作成者

affaan-m

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/cc-skill-frontend-patterns

参照

main

ファイル構成

📄 SKILL.md