菜单
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 页面并帮你完成安装。
基于 SOC 职业分类
| 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 コンポーネント設計の規約集。Server Components / Client Components の境界設計、Composition パターン、データフローに関するルールを定義する。
以下の作業時に自動で参照する：
"use client" ディレクティブの追加・削除判断React 19+ / RSC対応フレームワーク
| Category | Prefix |
|---|---|
| Server/Client 境界 | boundary- |
| データ取得 | fetching- |
| Composition パターン | composition- |
| Suspense/ErrorBoundary | suspense- |
| Hooks 設計 | hooks- |
| パフォーマンス | perf- |
| コーディング規約 | style- |
"use client" はコンポーネントツリーの末端に置く"use client" を付けない個別ルールの詳細は rules/ ディレクトリ内のファイルを参照。上記 Quick Reference のリンクから各ルールにアクセスできる。
各ルールファイルには以下が含まれる：
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.
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.
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.
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.
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.