Menu
Refactor React components to follow project conventions. Use when reorganizing, splitting, or cleaning up existing React component files.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | react-refactor-component |
| description | Refactor React components to follow project conventions. Use when reorganizing, splitting, or cleaning up existing React component files. |
| argument-hint | [file-path or component-name] |
| allowed-tools | AskUserQuestion, Bash(biome:*), Bash(eslint:*), Bash(git diff:*), Bash(git mv:*), Bash(git status:*), Bash(nix:*), Bash(nix-fast-build:*), Bash(npm:*), Bash(pnpm:*), Bash(prettier:*), Bash(tsc:*), Bash(yarn:*), Edit, Glob, Grep, Read, Write |
指示されたReactコンポーネントを、
react-component-conventionスキルで定めるルールに沿ってリファクタリングします。
/react-refactor-component <ファイルパス または コンポーネント名>
$ARGUMENTSで指定されたコンポーネントと、
その周辺で同じファイルに同居している関連コンポーネントを読み取り、
ルール違反を検出してリファクタリングを行います。
$ARGUMENTSが省略された場合は、
IDEで開いているファイル/ユーザーが直前に話題にしたコンポーネントを対象とします。
$ARGUMENTSで指定されたコンポーネントファイルをReadで開きます。
ファイル名から責務がわからない場合は、import元の使用箇所もあわせて確認します。
以下のチェックリストでコードを点検し、違反箇所を列挙します。
index.tsx/index.tsではないかreturnの直前までが肥大化していないか加えてweb-tasukeプラグインの他スキルで定義されているTypeScriptの規約にも違反していないか確認してください。
リファクタリングを実行する前に、何をどう変更するつもりかを箇条書きで提示し、合意を取ります。 具体的には次を含めます。
フック名やファイル名の好み、分割粒度などユーザーの方針判断が必要な箇所があれば、 ここでAskUserQuestionを使って確認します。
合意が取れたらEdit/Writeでリファクタリングを行います。次の順序で進めると壊れにくいです。
リファクタリング後、プロジェクトのリンターとビルドを実行して壊していないことを確認します。
エラーが出た場合は、原因を読み取った上で根本修正します。
相談のない// eslint-disable-next-lineやas anyでの回避は禁止です。
最後に、ユーザーへ次を簡潔に報告します。
svaやpanda CSSのトークンなど既存の命名規約・デザイントークンを勝手に変更しないGenerate a commit message from staged changes and let the user review before committing. Use when the user wants to commit changes or create a git commit.
Generate a GitHub pull request title and body from the current branch and let the user review before creation. Use when the user wants to create a pull request.
Investigate any topic by querying multiple external sources (web, official docs, GitHub, MCP servers). Use whenever a question requires information not already in the working context, including library behavior, API specifications, error diagnostics, version comparisons, or general factual lookup.
himari is ncaq's rio-like custom Haskell Prelude. Import it with a single `import Himari`, never `import Himari.Prelude` or other submodules directly. Use when writing or reviewing Haskell code in a project that depends on the himari package.
Prefer the most specific built-in method over general-purpose ones in TypeScript/JavaScript. Use includes over indexOf, some over filter().length, find over filter()[0], flatMap over map().flat(), at(-1) over length-based access, startsWith/endsWith/includes over indexOf on strings, structuredClone over JSON round-trip. Use when writing or reviewing code that searches, tests, transforms arrays, objects, or strings.
Avoid for loops (C-style, for...of, for...in) in TypeScript/JavaScript. Prefer higher-order Array methods like map, filter, find, some, every, reduce. Use when writing or reviewing loops or iteration over arrays, objects, Map, Set, or String.