菜单
Reactの正しい書き方を徹底するスキル。useRef/useStateの使い分け、useEffectの適切な使用と代替API、React 19の最新機能、Concurrent Modeに沿った記述を指導する。Reactコンポーネントの作成・修正・レビュー時に使用する。古いReactパターンを避け、現代のAsync Reactに沿ったコードを書く。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
| name | react |
| description | Reactの正しい書き方を徹底するスキル。useRef/useStateの使い分け、useEffectの適切な使用と代替API、React 19の最新機能、Concurrent Modeに沿った記述を指導する。Reactコンポーネントの作成・修正・レビュー時に使用する。古いReactパターンを避け、現代のAsync Reactに沿ったコードを書く。 |
正しいReactを書くためのスキル。パフォーマンス最適化ではなく、Reactのメンタルモデルに沿った正しいコードを書くことに重点を置く。
| 基準 | useState | useRef |
|---|---|---|
| レンダーに影響する値 | ✅ | ❌ |
| 変更時に再レンダーが必要 | ✅ | ❌ |
| タイムアウト/インターバルID | ❌ | ✅ |
| DOM要素への参照 | ❌ | ✅ |
| レンダーに不要な最新値の保持 | ❌ | ✅ |
判断基準: その値が画面に表示されるか？ → useState。表示されないが保持が必要か？ → useRef。
refの鉄則: レンダー中にref.currentを読み書きしない（一度きりの初期化パターンは例外）。
refでのDOM操作（フォーカス、スクロール、リスト内の複数ref、useImperativeHandle、flushSyncなど）の詳細は references/dom-refs.md を参照。
useEffectは外部システムとの同期のためだけに使う。それ以外の用途は大抵間違い。
正しい用途:
useEffectが不要な11のパターン: references/no-effect-patterns.md を参照。
依存値の除去パターンの詳細は references/effect-dependencies.md を参照。
古いパターンを避け、React 19の機能を積極的に使う。
非同期処理の状態管理にはActionsを使う:
const [isPending, startTransition] = useTransition();
function handleSubmit() {
startTransition(async () => {
await saveData();
});
}
フォームのアクション管理に使う。pending状態、エラー、結果を自動管理する。
楽観的UIの実装に使う。リクエスト完了前にUIを即座に更新し、失敗時に自動で戻す。
Promiseやコンテキストをレンダー中に読む。条件分岐内でも使える（useContextやuseStateと違い、条件内で呼べる）。
forwardRefは不要。refは通常のpropとして受け取る:
// ❌ 古い
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);
// ✅ React 19
function Input({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
<Context.Provider>ではなく<Context>を直接使う:
// ❌ 古い
<ThemeContext.Provider value={theme}>
// ✅ React 19
<ThemeContext value={theme}>
refコールバックからクリーンアップ関数を返せる:
<div ref={(node) => {
// セットアップ
return () => {
// クリーンアップ
};
}} />
UIをブロックせずにstate更新する。重い再レンダーをバックグラウンドで実行:
const [isPending, startTransition] = useTransition();
startTransition(() => {
setHeavyState(newValue); // UIをブロックしない
});
高頻度で変わる値の更新を遅延させ、入力のレスポンシブさを保つ。
非同期データの読み込みを宣言的に扱う。ローディング状態の管理にuseState + useEffectを使わない。
Server Componentsがデフォルト。"use client"をつけたものだけがClient Component。
核心ルール:
"use client"の境界はできるだけ葉に近い位置に置く。ページ全体をClient Componentにしない詳細（"use client"/"use server"のルール、compositionパターン、セキュリティ、シリアライズ可能な型一覧）は references/rsc.md を参照。
useMount、useEffectOnceのようなライフサイクルフックuseEffect内でのstate更新による派生値の計算forwardRef（React 19ではrefをpropとして渡す）useEffectでのイベントハンドラロジック// eslint-disable-next-line react-hooks/exhaustive-depsuseで始め、大文字を続けるPreview generated Markdown (plans, design notes, reviews, research reports) in the user's browser. Use when sharing long, structured output — documents with headings, tables, code blocks, or Mermaid diagrams — that is hard to read in the terminal.
テストの記述ガイドライン。テストを書くとき、テスト設計を考えるとき、テスト戦略を議論するときに使用する。テストの目的、構成、書き方の原則に基づき、信頼性が高く保守しやすいテストを書く。
OpenAI Codex CLIを使ってコードや計画に対する外部視点のレビューを取得する。計画の妥当性確認、複雑な問題で行き詰まったとき、アーキテクチャ判断のセカンドオピニオン、難しいデバッグのときに使用する。「Codexに聞いて」「セカンドオピニオンが欲しい」などのリクエストにも対応する。
freshターミナルエディタでファイルを開く操作。ユーザーが「freshで開いて」「このファイルをエディタで見たい」「編集したい」と言ったとき、cmux経由でfreshを別ペインに起動してファイルを開く。
cmuxターミナル内での操作スキル。CMUX_*環境変数が存在する場合、cmuxのCLIコマンドを使う前に必ずこのスキルを読む。ペイン分割、コマンド送信、ブラウザ自動化、通知、サブエージェントの隔離実行など、cmux操作全般で使用する。「別ペインで開いて」「横に表示して」「ブラウザで確認して」などのときにも使用する。
k8oが好むUIデザインの方針。UIコンポーネントの作成、画面デザイン、スタイリングの判断時に使用する。ArteOdysseyを使うプロジェクトではコンポーネントやトークンの具体的な使い方を、それ以外のプロジェクトではデザインの方向性を提供する。自由にデザインを作るとき、見た目の判断に迷ったとき、UIレビュー時にも使用する。