Agent skill
server-components-patterns
React Server Componentsの実装パターン専門スキル。 データフェッチ最適化、Suspenseストリーミング、サーバーアクション実装を提供する。 Anchors: • Next.js Documentation / 適用: Server Components / 目的: パフォーマンス向上 • React Server Components RFC / 適用: RSCアーキテクチャ / 目的: フェッチ最適化 • Next.js Data Fetching / 適用: キャッシング戦略 / 目的: 効率的なデータ管理 Trigger: Use when implementing React Server Components, designing RSC patterns, optimizing data fetching, planning Suspense boundaries, or implementing Server Actions. RSC, Server Components, data fetching, Suspense, streaming, Server Actions, cache, revalidate
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/server-components-patterns
SKILL.md
Server Components Patterns
概要
React Server Componentsのデータフェッチ最適化とSuspense活用を専門とするスキル。サーバーコンポーネントアーキテクチャ、データフェッチ戦略、キャッシング、サーバーアクションをカバーする。
ワークフロー
analyze-requirements → design-pattern → implement-components → validate-performance
Phase 1: 要件分析
目的: RSCパターンの要件を分析する
Task: agents/analyze-requirements.md を参照
アクション:
- クライアント/サーバーコンポーネントの分離要件を確認
- データフェッチのタイミング要件を確認
- キャッシング戦略を検討
Phase 2: パターン設計・実装
目的: 最適なRSCパターンを選定し実装する
Task: agents/implement-pattern.md を参照
アクション:
- データフェッチパターンを選定
- Suspense境界を設計
- キャッシング戦略を適用
- Server Actionsを実装
Phase 3: 検証と最適化
目的: パフォーマンスを検証し最適化する
アクション:
- データフェッチパターンを分析
- パフォーマンスを測定
scripts/log_usage.mjsで記録
Task仕様ナビ
| Task | 責務 | 入力 | 出力 |
|---|---|---|---|
| analyze-requirements | 要件分析 | コンポーネント情報 | RSC要件定義 |
| implement-pattern | パターン実装 | RSC要件 | 実装済みコンポーネント |
詳細仕様: 各Taskの詳細は agents/ ディレクトリを参照
ベストプラクティス
すべきこと
| 推奨事項 | 理由 |
|---|---|
| 可能な限りServer Componentを使用 | バンドルサイズ削減 |
| 並列フェッチにPromise.allを使用 | ウォーターフォール防止 |
| cache関数で重複排除する | 不要なフェッチの削減 |
| 細かい粒度のSuspense境界を設計 | UXの向上 |
| revalidateタグで効率的にキャッシュ | オンデマンド再検証 |
避けるべきこと
| 禁止事項 | 問題点 |
|---|---|
| 過度なClient Component使用 | バンドルサイズ増加 |
| 逐次フェッチ（ウォーターフォール） | パフォーマンス低下 |
| 粗粒度のSuspense境界 | UX低下 |
| N+1クエリ | データベース負荷増大 |
| サーバー検証の省略 | セキュリティリスク |
リソース参照
references/（詳細知識）
| リソース | パス | 読込条件 |
|---|---|---|
| データフェッチ | references/data-fetching-patterns.md | フェッチ実装時 |
| キャッシング | references/caching-strategies.md | キャッシュ設定時 |
| Suspense | references/suspense-streaming.md | ストリーミング時 |
| Server Actions | references/server-actions.md | アクション実装時 |
scripts/（決定論的処理）
| スクリプト | 機能 |
|---|---|
scripts/log_usage.mjs |
使用記録と自動評価 |
scripts/analyze-data-fetching.mjs |
データフェッチ分析 |
assets/（テンプレート）
| アセット | 用途 |
|---|---|
assets/data-fetch-template.md |
データフェッチテンプレート |
assets/server-action-template.md |
Server Actionテンプレート |
変更履歴
| Version | Date | Changes |
|---|---|---|
| 3.0.0 | 2026-01-02 | 18-skills仕様完全準拠、agents/を責務ベースに再構成 |
| 2.0.0 | 2025-12-31 | 18-skills.md仕様に基づきリファクタリング |
| 1.0.0 | 2025-12-24 | 初版 |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?