メニュー
React / JSX / TSX / .jsx / .tsx 実装を書く前に、コンポーネント設計、Atomic Design を補助観点にした UI 分割、hooks、props、state、UI 実装の責務分離を確認するときに使う。
デザインカンプ、スクリーンショット、HTML、既存画面、仕様メモなどの Input から React / Next.js / TypeScript の UI を実装する前に、画面構成、構成要素ツリー、コンポーネント境界、props、hooks、状態管理、実装順序を設計するために使う。新規画面作成、既存画面への UI 追加、大きな JSX の分割、UI リファクタリング、既存コンポーネントを探して再利用する実装、未実装の構成要素を順に消化する実装では必ず使う。単純な文言変更、色や余白だけの小変更、既に境界が明確な小さな修正だけなら使わない。
直近のエージェント作業を振り返り、最初に知っていれば遠回りしなかった知見を抽出して、skill、AGENTS.md、CLAUDE.md などの再利用可能なルールへ反映するときに使う。反映前に変更内容をユーザーへ確認する。
Git リポジトリで、ベースブランチまたは残したい履歴の終点 commit との差分に含まれる commit や巨大な未整理差分を、意味のある変更単位ごとに整理して commit し直すときに使う。ユーザーが「commit を分割して」「巨大なコミットを分けて」「連続コミットを整理して」「履歴をきれいにして」「この差分を変更単位でコミットして」「ベースブランチとの差分を整理して」などを依頼した場合に使う。基準 ref の指定を確認し、指定がなければデフォルトブランチでよいか yes/no で確認する。git log / diff / status を確認し、必要に応じて grill-me skill で分割方針を詰め、整理後の commit 作成には cmd-commit skill を使う。
GitHub Actions や CI の失敗を調査し、原因を切り分けて修正するときに使う。ユーザーが「CI 落ちてる」「GitHub Actions 直して」「workflow が失敗」「checks が red」「test failure を直して」「lint/build が CI でだけ落ちる」などを依頼した場合は必ず使う。gh CLI、workflow ログ、ローカル再現、最小修正、再検証、PR 反映までを安全な順序で進める。
現在のエージェントのタスク状況、進捗、実行中または保留中の作業、ブロッカー、次に行うことをユーザーへ簡潔に報告するときに使う。ユーザーが「今どうなっている」「ステータス」「進捗」「何をしている」「止まっているか」などを尋ねた場合に使う。
広範囲のコードベース調査、横断的な修正、複数領域にまたがるテスト・検証を、複数エージェントや並列作業に分割して進めるときに使う。大規模な変更の担当範囲、調査観点、編集所有権、統合、競合回避、検証順序を整理する必要がある場合に使う。
| name | code-react |
| description | React / JSX / TSX / .jsx / .tsx 実装を書く前に、コンポーネント設計、Atomic Design を補助観点にした UI 分割、hooks、props、state、UI 実装の責務分離を確認するときに使う。 |
React 実装で、コンポーネント境界、状態、表示ロジックを整理して既存 UI に馴染む判断をするための参照 skill。
この skill は、React 実装中に component 境界、hooks / props / state、Atomic Design の補助観点、責務分離を確認するために使う。
画面構成、大きな JSX 分割、component tree、実装順序を先に整理する必要がある場合は、component-design を先に使う。
Atomic Design は、UI を小さな部品から組み立てるための補助観点として使う。
ただし atoms / molecules / organisms の分類を目的化しない。
atoms / molecules は design system 層として扱い、ドメイン知識を持たせない。
この層では design token、variant、layout、interaction state など、見た目と基本操作だけを表現する。
業務ルール、API 由来のデータ構造、ユーザーや注文などのドメイン語彙が入る component は feature / domain 側へ置く。
優先する判断軸:
atoms / molecules が design system の見た目、状態、操作だけを表現しているか。