원클릭으로 Manus에서 모든 스킬 실행

react-component-conventions

스타2

포크0

업데이트2026년 5월 18일 03:45

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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

yend724

yend724/agent-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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: 正しいコード例
判断に迷うケースのガイダンス

이 저장소의 다른 Skills

같은 저장소

function-programming-conventions

yend724/agent-skills

Functional programming conventions for TypeScript logic layers. Auto-triggers when writing utilities, services, domain logic, or data transformation logic to ensure pure functions, immutability, and proper side-effect isolation.

2026-05-182

nextjs-app-router-conventions

yend724/agent-skills

Next.js App Router conventions covering file-based routing, caching strategies, Server Actions, Metadata API, and framework-specific patterns. Auto-triggers when working within Next.js App Router projects (app/ directory, next.config, route handlers). Covers file-based routing, caching, Server Actions, Metadata API, and framework-specific patterns.

2026-05-182

testing-conventions

yend724/agent-skills

Testing conventions covering unit tests, component tests, and E2E tests. Auto-triggers when writing or modifying test files. Uses Vitest for unit/component tests and Playwright for E2E tests.

2026-05-182

typescript-coding-conventions

yend724/agent-skills

General TypeScript coding conventions for type safety, exported API design, and module structure. Auto-triggers when writing or refactoring TypeScript code outside framework-specific rules.

2026-05-182

frontend-architecture

yend724/agent-skills

Feature-based frontend architecture conventions. Auto-triggers when creating new files, directories, or organizing project structure. Defines rules for feature-based code organization, module boundaries, dependency direction, and public API design.

2026-05-042

name	react-component-conventions
description	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.

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: 正しいコード例
判断に迷うケースのガイダンス