Menu
Reactの正しい書き方を徹底するスキル。useRef/useStateの使い分け、useEffectの適切な使用と代替API、React 19の最新機能、Concurrent Modeに沿った記述を指導する。Reactコンポーネントの作成・修正・レビュー時に使用する。古いReactパターンを避け、現代のAsync Reactに沿ったコードを書く。
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| 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で始め、大文字を続けるcmuxターミナル内での操作スキル。CMUX_*環境変数が存在する場合、cmuxのCLIコマンドを使う前に必ずこのスキルを読む。ペイン分割、コマンド送信、ブラウザ自動化、通知、Markdown/diffのプレビュー、cmux設定の変更など、cmux操作全般で使用する。「別ペインで開いて」「横に表示して」「ブラウザで確認して」「プレビューして」「diffを見せて」などのときにも使用する。
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.
バグを場当たり修正せず、根本原因を特定してから直すためのデバッグ手順。再現→切り分け→根本原因→検証の順で進める。バグ・デバッグ・原因不明・落ちる・再現しない・CIが赤・flakyなテスト・想定外の挙動に遭遇したときに使用する。「デバッグして」「なぜ落ちる」「原因を調べて」などのときにも使用する。
「完了」「直した」と報告する前に、実際に実行・テスト・観察して根拠を確かめるための検証ルール。修正・実装・リファクタが終わって成功を報告しようとするとき、変更が意図どおり動くと主張する前に使用する。「できた」「直した」「実装した」「修正完了」と言おうとしているときに使用する。
日本語の技術文書を書いた後・公開前にレビューし、重要度つきの指摘レポートを出すスキル（ファイルは変更しない）。日本語の文章品質・AI Slop・表記の慣習・整合性・独自性・語り口を点検する。媒体非依存の汎用版で、ブログMDXなどプロジェクト固有のレビュースキルがあればそちらを優先・併用する。
新しい k8o プロジェクト/リポジトリを立ち上げる一連の手順。@k8o/create で雛形生成 → GitHub リポジトリ作成 → ブランチ保護 ruleset とマージ設定 → リリース用 secret(fnox経由) → npm 初回 publish と Renovate 有効化まで。「新しい repo を作る」「プロジェクトを立ち上げる」「リポジトリの初期設定をする」ときに使用する。