React component conventions

Skill yend724/agent-skills/skills/react-component-conventions

This repository contains Agent Skills published by yend724.

Install

npx -y skills add yend724/agent-skills --skill react-component-conventions

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

React component design conventions focusing on Server/Client component boundaries, composition patterns, and data flow. Auto-triggers when writing or modifying React components to ensure correct RSC patterns and optimal component architecture.

SKILL.md

5.8 KB, as published. Nobody here has run it

React Component Design Conventions

React コンポーネント設計の規約集。Server Components / Client Components の境界設計、Composition パターン、データフローに関するルールを定義する。

When to Apply

以下の作業時に自動で参照する：

React コンポーネントの新規作成
既存コンポーネントのリファクタリング
"use client" ディレクティブの追加・削除判断
データ取得パターンの実装
コンポーネント間のデータフロー設計

Compatibility

React 19+ / RSC対応フレームワーク

Rule Categories

Category	Prefix
Server/Client 境界	`boundary-`
データ取得	`fetching-`
Composition パターン	`composition-`
Suspense/ErrorBoundary	`suspense-`
Hooks 設計	`hooks-`
パフォーマンス	`perf-`
コーディング規約	`style-`

Quick Reference

Server/Client 境界

boundary-minimize-use-client - "use client" はコンポーネントツリーの末端に置く
boundary-leaf-interactivity - インタラクティブ要素のみを Client Component として切り出す
boundary-no-premature-client - クライアント機能を使わないのに "use client" を付けない
boundary-serialize-props - Server → Client に渡す props はシリアライズ可能にする
boundary-context-provider-wrapper - Context Provider は専用の Client Component でラップする

データ取得

fetching-server-first - データ取得は Server Component で行い、結果を props で渡す
fetching-no-useeffect-fetch - 初期データ取得に useEffect を使わない
fetching-colocate - データ取得はそれを使うコンポーネントにコロケーションする
fetching-async-component - Server Component は async/await で直接データ取得する

Composition パターン

composition-children-across-boundary - children を使って Server Component を Client Component 内に配置する
composition-render-prop-for-server - 複雑なレイアウトでは render prop で Server Component を注入する
composition-slots-pattern - 複数の Server Component を Client に渡すには名前付き slots を使う
composition-avoid-prop-drilling - 深いprops受け渡しより Composition で解決する

Suspense / ErrorBoundary

suspense-granular-boundaries - Suspense 境界は可能な限り細粒度に配置する
suspense-avoid-single-wrapper - ページ全体を1つの Suspense で囲まない
suspense-parallel-streaming - 独立したデータソースは別々の Suspense で並列ストリーミングする
suspense-meaningful-fallback - fallback は意図を持って選択する
errorboundary-isolation - 障害の影響範囲を限定するために ErrorBoundary を適切に配置する

Hooks 設計

hooks-single-responsibility - 1つの custom hook は1つの関心事のみを扱う
hooks-extract-logic - 計算ロジックは hook の外の pure function として抽出する
hooks-stable-references - コールバックや依存値の参照安定性を意識する
hooks-use-effect-discipline - useEffect は外部システムとの同期専用にする

パフォーマンス

perf-no-premature-memo - useMemo / useCallback を計測なしに使わない
perf-transition-heavy-update - 重い状態更新には useTransition を使う
perf-deferred-slow-render - 遅いコンポーネントには useDeferredValue で入力のレスポンスを維持する

コーディング規約

style-arrow-named-export - アロー関数 + named export でコンポーネントを定義する
style-props-type - Props の型は type で定義し、React.FC で型付けする
style-file-naming - ファイル名は kebab-case で統一する
style-import-order - インポートはカテゴリ順に並べ、グループ間に空行を入れる

How to Use

個別ルールの詳細は rules/ ディレクトリ内のファイルを参照。上記 Quick Reference のリンクから各ルールにアクセスできる。

各ルールファイルには以下が含まれる：

ルールの説明と根拠
Bad: 間違ったコード例
Good: 正しいコード例
判断に迷うケースのガイダンス